View Full Version : Regarding the onMouseOver Command

08-17-2004, 11:41 PM
Hey ... I'm just trying to learn JavaScript now, and so I've been looking at some online tutorials.

My basic need is to take link banners on my website (http://www.bodyboarding.tk is the site address; http://members.aol.com/thestateofreft/pages/links.htm is the page address), and do the following:

Have them all 350x65 by default
Use the onMouseOver command to make them 425x80

The tutorial I looked at gave me the information as to how to do an onMouseOver command, but it required the images to be the same size.

I'm editing the page without uploading it, so you won't be able to see the code from the source I gave above, but here is the scripting I have right now:

<SCRIPT language="JavaScript"

if (document.images)
pic1on= new Image(425,80);

pic1off= new Image(350,65);


function lightup(imgName)
if (document.images)
imgOn=eval(imgName + "on.src");
document[imgName].src= imgOn;

function turnoff(imgName)
if (document.images)
imgOff=eval(imgName + "off.src");
document[imgName].src= imgOff;


and ...

<td align="center" class="text">
<a href="http://store.yahoo.com/cgi-bin/clink?ebodyboarding+EvvK2a+index.html+" target="_blank">eBodyboarding.com</a><br>
The largest selection of bodyboarding equipment in the world! You want it? You got it at eBodyboarding.com!</td>
<td align="center" width="400">
<a href="http://store.yahoo.com/cgi-bin/clink?ebodyboarding+EvvK2a+index.html+" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')"><IMG SRC="pictures/ebodyboarding.GIF" name="pic1" width="350" height="65" border="0"></A></td>

I thought that by changing the size tags at the top of the JavaScript, I could then make the image size change when the mouse hovered over it... but that was not the case.

Any ideas?

08-18-2004, 02:45 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Image size rollover</title>
<img src="thumbnail_small.png" onmouseover="this.src = 'image_large.png'" onmouseout="this.src = 'image_small.png'">
</html>Just don't specify the image size anywhere.

08-18-2004, 02:57 AM
Oh God. LOL I'm such an idiot

I ended up using a whole different thing (that involved using my picture editor to make pictures the sizes I wanted) to do it. DUH!

Well, thanks... for future reference, I guess. :-P