PDA

View Full Version : mouseover with image map help needed

jrg0517
12-03-2005, 03:00 AM
Here is the script I generated...

The main image works, but no mouseovers or mouseout... the mouseout should be the main image again.

I used an image map because i have 5 bracelets in one picture, all with different styles. I created the mouseover images so that when your mouse is over one of them, that bracelet will highlight and show the name of the style. But the mouseovers are not working at all.

All the .gif have been uploaded into a sub folder named bracelets. I do not want and ALT tag or an onclick, an no link associated to each bracelet.

Please help!

<img src="PINLINKSSBRACELETS.gif" usemap="#PINLINKSSBRACELETS" alt="" style="border-style:none" />



<map id="PINLINKSSBRACELETS" name="PINLINKSSBRACELETS">
<area shape="rect" alt="" coords="148,79,226,536" nohref title="" onMouseOver="/bracelets/PINLINKpres.gif" onMouseOut="/bracelets/PINLINKSSBRACELETS.gif" onClick="/bracelets/PINLINKSSBRACELETS.gif" />
<area shape="rect" alt="" coords="238,60,322,537" nohref title="" onMouseOver="/bracelets/PINLINkjub.gif" />
<area shape="rect" alt="" coords="338,22,422,536" nohref title="" onMouseOver="/bracelets/PINLINKstoyst.gif" onMouseOut="/bracelets/PINKLINKSSBRACELETS.gif" onClick="/bracelets/PINLINKSSBRACELETS.gif" />
<area shape="rect" alt="" coords="440,18,524,536" nohref title="" onMouseOver="/bracelets/PINLINKcvoyst.gif" onMouseOut="/bracelets/PINLINKSSBRACELETS.gif" onClick="/bracelets/PINLINKSSBRACELETS.gif" />
<area shape="rect" alt="" coords="538,45,631,536" nohref title="" onMouseOver="/bracelets/PINLINKbreit.gif" onMouseOut="/bracelets/PINLINKSSBRACELETS.gif" onClick="/bracelets/PINLINKSSBRACELETS.gif" />
<area shape="default" nohref="nohref" alt="" />
</map>
jrg0517
12-03-2005, 11:32 PM
Please!

It really is driving me crazy!
vwphillips
12-04-2005, 06:16 PM
what do you mean by


that bracelet will highlight and sh
jrg0517
12-07-2005, 06:57 PM
I have a picture of 5 bracelets in it. I created 5 seperate images, each image highlights one of the bracelets, and shows the name of it on there. I want the main picture of the 5 bracelets to show the mouseover image when they move their mouse over each individual bracelet. I have the image map defining the coordinates for the mouseover, I have the mouse over images created and uploaded, but the mouseover does not work.

What do I need to add, change or fix in my script above to get the mouseover image to work correctly for each bracelet in the image map?

Hope that clarifies what I am trying to accomplish.

Thanks,
jrg0517
GJay
12-08-2005, 07:56 PM
Slicing the image up is much easier (and perhaps the only way?)
vwphillips
12-18-2005, 03:18 PM
Cant figure map coords or image sizes but

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';

var sImg,MImg,VMImg;

function HiLiteImage(obj,simg,mimg){
sImg=document.getElementById('sub');
MImg=document.getElementById('Main');
VMImg=document.getElementById('ViewMain');
sImg.src=ImgPath+simg;
sImg.style.left=(zxcPos(MImg)[0]+parseInt(obj.coords.split(',')[0]))+'px';
sImg.style.top=(zxcPos(MImg)[1]+parseInt(obj.coords.split(',')[1]))+'px';
sImg.style.visibility='visible';
sImg.main=mimg;
sImg.onmouseout=function(){ this.style.visibility='hidden'; }
sImg.onclick=function(){ VMImg.src=ImgPath+this.main; }
}

function zxcPos(zxc){
zxcObjLeft = zxc.offsetLeft;
zxcObjTop = zxc.offsetTop;
while(zxc.offsetParent!=null){
zxcObjParent=zxc.offsetParent;
zxcObjLeft+=zxcObjParent.offsetLeft;
zxcObjTop+=zxcObjParent.offsetTop;
zxc=zxcObjParent;
}
return [zxcObjLeft,zxcObjTop];
}

//-->
</script></head>

<body>

<img id="Main" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" usemap="#PINLINKSSBRACELETS" alt="" style="border-style:none" width=650 height=550/>

<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" id="ViewMain" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" id="sub" width=150 height=650 style="position:absolute;" >
<map id="PINLINKSSBRACELETS" name="PINLINKSSBRACELETS">
<area shape="rect" alt="" coords="148,79,226,536" nohref title="" onmouseover="HiLiteImage(this,'One.gif','One.gif');" >
<area shape="rect" alt="" coords="238,60,322,537" nohref title="" onmouseover="HiLiteImage(this,'Two.gif','Two.gif');" />
<area shape="rect" alt="" coords="338,22,422,536" nohref title="" onmouseover="HiLiteImage(this,'Three.gif','Three.gif');" />
<area shape="rect" alt="" coords="440,18,524,536" nohref title="" onmouseover="HiLiteImage(this,'Four.gif','Four.gif');" />
<area shape="rect" alt="" coords="538,45,631,536" nohref title="" onmouseover="HiLiteImage(this,'Five.gif','Five.gif');" />
<area shape="default" nohref="nohref" alt="" />
</map>
</body>

</html>