Rollover

[<M/>]

I created a rollover image link... and the links don't work... can someone tell me what I got wrong....?

my code:

CSS is down here

#F {
    position:absolute;
    width:96px;
    height:90px;
    z-index:1;
    background: url('facebook.png')
}
#F:hover {
    background-image: url('facebook_hover.png')
    }



#T {
    position: absolute;
    width: 96px;
    height: 90px;
    z-index:1;
    background: url('twitter.png');
    left: 132px;
    }
#T:hover {
    background-image: url('twitter_hover.png')
    }

#Gplus {
    position: absolute;
    width: 96px;
    height: 90px;
    z-index:1;
    background: url('g+.png');
    left: 132px;
    top: 300px;
    }
#Gplus:hover {
    background-image: url('g+_hover.png')
    }

HTML

<div id="F">
<a href='http://facebook.com/'></a>
</div>

<div id="T">
<a href='http://twitter.com/'></a>
</div>

<div id="Gplus">
<a href='http://google.com/'></a>
</div>

[hericles]

Is the path to the images correct in the CSS? As you have it now the images would need to be in the same directory as the CSS file. If you have your images in an images folder and your CSS files in another folder, both in the root directory your CSS would look like this:

background-image: url('../images/g+_hover.png');

[<M/>]

They are in 1 file and their directories are all correct

[hericles]

I see what is going on now. I assume you want the div to be clickable and move to the correct URL. But as you have your links now the link is inside the div and contains no text, making the clickable area very small. I would suggest not using background images and placing an image inside the link:

<a href="http://www.google.com">
  <img src="g+_hover.png" />
</a>

You could place the anchor around the div and still use background images but that technically isn't correct HTML so the page won't place validation if you care about that.

[JorgeM]

I agree with hericles suggestion. Using this approach, you can use the pseudo class :hover on the anchor links which would also cover your IE6 browsers. The hover on other elements causes issues with IE6. This may or may not be important to you, but just wanted to bring up this point since we all generally have to deal with IE.

[<M/>]

Alright you guys, I'll try out that method but I noticed that dreamweaver has a feature to make a rollover image link for you so I tried it... but it didn't work at all :/

[JorgeM]

While dreamweaver and some other IDEs are really good and help speed up development, my suggestion is that you build up some additional skills by learning HTML, CSS, and JavaScript without the use of these dev applications.

Your code will be cleaner, and you'll know exactly what's going on.

[<M/>]

I do have the skills the problem with me is that I am not a very good planner and organizer... so that's what affects me a lot.... But I do agree with you :)