SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
Thread: Display image on mouseover
-
May 29, 2007, 17:36 #1
- Join Date
- May 2007
- Posts
- 33
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Display image on mouseover
Right, got a question for the java genious's out there.
I've got links to different albums on my website. What I want to do is when I mouseover one of the links, I want a square thumbnail of the album art, say 60x60 or whatever to show up, and when i move off, the image goes away..kinda like a preview.
any ideas how to do this, or any tutorials where I can learn myself? thanks guys! x
-
May 29, 2007, 20:57 #2
- Join Date
- Nov 2005
- Location
- Midwest
- Posts
- 777
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Give this a try...
http://groan-zone.net/jscript/mouseover.html
-
May 30, 2007, 04:11 #3
- Join Date
- May 2007
- Posts
- 33
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
No thats not quite what i'm looking for. I want a box to appear with the album art inside when i move my mouse over the link. Thanks for the reply though.
-
May 30, 2007, 16:17 #4
- Join Date
- Nov 2005
- Location
- Midwest
- Posts
- 777
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Maybe something like this…
Code:<script language="JavaScript"> function mouseOver() { document.getElementById("image").setAttribute('src',test.gif'); } function mouseOut() { document.getElementById("image").setAttribute('src','test1.GIF'); } </script> <a onMouseOver="javascript: mouseOver();" onMouseOut="javascript: mouseOut();">Test</a> <img src="test.GIF" id="image" />
-
May 30, 2007, 17:26 #5
- Join Date
- Jan 2007
- Location
- Belgium
- Posts
- 591
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Just put the javascript below into for example ToolTip.js and put a script-tag in the HTML document's headers to include the JS-file.
Example at http://www.fish4code.net/test/tooltip/
Usage:
Code HTML4Strict:<a href="javascript:;" onmouseover="ShowToolTip('myimage.jpg','My image');" onmouseout="HideToolTip();">View this</a>
Code JavaScript:window.addEvent=function(e,ev,f,c){if(e.addEventListener){e.addEventListener(ev,f,c);}else if(e.attachEvent){var r=e.attachEvent('on'+ev,f);return r;}else{e['on'+ev]=f;}}; function $N(v,d){var r=document.createElement(v);r.id=d;return r;}; function $s(v){return(v.style);} function $ac(p,c){p.appendChild(c);} var mOX = 10; var mOY = 12; var ttlayer = null; var ToolTipEnabled = false; var IE = /MSIE/.test(navigator.userAgent) && navigator.platform == "Win32"; var mx, my; function initToolTip() { ttlayer=$N('div', 'tooltip-layer');s=$s(ttlayer);s.display='none';s.backgroundColor='#ffffff';s.border='1px solid #bbbbbb';s.padding='10px';s.position='absolute';s.zIndex='999999'; $ac(document.body,ttlayer); if (!IE){document.captureEvents(Event.MOUSEMOVE)} document.onmousemove = getMouseXY; } window.addEvent(window,"load",initToolTip,false); function ShowToolTip(src, alt) { if (!ToolTipEnabled && ttlayer){ // You can set the width and the height for the image to appear ttlayer.innerHTML = (src=='' ? alt : '<img src="'+src+'" alt="'+alt+'" border="0"/>'); ttlayer.style.display = 'block'; ToolTipEnabled = true; } } function HideToolTip() { ToolTipEnabled = false; if (ttlayer) ttlayer.style.display = 'none'; } function getMouseXY(e) { if (ttlayer!=null&&ToolTipEnabled){ if(IE){mx=event.clientX+document.body.scrollLeft;my=event.clientY+document.documentElement.scrollTop} else{mx=e.pageX;my=e.pageY} if(mx<0){mx=0;}if(my<0){my=0} var s=$s(ttlayer); var bh=document.body.clientHeight-12+document.documentElement.scrollTop; if(my+ttlayer.offsetHeight<bh){s.top=(my+mOY)+'px'} else if(my-ttlayer.offsetHeight<=0){s.top=(my-ttlayer.offsetHeight-mOY)+'px'} else{s.top=(my-ttlayer.offsetHeight>0?my-ttlayer.offsetHeight-mOY:my+mOY)+'px'} if(mx+ttlayer.offsetWidth<document.body.clientWidth){s.left=(mx+mOX)+'px'} else{s.left=(mx-ttlayer.offsetWidth-mOX>0?mx-ttlayer.offsetWidth-mOX:mx+mOX)+'px'} } return true }
FOR SALE: 1 set of morals, never used, will sell cheap
Bookmarks