View Full Version : complicated image change on mouseover

12-13-2004, 08:50 PM
Hi. I'm designing a website for an artist friend of mine and I'm looking for a code which I can't seem to find.

Does anyone know of a way to have an image change to another image, but only when you put your mouse on a certain spot on the first image?

Sorry if that sounds a little confusing, but I'm not sure how else to describe it. I would greatly appreciate any help. Thanks a lot!


12-14-2004, 09:34 AM

Do you mean like this page http://www.ava-sexy.co.za/down.htm

If so edit the page and you will see how it was done, as the basic code was:

<img border="0" src="images/down/8.jpg" width="50" height="40" onclick="FP_openNewWindow('700', '600', false, false, false, false, true, true, 'Download', /*href*/'http://www.cherrycreektrading.co.za/download/silver.htm')" id="img8" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'swapmain',/*url*/'images/down/8.jpg')" style="border: 1px ridge #9B7A17"></td>

And your swapping an image in another layer from blank to pic the mouse was over. Hope this helps, simonf :cool:

12-14-2004, 07:56 PM
Thanks, I appreciate your help, but that's not really what I'm talking about.

Here's my situation. I have a big square picture with a circle in the middle of it. I would like to be able to make the entire big square picture change to a different picture, but only when you put your mouse over the middle circle.

I can't seem to find a way to do this and I don't even know if there is a way.

12-15-2004, 06:38 AM
Hi Mayde

Do you mean something like one of these two....


If so.... edit and you will see.... rgds,Simonf :cool:

12-15-2004, 09:32 PM
yes, something like that is exactly what i was talking about. now, I hate to keep bothing you, but can you possibly send me the code and explain how to change it to suit my needs? i hate to ask so much of you but i would really appreciate it. i'm kind of a beginner to this javascript stuff so even when i view the source code, i'm not entirely sure how to read it. thanks a lot!

if it would be easier, you can also email me:


12-17-2004, 06:27 AM
HI Mayde

Send you an e-mail as well.

<body onload="FP_preloadImgs(/*url*/'images/picturename.jpg')">

<div style="position: absolute; width: 393px; height: 290px; z-index: 1; left: 23px; top: 42px" id="layer1">
<img border="0" src="images/picturename.jpg" width="400" height="300" id="img1"></div>
<div style="position: absolute; width: 25px; height: 24px; z-index: 2; left: 374px; top: 289px" id="layer2">
<img border="0" src="images/cct.gif" width="25" height="25" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'images/newpicturename.jpg')"></div>


<body onload="FP_preloadImgs(/*url*/'images/picturename.jpg')">

<div style="position: absolute; width: 393px; height: 290px; z-index: 1; left: 490px; top: 36px" id="layer3">
<img border="0" src="images/picturename.jpg" width="400" height="300" id="img2"></div>
<table border="0" width="100%" id="table1" cellspacing="0" cellpadding="0">
<div style="position: absolute; width: 100px; height: 18px; z-index: 3; left: 777px; top: 278px" id="layer4">
<font face="Verdana" onmouseout="FP_swapImgRestore(); FP_changePropRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img2',/*url*/'images/newpicturename.jpg'); FP_changeProp(/*id*/'id1',1,'style.color','#FFFFFF')" style="cursor:hand; cursor:pointer" id="id1">
mouse over</font></div>


Place either section in the body of your page. rgds,Simonf :cool: