Anonymous 0

Hi,

I'm trying to build an image map using only css.

I want to be able and place a link on the 'map' then when someone hovers over it, it'll display an image - but I only want the image to appear when they're hovering over the link.

Here is my css:

    #volleyball {
    background-color: #FFFFFF;
    left: 10px;
    position: relative;
    top: 10px;
    width: 135px;
}

#volleyball a .large {
    border: 0px;
    display: block;
    height: 1px;
    left: -1px;
    position: absolute;
    top: -1px;
    width: 1px;
}

#volleyball a img {
    border: 0;
}

#volleyball a.p1, #volleyball a.p1:visited {
    background: #FFFFFF;
    border: 1px solid #000000;
    display: block;
    height: 90px;
    left: 0;
    text-decoration: none;
    top: 0;
    width: 135px;
}

#volleyball a.p1:hover {
    background-color: #8C97A3;
    color: #000000;
    text-decoration: none;
}

#volleyball a.p1:hover .large {
    border: 1px solid #000000;
    display: block;
    height: 233px;
    left: 150px;
    position: absolute;
    top: -60px;
    width: 300px;
}


#map {
    margin:0;
    padding:0;
    width:585px;
    height:388px;
    background:url(map.jpg) top left no-repeat;
    font-family:arial, helvetica, sans-serif;
    font-size:8pt;}

I cant seem to add my html properly here, sorry ...

Seems like an awful lot of css doesn't it?!

Thank you ~

2 answers

Jordan 469
1
point

Check out this page Pure CSS Image Hover

Answered about 7 years ago by Jordan
0
points

Hi, sorry for not clarifying ...

I'm actually looking for something like this (http://marketingtechblog.com/programming/css-image-map/) though I would remove the visibility hidden because I want the link name to show and I would like for an image to display when I hover over it.

Do you know how I could edit the code to make this work?

Thank you ~

Answered about 7 years ago by Jennifer