# Solved: rotating images with image maps?



## madradgirl (Mar 8, 2011)

Can it be done? I can't figure out how.

I created an image map that changes images as you rollover the hotspots. Now I want to have the images automatically rotate/swap as well when the user isn't hovering over the hot spots.

Take a look at the website that I am working on and let me know how I can do it. www.embersurge.com

Coding isn't the easiest thing for me...but I'm trying so I appreciate your help more than you know! 

Cheers!


----------



## ehymel (Aug 12, 2007)

This can definitely be done. There are probably lots of ways, but the method I suggest here is trying to use your own code as much as possible so it's easier to understand. Basically, you use the javascript function setInterval() to rotate the image periodically. Insert this at the bottom of you code, inside the closing tag:


```
<script type="text/javascript">
var j=1;
function changeImg() {
    document.header.src = eval('Image' + j).src;
    if (j<6) 
    	j++;
    else
    	j=1;
    return true;
}

var sID = setInterval('changeImg()', 2000);
</script>
```
This will do what you asked; the 2000 in the sID= line specifies changing things every 2 seconds. One problem that it will introduce is losing the mouseover functionality that you still need, so I suggest suspending the setInterval timer with the onmouseover functions, then change your main() function that is called onmouseout to re-set the setInterval. Note that you'll need a function to handle the mouseover for the 3rd tab. Study this block:


```
<script language="javascript"> 
 
function vflash() {
	clearInterval(sID);
	document.header.src = Image6.src;
	return true;
}
 
function cpx() {
	clearInterval(sID);
	document.header.src = Image5.src;
	return true;
}
 
function pj5000() {
	clearInterval(sID);
	document.header.src = Image4.src; 
	return true; 
}
 
function hd() {
	clearInterval(sID);
	document.header.src = Image2.src; 
	return true;
}
 
function sd() {
	clearInterval(sID);
	document.header.src = Image1.src; 
	return true;
}
 
function hdplus() {
	clearInterval(sID);
	document.header.src = Image3.src; 
	return true; 
}

function main() {
	sID = setInterval('changeImg()', 2000); 
	return true;
}
 
</script>
```
I'm sure the programmers in the group are cringing at this inefficient code, but it works with what you have already written, so it should be simple to implement. Hope this helps.


----------



## madradgirl (Mar 8, 2011)

Thanks E!

Please don't cringe at my inefficient code.  In my novice coding eyes, it makes sense! I'm going to try our inefficient code and see if I can make it work, but out of curiosity I would love to see efficient code if anyone has any free time. Who knows...I may really get into this!


----------



## ehymel (Aug 12, 2007)

Well, the first thing to do would be to replace all of those repetitive functions in my 2nd block of code suggestion with a single function. Replace my entire 2nd block from above with this instead:


```
<script type="text/javascript">
function switchImg(imageNo) {
	clearInterval(sID);
	document.header.src = eval(imageNo).src;
	return true;
}

function main() {
	sID = setInterval('changeImg()', 2000); 
	return true;
}
</script>
```
Then change your mouseover functions to match this:


```
<map name="headerMap" id="headerMap">
	<area shape="rect" coords="789,217,935,269" href="vflash.html" alt="v-Flash" onmouseover="switchImg('Image6')" onmouseout="main()"/>
	<area shape="rect" coords="637,218,786,273" href="cpx3000.html" alt="CPX 3000" onmouseover="switchImg('Image5')" onmouseout="main()"/>
	<area shape="rect" coords="480,216,632,274" href="pj5000.html" alt="ProJet 5000" onmouseover="switchImg('Image4')" onmouseout="main()"/>
	<area shape="rect" coords="329,219,476,274" href="HD3000plus.html" alt="ProJet HD 3000plus" onmouseover="switchImg('Image3')" onmouseout="main()"/>
	<area shape="rect" coords="176,217,327,273" href="HD3000.html" alt="ProJet HD 3000 3D Printer" onmouseover="switchImg('Image2')" onmouseout="main()"/>
	<area shape="rect" coords="22,218,173,275" href="SD3000.html" alt="ProJet SD 3000" onmouseover="switchImg('Image1')" onmouseout="main()" />
	<area shape="default" coords="0,0,0,0" nohref="nohref"/>
</map>
```


----------



## madradgirl (Mar 8, 2011)

The inefficient code worked great! I'm going to mark this as solved, but I'm going to try the efficient code as well.

Thank you soooo much!


----------



## madradgirl (Mar 8, 2011)

Hi E...I have a question about the inefficient code. When you click on one of the hot spots it seems like the rotation goes a little out of whack. Like it goes into a changing frenzy if you navigate through the site. Thoughts?


----------



## ehymel (Aug 12, 2007)

I can't reproduce that on my end (IE8 and FF3.5.3). What browser are you using?


----------



## madradgirl (Mar 8, 2011)

I checked it in both IE8 and Firefox. It works fine initially until you go to a different link. It appears to work fine until it cycles through the first three tabs and then goes a little crazy. 

Take a look at the site. www.embersurge.com. click on any of the links in the image and then watch it for a little.

Let me know if you see it.  Thx.


----------



## ehymel (Aug 12, 2007)

OK, I see now. The problem is that you have 2 different functions with the same name "main()". You can only have one function of a given name. Leave the one that has the setinterval() function as "main()", then all the other function (vflash(), cpx(), pj5000(), etc.) names the same across all pages.


----------



## madradgirl (Mar 8, 2011)

Hi ehymel...so I'm not having any luck fixing the frenzy of cycling. When you said that I could only have one function with the same name, did you mean that I need to get rid of the entire block below? I tried this out, but the problem was not fixed.

Please let me know.

<SCRIPTLANGUAGE="javascript">

function vflash() {document.header.src = Image6.src; return true;}

function cpx() {document.header.src = Image5.src; return true;}

function pj5000() {document.header.src = Image4.src; return true;}

function hd() {document.header.src = Image2.src; return true;}

function sd() {document.header.src = Image1.src; return true;}

function main() {document.header.src = Image3.src; return true;}

</script>


----------



## ehymel (Aug 12, 2007)

Well, that's not what I meant at the time that I wrote that, but looking at the source of your web page as it stands at the moment, I agree that deleting the block that you referenced is exactly what is needed. 

If you delete that block and things still aren't working, let me know and we can see what needs to be fixed from there. Seems like it should work, though.


----------



## madradgirl (Mar 8, 2011)

Hi E. Deleted the block. It's still behaving wierd after you click on one of the hotspots. Also it seems like you lose the mouse over function so it doesn't stay on the hotspot that you are mousing over. If you leave the webpage on the hotspot that you clicked the cycle starts to randomly speed up and slow down. It's quite fascinating but makes me dizzy!  How can we stop the madness?


----------



## ehymel (Aug 12, 2007)

OK, looking at the source code of your pages now, I see the new problem.

In the image map section of your pages, you have everything correct on your main page (index.html).

On all sub-pages, though, your image map section has an error. One link (depending on the page) has the same reference to the function main() for both the onmouseover and onmouseout. What you should do instead is have the identical block for the image map definition for all pages. You can use the one from index.html. Do not have a change by page.

Hope this helps!


----------



## madradgirl (Mar 8, 2011)

ok. let me change that and get back to you. thanks so much for the attention to detail.


----------



## madradgirl (Mar 8, 2011)

Yay! I think we did it! You are the best! xoxoxo


----------



## ehymel (Aug 12, 2007)

Glad it worked!


----------



## thingamajig (Mar 5, 2005)

Good job guys. I like the effect. It works great. :up:


----------

