Newbie question about image maps

[Paully1999]

Code below

I need to change the imagemap name that is used after a person clicks on the image.

I want to swap between image map1 and image map2

I am already swaping the image in the animate function.

But how...I don't have a clue.

So a little help please.

Paul



<SCRIPT>
var img0 = new Image( 640, 480 );
img0.src = &quot;radimg6/<%=StateImageAni%>&quot;;

var img1 = new Image( 640, 480 );
img1.src = &quot;radimg5/<%=StateImageAni%>&quot;;

var img2 = new Image( 640, 480 );
img2.src = &quot;radimg4/<%=StateImageAni%>&quot;;

var img3 = new Image( 640, 480 );
img3.src = &quot;radimg3/<%=StateImageAni%>&quot;;

var img4 = new Image( 640, 480 );
img4.src = &quot;radimg2/<%=StateImageAni%>&quot;;

var img5 = new Image( 640, 480 );
img5.src = &quot;radimg1/<%=StateImageAni%>&quot;;

var imgtb = new Image( 640, 22 );
imgtb.src = &quot;/images/zoomout_stop_opt.gif&quot;;

var stopped = 1
var i = 0;
var nbImg = 6; // change to the number of different images you have
function animate() {
document.radar.src = eval(&quot;img&quot; + i ).src;
i++;
if (i == nbImg) i=0;
junk = setTimeout(&quot;animate();&quot;, 500); // in milliseconds
document.tool2bar.src = imgtb.src;
return;
}

function stopit() {
clearTimeout(junk);
return;
}
</script>


<MAP NAME=&quot;map1&quot; >
<AREA SHAPE=&quot;rect&quot; ALT=&quot;&quot; COORDS=&quot;0,0,187,22&quot; HREF=&quot;/weather/radar.asp&quot;>
<AREA SHAPE=&quot;rect&quot; ALT=&quot;&quot; COORDS=&quot;249,0,396,22&quot; HREF=&quot;javascript:animate();&quot;>
</MAP>

<MAP NAME=&quot;map2&quot; >
<AREA SHAPE=&quot;rect&quot; ALT=&quot;&quot; COORDS=&quot;0,0,187,22&quot; HREF=&quot;/weather/radar.asp&quot;>
<AREA SHAPE=&quot;rect&quot; ALT=&quot;&quot; COORDS=&quot;269,0,396,22&quot; HREF=&quot;javascript:stopit();&quot;>
</MAP>


<img name=&quot;tool2bar&quot; src=&quot;/images/zoomout_animate_opt.gif&quot; usemap=&quot;#map1&quot; border=&quot;0&quot;>
<IMG name=&quot;radar&quot; src=&quot;theimage.gif&quot; width=640 height=480 ALT=&quot;Click to change image&quot;>

 

[jaredn]

I was not able to change the usemap property however, in IE(only tested 5.5 but probably works in 4+) i was able to do this:

<img id=fut usemap=&quot;#map1&quot; width=500 height=500>

<MAP id=&quot;ben&quot; NAME=&quot;map1&quot; >
<AREA SHAPE=&quot;rect&quot; ALT=&quot;&quot; COORDS=&quot;0,0,187,22&quot; HREF=&quot;/weather/radar.asp&quot;>
<AREA SHAPE=&quot;rect&quot; ALT=&quot;&quot; COORDS=&quot;249,0,396,22&quot; HREF=&quot;javascript:alert('1');&quot;>
</MAP>

<script>
str=&quot;&quot;
str+='<AREA SHAPE=&quot;rect&quot; ALT=&quot;&quot; COORDS=&quot;0,0,187,22&quot; HREF=&quot;/weather/radar.asp&quot;>'
str+='<AREA SHAPE=&quot;rect&quot; ALT=&quot;&quot; COORDS=&quot;269,0,396,22&quot; HREF=&quot;javascript:alert(\'2\');&quot;>'
ben.innerHTML=str
</script>

You can emulate this functionality in Nutscab 6 by using DOM methods (i think) jared@aauser.com

 

[Paully1999]

Code below.

Okay forget the image map the really important thing is to stop the animation going on on the page.

I need one function that evaluates whether the animation is active if it is then stop it by using clearTimeout(junk); if it's not animate the image using the IF portion of the animate() function below.




var stopped = 1
var i = 0;
var nbImg = 6; // change to the number of different images you have

function animate() {

if (stopped = 1){
stopped = 0;
document.radar.src = eval(&quot;img&quot; + i ).src;
i++;
if (i == nbImg) i=0;
junk = setTimeout(&quot;animate();&quot;, 500); // in milliseconds
document.tool2bar.src = imgtb.src;

}
else {
clearTimeout(junk);
stopped = 1;
document.tool2bar.src = imgtb2.src;
return;
}

}

 

[jaredn]

now i'm a bit confused. I think you could just have a variable called Animation_running or something and set it to true or false, then just test it to decide what to do jared@aauser.com