JORGEMAL Posted April 14, 2009 Share Posted April 14, 2009 I am new to Javascript and I need to write the code to achieve the following effect. I have a catalog of items displayed on screen and each item includes an image which is also displayed. What I need to do is to display a bigger image when the mouse is on a certain image and to remove it as soon as the mouse pointer goes out. I suppose that the events I need to manage are Onmouseover and Onmouseout, what I do not know is how to detect the mouse coordinates so the bigger image is displayed around the original one; also I do not know how to display the image, I thought about "document.write" it but it is added at the end of the page. There is only one image available so I think that to get it bigger I may change the size at the moment of displaying it when the Onmouseover event is triggered.I will appreciate any help.Respectfully,Jorge Maldonado Link to comment Share on other sites More sharing options...
mstransky Posted April 14, 2009 Share Posted April 14, 2009 this is something you can mess with, I did not do this code but it is something you might be able to modify<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>Some text here</title><style type="text/css">#floatthis{position: absolute;width: 150px;border: 2px solid black;padding: 2px;background-color: lightyellow;visibility: hidden;z-index: 100;/*Remove below line to remove shadow. Below line should always appear last within this CSS*/filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);}</style></head><body><div id="floatthis"></div><script type="text/javascript">var offsetxpoint=-60 //Customize x offset of tooltipvar offsetypoint=20 //Customize y offset of tooltipvar ie=document.allvar ns6=document.getElementById && !document.allvar enabletip=falseif (ie||ns6)var tipobj=document.all? document.all["floatthis"] : document.getElementById? document.getElementById("floatthis") : ""function ietruebody(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}function ddrivetip(thetext, thecolor, thewidth){if (ns6||ie){if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolortipobj.innerHTML=thetextenabletip=truereturn false}}function positiontip(e){if (enabletip){var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;//Find out how close the mouse is to the corner of the windowvar rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000//if the horizontal distance isn't enough to accomodate the width of the context menuif (rightedge<tipobj.offsetWidth)//move the horizontal position of the menu to the left by it's widthtipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"else if (curX<leftedge)tipobj.style.left="5px"else//position the horizontal position of the menu where the mouse is positionedtipobj.style.left=curX+offsetxpoint+"px"//same concept with the vertical positionif (bottomedge<tipobj.offsetHeight)tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"elsetipobj.style.top=curY+offsetypoint+"px"tipobj.style.visibility="visible"}}function hideddrivetip(){if (ns6||ie){enabletip=falsetipobj.style.visibility="hidden"tipobj.style.left="-1000px"tipobj.style.backgroundColor=''tipobj.style.width=''}}document.onmousemove=positiontip</script><a href="http://www.yahoo.com" onMouseover="ddrivetip('<img alt=\'\' src=\'../3d-templates/marble-stone/ball%20brown.gif\' width=\'100\' height=\'100\'>')" onMouseout="hideddrivetip()" ;>Search Engine</a> <br><br><DIV onMouseover="ddrivetip('This DIV has a tip!', '#EFEFEF')"; onMouseout="hideddrivetip()">Some text here. Some text here.</div> <br><br> <a href="http://yahoo.com" onMouseover="ddrivetip('Yahoo\'s Site', 'yellow', 250)" onMouseout="hideddrivetip()" ;>Yahoo</a> <br/>kk<img alt="" src="../3d-templates/marble-stone/ball%20brown.gif" width="100" height="100">jjj</body></html>i think it came from dhtltoolttips a long time ago Link to comment Share on other sites More sharing options...
JORGEMAL Posted April 14, 2009 Author Share Posted April 14, 2009 I am looking for a small and simple piece of code, I guess what MSTRANKY wrote/copied is complex. I already have done something with a few lines (5 lines) but it is not what I need. What I did is to change height and width using "document.getElementById().width" and "document.getElementById().height" but this method changes the size of the actual image and I want to display a new image as a popup as soon as the mouse gets over it and to close it when the pouse gets out. Link to comment Share on other sites More sharing options...
mstransky Posted April 14, 2009 Share Posted April 14, 2009 I am looking for a small and simple piece of code, I guess what MSTRANKY wrote/copied is complex. I already have done something with a few lines (5 lines) but it is not what I need. What I did is to change height and width using "document.getElementById().width" and "document.getElementById().height" but this method changes the size of the actual image and I want to display a new image as a popup as soon as the mouse gets over it and to close it when the pouse gets out.SO about that, many people are looking for cross brower types, I figured if I post a full one you could take from it an idea to use what you want from it.if you post you 5 lines of code I can make a short repley change, if not me I am sure someone else can suggest somthing. Link to comment Share on other sites More sharing options...
justsomeguy Posted April 14, 2009 Share Posted April 14, 2009 There are several scripts people have made to do effects like that, check this one:http://www.huddletogether.com/projects/lightbox/It would be easy enough to change the click event to mouseover instead, although click might be preferred. Link to comment Share on other sites More sharing options...
jlhaslip Posted April 15, 2009 Share Posted April 15, 2009 For a CSS - only method, google Hoverbox.For a Demo, see here. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.