styling an image map

  • I am using an image map to embed links within images. Here’s what I have 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 proper area within a large banner image is being hyperlinked to home. However, I’m trying to style the image map such that when a user mouses over the home link in the banner image, the ‘home’ changes color.

    I tried using STYLE="background-color: 222;" but it’s not working.

    Anybody know how I can style the link within an image map?

Viewing 1 replies (of 1 total)

  • Add a class to the DIV, such as:

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

    Style the class:

    .image-map a.hover{
    … your style here … (wihtout being tested, I’m thinking a backfround-image of the correct size)
    }

    That should get you pointed in the right direction.

Viewing 1 replies (of 1 total)
  • The topic ‘styling an image map’ is closed to new replies.