1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

image map and css

Discussion in 'CSS' started by dotcom22, Mar 23, 2005.

  1. #1
    hi

    i try to make a image map with different links and show the reactive zone (shape, rectangle or circle) with color when is in rollover state. Using Dreamweaver is not possible to do so I have make a search onto the web and I dont find nothing about. The only thing I have find is a method for show different pict like explain here:
    SEMrush
    http://www.frankmanno.com/ideas/css-imagemap/

    ..but me i just need to get color on reactive zone and not to show pict in rollover. I have try to make some test but i get nothing good. Somebody have a solution?

    here a simple example of Map image code:

    <img src="image.jpg" width="196" height="169" border="0" usemap="#Map">
    <map name="Map">
    <area shape="poly" coords="55,72,97,36,144,55,117,129" href="link1">
    <area shape="circle" coords="41,131,34" href="link2">
    </map>

    thanks in advance...
     
    dotcom22, Mar 23, 2005 IP
    SEMrush
  2. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    64
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Very good link. This page quotes another link that I would like to mention for everybody who's reading this thread:

    http://evan.nixsys.bz/note/

    Back to the question. Area is not a visible element and will pretty much ignore the mouse (except changing mouse pointer). You can make it visible by adding

    area {display: block; background-color: #FFEEEE;}

    to your style sheet. It isn't really usable, though - there will be two clickable areas, one on the image and one below (or above). You can shift it with relative positioning, but it will still remain rectangular.

    If you don't want to use images, you can use just relatively-positioned div's or a combination of a relatively-positioned div and a few absolutely-positioned elements inside (same technique as described on the pages you quoted).

    Also, keep in mind that IE will apply the hover pseudo-class only to anchors, so you are pretty much bound to use rectangles (you can use a few of them to form a complex shape).

    J.D.
     
    J.D., Mar 23, 2005 IP
  3. Webnauts

    Webnauts Peon

    Messages:
    133
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0