Member Avatar for Inny

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 because: Fixed formatting
  • 1 Contributor
  • 2 Replies
  • 106 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by Inny
Member Avatar for Inny

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?

Member Avatar for Inny

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 because: Fixed formatting
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.