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
mouseover popup
10 svar · 394 visningar · startad av lillan
ä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