Image maps and JS - click on an area and load new image - JavaScript and AJAX forum at WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Image maps and JS - click on an area and load new image

Is this possible without a complete page reload?

trillianjedi

4:23 pm on Jan 20, 2006 (gmt 0)

I think this might be my first post in here :-)

I have a map of Europe on a page (say, "europe1.gif"). I want to polygon image-map certain countries (say France) so that when the user clicks on France europe1.gif gets swapped for france1.gif.

Then a new link appears "<-- back" somewhere which allows the user to get back to the europe1.gif image.

Basically a zoomable image, without using Flash or similar.

Hope that makes sense.

The image-map obviously is easy, it's the JS part that I'm not sure about.

Possible?

Thanks,

trillianjedi

1:38 pm on Jan 22, 2006 (gmt 0)

*bump*

Some further digging is telling me that I can't really do what I want to do, but I'm wondering if any of the JS experts in here might know of something that substantially does the same thing, or achieves a similar end result?

Thanks!

MichaelBluejay

2:32 pm on Jan 22, 2006 (gmt 0)

I see Europe, I see France....

If I understand you then this does what you want.

<HTML><HEAD> 
  
<script type="text/javascript"> 
 function swap(whichContent) { 
  document.getElementById('content').innerHTML = document.getElementById(whichContent).innerHTML; 
} 
</script> 
  
</HEAD> 
<BODY onload="swap('europe')"> 
  
<div id=content> 
</div> 
  
<div style="visibility:hidden"> 
  
  <div id=europe> 
  <MAP NAME=map1> 
  <AREA SHAPE=rect COORDS="203,144,296,295" HREF="#" onclick="swap('france')"; return false"> 
  </MAP> 
  <IMG USEMAP="#map1" SRC="europe.jpg"></P> 
  </div> 
  
  <div id=france> 
  <img src="france.jpg"><a href="#" onclick="swap('europe'); return false"><P>Back to Europe...</a> 
  </div> 
</div> 
  
</BODY> 
</HTML>

trillianjedi

3:33 pm on Jan 22, 2006 (gmt 0)

Michael - fantastic!

Many thanks.