Drop down menu and image map

@lucassMar 30.2010

Hi there

I have been searching and searching but cannot find the type of drop down that I am looking for – I would like to see a menu appear when I pass the mouse over a region of my image, different menus would appear in different regions of my image map.
I don not have much experience with javascript, so I am wondering if any of you could help me accomplish this task, any tutorial or tips would be great.

Much appreciated

to post a comment

JavaScript

6 Comments(s) _↴

@tirnaMar 30.2010 — #You should be able to use the html/javascript below as a template for your image map.

I used a 200px x 200px test image with 4 different colours in each quarter as the image regions.

When you click on a colour a menu appears on the page. You can edit the menus to suit and the position of the menus in the css style in the <head>

I have attached the actual image I created for the demo.

[code=php] 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title></title>
 
 <style type="text/css">
 <!--
 #content {
 position: relative}
 
 #content a {
 display: block}
 
 #menu1, #menu2, #menu3, #menu4 {
 display: none}
 
 #menu1 {
 position: absolute;
 top: 50px;
 left: 300px}
 
 #menu2 {
 position: absolute;
 top: 100px;
 left: 300px}
 
 #menu3 {
 position: absolute;
 top: 250px;
 left: 20px}
 
 #menu4 {
 position: absolute;
 top: 250px;
 left: 150px}
 -->
 </style>
 <script type="text/javascript">
 <!--
 function showMenu(menuId)  {
 //hide all the menues
 document.getElementById('menu1').style.display="none";
 document.getElementById('menu2').style.display="none";
 document.getElementById('menu3').style.display="none";
 document.getElementById('menu4').style.display="none";
 //display the menu for this area of the image
 document.getElementById(menuId).style.display="block";
 }
 //-->
 </script>
 </head>
 <body>
 <div id="content">
 <img src="patch.jpg" alt="alt text" usemap="#patchMap" />
 <div id="menu1">
 Menu 1
 <a href="link1.htm">Link1</a>
 <a href="link2.htm">Link2</a>
 <a href="link3.htm">Link3</a>
 <a href="link4.htm">Link4</a>
 </div>
 <div id="menu2">
 Menu 2
 <a href="link1.htm">Link1</a>
 <a href="link2.htm">Link2</a>
 <a href="link3.htm">Link3</a>
 <a href="link4.htm">Link4</a>
 </div>
 <div id="menu3">
 Menu 3
 <a href="link1.htm">Link1</a>
 <a href="link2.htm">Link2</a>
 <a href="link3.htm">Link3</a>
 <a href="link4.htm">Link4</a>
 </div>
 <div id="menu4">
 Menu 4
 <a href="link1.htm">Link1</a>
 <a href="link2.htm">Link2</a>
 <a href="link3.htm">Link3</a>
 <a href="link4.htm">Link4</a>
 </div> 

 </div>
 
 <map name="patchMap" id="patchMap" >
 <area shape="rect" coords="0,0,100,100" href="javascript:showMenu('menu1');" />
 <area shape="rect" coords="100,0,200,100" href="javascript:showMenu('menu2');" />
 <area shape="rect" coords="0,100,100,200" href="javascript:showMenu('menu3');" />
 <area shape="rect" coords="100,100,200,200" href="javascript:showMenu('menu4');" /> 

 </map>
 </body>
 </html>
 
 [/code]

[upl-file uuid=e923a071-56fa-474b-9729-0032fb9f3ab7 size=15kB]patch.jpg[/upl-file]

@lucassauthorMar 31.2010 — #Thank you very much for the code!! It gave me the clues that I needed.

@johnybiz1Jan 17.2011 — #hey how can i make it appear not only when i press the color but when i mouse over it?

thanks

@TOLAJun 08.2017 — #You are a wonderful person! Thank you for sharing this, it helped me too!

@rootJun 08.2017 — #Thats a well out of date text editor you have there. I tweaked the code to this.

[code=html]<!DOCTYPE html> 
 <html> 
 <head> 
 <title></title> 
 <style> 
 #content { position: relative } 
 #content a { display: block } 
 #menu1, #menu2, #menu3, #menu4 { display: none } 
 #menu1 { position: absolute; top: 50px; left: 300px } 
 #menu2 { position: absolute; top: 100px; left: 300px } 
 #menu3 { position: absolute; top: 250px; left: 20px } 
 #menu4 { position: absolute; top: 250px; left: 150px } 
 </style> 
 <script> 
 function showMenu(menuId)  { 
 //hide all the menus 
 menus=["menu1","menu2","menu3","menu4"];
 while( menus.length) menu( menus.shift() ,"none");
 //display the menu for this area of the image 
 menu( menuId,"block");//document.getElementById(menuId).style.display="block"; 
 } 
 
 function menu( m, act ){
 document.getElementById(m).style.display = act;
 }
 </script> 
 </head> 
 <body> 
 <div id="content"> 
 <img src="patch.jpg" alt="alt text" usemap="#patchMap" /> 
 <div id="menu1"> 
 <h1>Menu 1</h1> 
 <a href="link1.htm">Link1</a> 
 <a href="link2.htm">Link2</a> 
 <a href="link3.htm">Link3</a> 
 <a href="link4.htm">Link4</a> 
 </div> 
 <div id="menu2"> 
 <h1>Menu 2</h1> 
 <a href="link1.htm">Link1</a> 
 <a href="link2.htm">Link2</a> 
 <a href="link3.htm">Link3</a> 
 <a href="link4.htm">Link4</a> 
 </div> 
 <div id="menu3"> 
 <h1>Menu 3</h1>
 <a href="link1.htm">Link1</a> 
 <a href="link2.htm">Link2</a> 
 <a href="link3.htm">Link3</a> 
 <a href="link4.htm">Link4</a> 
 </div> 
 <div id="menu4"> 
 <h1>Menu 4</h1> 
 <a href="link1.htm">Link1</a> 
 <a href="link2.htm">Link2</a> 
 <a href="link3.htm">Link3</a> 
 <a href="link4.htm">Link4</a> 
 </div> 
 </div> 
 <map name="patchMap" id="patchMap" > 
 <area shape="rect" coords="0,0,100,100" onclick="showMenu('menu1');" /> 
 <area shape="rect" coords="100,0,200,100" onclick="showMenu('menu2');" /> 
 <area shape="rect" coords="0,100,100,200" onclick="showMenu('menu3');" /> 
 <area shape="rect" coords="100,100,200,200" onclick="showMenu('menu4');" /> 

 </map> 
 </body> 
 </html>[/code]

@wbportJun 08.2017 — #Another resource is www.javascriptsource.com.

Also in #JavaScript _↴

[RESOLVED] Newbie - Code Help - Looping & Intervals Image preload help please!Invisible border in IE 6.0?

Success!

Help @lucass spread the word by sharing this article on Twitter...

Tweet This

Drop down menu and image map

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Drop down menu and image map

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴