Style to display image in area tag

Hi Experts,

In Html5, below is the code which should display image called "menu02.png"

Please help me with css style which should display below image.


<section role="parallax" class="parallax cf">                          
       <map name="home_menu">        
           <area class="selected" shape="poly" coords="140,0,0,105,85,105,225,0" href="#supplier" alt="SUPPLIER">        
           <area shape="poly" coords="227,0,87,105,172,105,312,0" href="#service" alt="FULL SERVICE CARRIER">        
           <area shape="poly" coords="314,0,174,105,259,105,399,0" href="#new_generation" alt="NEW GENERATION AIRLINE">        
           <area shape="poly" coords="401,0,261,105,346,105,486,0" href="#air_freight" alt="AIR FREIGHT CARRIER">        
           <area shape="poly" coords="488,0,348,105,433,105,573,0" href="#charter" alt="CHARTER AIRLINE">        
           <area shape="poly" coords="575,0,435,105,520,105,660,0" href="#cargo" alt="CARGO & LOGISTICS COMPANY">        
           <area shape="poly" coords="662,0,522,105,607,105,747,0" href="#hotel" alt="HOTEL GROUP">        
           <area shape="poly" coords="749,0,609,105,694,105,834,0" href="#events" alt="EVENTS ORGANISER">    
       </map>
   </section>
   
   
Thanks
tia_kamakshiAsked:
Who is Participating?
 
g3nu1n3Commented:
Unfortunately I am not very clear on what you want to accomplish but I believe I may understand you and the issue is that you do not have an image here for your area map to map to. For instance (courtesy of http://www.w3schools.com/html5/tag_area.asp) :
<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>

Open in new window


You see here that the img tag says 'usemap' and references the map below it; planetmap. You will need to either add the img tag and then setup the styling on that img tag to be of the right width/height and pull in your menu image or you can just create normal img tag and set the map to your home_menu area map. Hope this helps.
0
 
David S.Commented:
Don't make up new values for the role attribute. You should use one of the roles defined here, if there is one appropriate for that element. In this case, "navigation" is very appropriate.

   <nav role="navigation" class="parallax cf">
       <img src="menu02.png" alt="" usemap="home_menu">
       <map name="home_menu">
           <area class="selected" shape="poly" coords="140,0,0,105,85,105,225,0" href="#supplier" alt="SUPPLIER">
           <area shape="poly" coords="227,0,87,105,172,105,312,0" href="#service" alt="FULL SERVICE CARRIER">
           <area shape="poly" coords="314,0,174,105,259,105,399,0" href="#new_generation" alt="NEW GENERATION AIRLINE">
           <area shape="poly" coords="401,0,261,105,346,105,486,0" href="#air_freight" alt="AIR FREIGHT CARRIER">
           <area shape="poly" coords="488,0,348,105,433,105,573,0" href="#charter" alt="CHARTER AIRLINE">
           <area shape="poly" coords="575,0,435,105,520,105,660,0" href="#cargo" alt="CARGO &amp; LOGISTICS COMPANY">
           <area shape="poly" coords="662,0,522,105,607,105,747,0" href="#hotel" alt="HOTEL GROUP">
           <area shape="poly" coords="749,0,609,105,694,105,834,0" href="#events" alt="EVENTS ORGANISER">
       </map>
   </nav>

Open in new window

P.S. For the record, I do not recommend the use of traditional image maps for primary navigation menus.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.