Jump to content

Onmouseover Image Effect


JORGEMAL
 Share

Recommended Posts

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

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...