

Ask HN: Learning Programming - HTML question on Image Maps - kamehameha

I recently started to learn the basics of programming and am currently in the middle of HTML. I was wondering if any of you could help me with my HTML problem -<p>I'm trying to create an image map where I link the word 'home' within a large banner image to home.htm and also include styling for the word when a mouse is hovered over it.<p>This is what I came up with so far -<p><pre><code>  &#60;div&#62;
        &#60;img usemap="home" src="images/banner.png"/&#62;
                &#60;MAP name="home"&#62;
		         &#60;AREA HREF="home.htm" SHAPE=RECT COORDS="118,410,185,390"&#62;
                &#60;/MAP&#62;</code></pre>
&#60;/div&#62;<p>The image is working perfectly in that the word 'home' within the large banner image is being hyperlinked to home. However, I'm having issues with the styling - I can't get the 'home' link to change color when I mouse over it. I tried using<p><pre><code>  STYLE="background-color: 222;"  
</code></pre>
within the map tag but it's not working.<p>A little help please?
======
mahmud
1) This is the wrong forum to ask such questions. Go to SitePoint, W3Schools
and similar.

2) Use a tool. <http://www.maschek.hu/imagemap/imgmap>

------
lhorie
The <map> and <area> tags can't be styled. You should either use javascript to
replace the src of the image onmouseover of the <area>, or, ideally, switch to
a <a> with CSS background-images

    
    
      <div style="background:url(banner.png)">
        <a id="homelink"
           href=""
           style="position:absolute;
                  top:10px;
                  left:10px;
                  height:100px;
                  width:100px;"></a>
      </div>
    

And the CSS:

    
    
      <style>
      #homelink {background:url(homelink.png)}
      #homelink:hover {background:url(homelink_hover.png)}
      </style>
    

Hope that makes sense.

PS: as other noted, there are other sites more suited to specific coding
questions (e.g. stackoverflow.com, experts-exchange.com, etc)

------
SwellJoe
This is probably not the right place to ask HTML questions. There are forums
devoted to web design which would be a better fit.

------
duskwuff
The MAP element isn't displayed. If you want to apply styling to components of
the image on hover, you'll need to slice it.

