HN Explorer

Ask HN: Learning Programming - HTML question on Image Maps

3 points by kamehameha ↗ HN
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 -

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.

This is what I came up with so far -

  <div>
        <img usemap="home" src="images/banner.png"/>
                <MAP name="home">
		         <AREA HREF="home.htm" SHAPE=RECT COORDS="118,410,185,390">
                </MAP>
</div>

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

  STYLE="background-color: 222;"
within the map tag but it's not working.

A little help please?

4 comments

[ 2.5 ms ] story [ 20.8 ms ] thread
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.
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)