10 svar · 396 visningar · startad av lillan
Jag vill att när jag för musen över ett visst ord eller länk så ska det komma fram ett litet popupfönster med ett foto.
Någon som kan hjälpa? :r
är ingen höjdare på javascript, men det här borde funka
kod mellan <head> och </head>
<script language="JavaScript">
<!-- Begin
function popUp() {
props=window.open('[B]bild011.jpg[/B]', 'poppage', 'toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0, width=100, height=100 left = 0, top = 0');
}
// End -->
</script>
kod mellan <body> och </body>
<a onMouseOver="[RED]javaScript[/RED]:popUp()">onmouseover</a>
finns säkert bättre sätt...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="sv">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Test</title>
<script type="text/javascript">
window.onload = function(){
test = document.getElementById("test");
test.onmouseover = function(){
window.open("test.jpg", "Test", "width=750, height=500");
}
}
</script>
</head>
<body>
<p><span id="test">Test</span></p>
</body>
</html>
Popupen blockeras av Firefox, och jag skulle tro att du överraskar användaren när du använder onmouseover.
Jag skulle snarare använda onclick, eller: http://zcorpan.1go.dk/accessible-popups/ :)
Hmm, jag var lite otydlig...
jag menar denna effekten..
http://www.angelic-network.com/
Klicka på ME och sedan på "basic info"
För musen över de understukna orden -så vill jag göra :r
jaha.. här kanske det finns nåt du kan använda...
http://www.webdesignskolan.com/javascripts/overlib/popupinfo.htm
ex. den för valfri html-kod, kanske
ok... har tyvärr inga andra förslag :( du får vänta på nån mer kunnig... eller kan du ju maila och fråga
Det här hittade jag i källkoden på sidan du länkade till.
<a target="_self" onmouseover="doTooltip(event,2)" onmouseout="hideTip()" class="fade" href="#"> Leon</a>var dom = (document.getElementById) ? true : false; var ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false; var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false; var ns4 = (document.layers && !dom) ? true : false; var ie4 = (document.all && !dom) ? true : false; var nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false; var origWidth, origHeight; if (ns4) { origWidth = window.innerWidth; origHeight = window.innerHeight; window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); } } if (nodyn) { event = "nope" } var tipFollowMouse= true; var tipWidth= 210; var offX= 20; // how far from mouse to show tip var offY= 5; var tipFontFamily= "tahoma, arial, helvetica, sans-serif"; var tipFontSize= "7pt"; var tipFontColor= "#596970"; var tipBgColor= "#ffffff"; var tipBorderColor= "#C9CDCF"; var tipBorderWidth= 1; var tipBorderStyle= "ridge"; var tipPadding= 4; var messages = new Array(); messages[0] = new Array('blinkie.gif','<p align="justify">The influence of Angelique [...] occur.<br><br>Taken from:[url]www.kabalarians.com[/url]',"#ffffff"); messages[1] = new Array('kevin.jpg','<center>Kevin<br>My everything:)',"#000000"); messages[2] = new Array('leon.jpg','<center>Leon',"#000000"); // preload images that are to appear in tooltip // from arrays above if (document.images) { var theImgs = new Array(); for (var i=0; i<messages.length; i++) { theImgs[i] = new Image(); theImgs[i].src = messages[i][0]; } } var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="'; var midStr = '" border="0"></td></tr><tr><td valign="top">'; var endStr = '</td></tr></table>'; var tooltip, tipcss; function initTip() { if (nodyn) return; tooltip = (ns4)? document.tipDiv.document: (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null; tipcss = (ns4)? document.tipDiv: tooltip.style; if (ie4||ie5||ns5) { // ns4 would lose all this on rewrites tipcss.width = tipWidth+"px"; tipcss.fontFamily = tipFontFamily; tipcss.fontSize = tipFontSize; tipcss.color = tipFontColor; tipcss.backgroundColor = tipBgColor; tipcss.borderColor = tipBorderColor; tipcss.borderWidth = tipBorderWidth+"px"; tipcss.padding = tipPadding+"px"; tipcss.borderStyle = tipBorderStyle; } if (tooltip&&tipFollowMouse) { if (ns4) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = trackMouse; } } window.onload = initTip; var t1,t2; // for setTimeouts var tipOn = false; // check if over tooltip link function doTooltip(evt,num) { if (!tooltip) return; if (t1) clearTimeout(t1); if (t2) clearTimeout(t2); tipOn = true; // set colors if included in messages array if (messages[num][2]) var curBgColor = messages[num][2]; else curBgColor = tipBgColor; if (messages[num][3]) var curFontColor = messages[num][3]; else curFontColor = tipFontColor; if (ns4) { var tip = '<table bgcolor="' + tipBorderColor + '" width="' + tipWidth + '" cellspacing="0" cellpadding="' + tipBorderWidth + '" border="0"><tr><td><table bgcolor="' + curBgColor + '" width="100%" cellspacing="0" cellpadding="' + tipPadding + '" border="0"><tr><td>'+ startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr + '</td></tr></table></td></tr></table>'; tooltip.write(tip); tooltip.close(); } else if (ie4||ie5||ns5) { var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr; tipcss.backgroundColor = curBgColor; tooltip.innerHTML = tip; } if (!tipFollowMouse) positionTip(evt); else t1=setTimeout("tipcss.visibility='visible'",100); } var mouseX, mouseY; function trackMouse(evt) { mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + document.body.scrollLeft; mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + document.body.scrollTop; if (tipOn) positionTip(evt); } function positionTip(evt) { if (!tipFollowMouse) { mouseX = (ns4||ns5)? evt.pageX: window.event.clientX + document.body.scrollLeft; mouseY = (ns4||ns5)? evt.pageY: window.event.clientY + document.body.scrollTop; } var tpWd = (ns4)? tooltip.width: (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth; var tpHt = (ns4)? tooltip.height: (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight; var winWd = (ns4||ns5)? window.innerWidth-20+window.pageXOffset: document.body.clientWidth+document.body.scrollLeft; var winHt = (ns4||ns5)? window.innerHeight-20+window.pageYOffset: document.body.clientHeight+document.body.scrollTop; if ((mouseX+offX+tpWd)>winWd) tipcss.left = (ns4)? mouseX-(tpWd+offX): mouseX-(tpWd+offX)+"px"; else tipcss.left = (ns4)? mouseX+offX: mouseX+offX+"px"; if ((mouseY+offY+tpHt)>winHt) tipcss.top = (ns4)? winHt-(tpHt+offY): winHt-(tpHt+offY)+"px"; else tipcss.top = (ns4)? mouseY+offY: mouseY+offY+"px"; if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100); } function hideTip() { if (!tooltip) return; t2=setTimeout("tipcss.visibility='hidden'",100); tipOn = false; }
Åhhh!
Jag försökte själv hitta källan för att se vart hon hittat sitt script men lyckades inte.
HUR ska jag sätta in detta i ett htm.dokument?
För att skriva så där rakt upp och ner blir ju inte så bra :r
Kolla på http://www.walterzorn.com/tooltip/tooltip_e.htm Sedan håller du muspilen över "HTML"
Sedan har vi sidan http://www.dyn-web.com/dhtml/tooltips/tooltip.html