Image rollover, but mouseover image is image map?

[Rainey]

Long title, I know. Sorry about that. But hope someone can help.

Using dreamweaver, I can create a rollover image easily. I can also create an image with multiple links within it (image mapping). But I was wondering, is there a way to have a rollover image, so the second image is an image map?

(I hope that makes sense to someone. I have tried searching Google and the threads here, but putting it into words was no easy thing... lol.)

BTW - loving this forum!!!!! Though there is TOO much information. ;)

Rainey!!

[tirna]

I am assuming you are changing the value of the src attribute of an <img> element to create your hover effect and not css :hover to change a backround image.

If so then in theory, yes you can.

Just add a usemap="#mapname" to the second <img> element.

[Rainey]

Tirna, thanks a lot for the quick reply.
You're right in the fact that I'm not using the css :hover to change the image, but the code I'm using only contains one <img> element. It was basically generated from the Dreamweaver Rollover Image tool.


<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Football Picture 3','','images/football-3-on.png',1)"><img src="images/football-3.png" alt="Football Picture 3" name="Football Picture 3" width="270" height="89" border="0" id="Football Picture 3" /></a>


Is there a better way to do these rollover images, which would allow me to add that usemap="#mapname" arguement? (I'm assuming it's an arguement?)

Thanks for any help. :)

Rainey!!

[tirna]

ok, I didn't have a correct picture in my mind of what you were trying to do.

I'm not a Dreamweaver user but in general I would do something like this:



HTML

<div>
<img id="yourId" src="yourImage1.jpg" alt="altText" onmouseover="swapImage(this.id)" usemap="#imageMapName2" />
<div>

Javascript

var imgNum = 0; //image swapping flag

function swapImage(imgId) {
//swap the image and set the appropriate image map for the image
switch (imgNum) {
case 0:
document.getElementById(imgId).src="yourImage0.jpg";
document.getElementById(imgId).usemap="#imageMapName1";
imgNum = 1;
break;
case 1:
document.getElementById(imgId).src="yourImage1.jpg";
document.getElementById(imgId).usemap="#imageMapName2";
imgNum = 0;
break;
}
}



I haven't tested this code but you should get the jist of what I am doing and hopefully you can incoporate it somehow into the dreamweaver code.

[Rainey]

Thanks again for the reply.

I can't say that that makes much sense just by looking at it. I have a bit of an idea what it's trying to do, but haven't had a chance to actually implement it.
(just keeping ye up to date - don't want ye thinking I've just asked for help then ran. lol. :) )

Rainey!!