• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 588
  • Last Modified:

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
0
tia_kamakshi
Asked:
tia_kamakshi
1 Solution
 
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now