0

Im trying to creat an Imagemap Menu using my banner. This is a proto-type for a much more complex imagemap menu.
I have created an imagemap of the original banner (click the eye) and used an image swap
script to swap to my 'menu banner' (which will have more clickable areas, some leading to further maps by way of image swap).

My problem is , the areas of the menu map that will lead to other imagemap menus, how do I add to the swap code to effect that?

how do I get the icons on the menu map clickable? EG

On the black menu map (banner), the first two icons will link direct to specific pages, clicking the third icon will swap the image to another similar black menu banner, also containing clickable icons to specific pages. and so on.

Heres what I have so Far (you can test in a testbed here http://www.jmarshall.com/easy/html/testbed.html )

<SCRIPT LANGUAGE=JavaScript>
intImage = 2;
function swapImage() {
switch (intImage) {
 case 1:
   IMG1.src = "http://i14.photobucket.com/albums/a345/Instar/part1.jpg"
   intImage = 2
   return(false);
case 2:
   IMG1.src = "http://i14.photobucket.com/albums/a345/Instar/Avatars/menu.jpg"
   intImage = 1
   return(false);
 }
}
</SCRIPT>

The Imagemap/s

<img src ="http://i14.photobucket.com/albums/a345/Instar/part1.jpg"
width ="741" height ="70"
alt="banner"
usemap ="#planetmap" onclick="swapImage();" /><map id ="planetmap"
name="planetmap">
<area shape ="rect" coords ="60,10,150,200"
  href ="http://i14.photobucket.com/albums/a345/Instar/Avatars/menu.jpg" width ="741" height ="70" 
  </map> 

Edited by mike_2000_17: Fixed formatting

1
Contributor
2
Replies
3
Views
9 Years
Discussion Span
Last Post by Inny
0

Actually I dont think that will work right because onClick will change the page to show the next black banner menu.
thats no good, it'll need to be swap onMouseover I think.
Not sure how to store an image .eg. the second banner, or any consequent banners as you navigate the menu?

0

I decided to go simpler by using a tooltip mouseover on each clickable area of the second (black) banner.

but how to i assign c0-0rdinates for image map areas to click on the second (black) banner?

<body>
<SCRIPT LANGUAGE=JavaScript>
intImage = 2;
function swapImage() {
switch (intImage) {
 case 1:
   IMG1.src = "http://i14.photobucket.com/albums/a345/Instar/part1.jpg"
   intImage = 2
   return(false);
case 2:
   IMG1.src = "http://i14.photobucket.com/albums/a345/Instar/Avatars/menu.jpg"
   intImage = 1
   return(false);
 }
}
</SCRIPT>


<script src="http://h1.ripway.com/Inny/wz_tooltip.js "></script>



<img src ="http://i14.photobucket.com/albums/a345/Instar/part1.jpg"
width ="741" height ="70" 
usemap ="#planetmap" onmouseover="swapImage();" onmouseover="Tip('Some text that explains this linky poo', BGCOLOR, 'yellow')" 
 onmouseout="UnTip()" /><map id ="planetmap"
name="planetmap">
<area shape ="rect" coords ="60,10,150,200"
  href ="http://i14.photobucket.com/albums/a345/Instar/Avatars/menu.jpg" width ="741" height ="70" />
  </map> 
</body>

Edited by mike_2000_17: Fixed formatting

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.