• 0

link with CSS and HTML


Question

Guys and girls, I recently started started learning some web design on my spare time, mostly at w3schools. I've come across a problem. what I want to do is to create a button link, but I want it to change appearance as the mouse hovers over it. I know how to do this with just text, but with images, i'm a bit clueless. This is what I have done so far:

HTML:

<a href="mainpage.htm" target="_blank"><img src="pic/button.png"></a>

CSS:

a:hover{background-image=a:hover{background-image:url(pic/hoverbutton.png)}

If you dont know what I mean, then go to threadless.com and look the "Join" button on the right. I have a feeling that I'm doing this completely wrong. Can anyone please tell how I can make an effect like that? Also, it would be helpful if someone can tell me how I can use a:link, a:visited, a:hover, and a:active with the id tag. Thanks!

EDIT: a better example is when you hover over the "Add Reply" button on this page.

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

I like to have a backround for the "a" when "Normal" and another backround when "hover".

Some people use images that change, I just use backgrounds.

For example:

the a value is:

&lt;a href="http://twitter.com/" class="social twitter"&gt;Twitter&lt;/a&gt;

and the CSS:

.social {
display: block;
overflow: hidden;
text-indent: -999px;
height: 60px;
float:left;
width: 150px;
}

.twitter {
background: url("images/twitter.png") no-repeat 0 0;
}

.twitter:hover {
background: url("images/twitter_hover.png") no-repeat 0 0;
}

I took this code (just modified it a bit) from a project I'm currently working on...

Link to comment
Share on other sites

  • 0

PT13, what is all that? I just started learning this stuff on Sunday, I'm not there yet! :wacko:

LOL sorry :p

the ".social" basically gives a height and width (of your image) to the "a" and hides the text.

the ".twitter" is the image you want to be seen when people are not hovering

the ".twitter:hover" is the image you wany to be seen seen when people ARE HOVERING the image :D

I hope that can help you a bit :|

Link to comment
Share on other sites

  • 0

+PT 13, you could always simplify it for yourself. Rather than use two images, you should just create a sprite for it.

.twitter {
background: url('images/social-sprite.png') no-repeat 0 0;
}

.twitter:hover {
background: url('images/social-sprite.png') no-repeat 0 -16px;
}

Where social sprite has all regular states going vertically and under them is another row of the hover states. What you're doing is just telling the background position to go -16px (just basing it off of normal pixels for icons).

http://css-tricks.com/css-sprites/ -- That goes in depth and has visual examples. Way better than having a plethora of images for both states.

Link to comment
Share on other sites

  • 0

+PT 13, you could always simplify it for yourself. Rather than use two images, you should just create a sprite for it.

.twitter {
background: url('images/social-sprite.png') no-repeat 0 0;
}

.twitter:hover {
background: url('images/social-sprite.png') no-repeat 0 -16px;
}

Where social sprite has all regular states going vertically and under them is another row of the hover states. What you're doing is just telling the background position to go -16px (just basing it off of normal pixels for icons).

http://css-tricks.com/css-sprites/ -- That goes in depth and has visual examples. Way better than having a plethora of images for both states.

Ahah yes I know :D

I did that in my project (that's exactly why I said I had modified the code a bit), but I tried to simplify it to explain to skiiper :p

Btw gotta love CSS Sprites!

Link to comment
Share on other sites

  • 0

Mozilla also have a "image-rect()" extension that allows you to clip out the select bits of the image you want. I think it behaves much better with background-size and such (which should apply to the whole image, not just the part containing the sprite)

Neither of these options work well with SVG images I think, but a nicer way in that regard is fragment identifiers.

Link to comment
Share on other sites

  • 0

I think you guys are kinda throwing him into the deep end, but kudos for introducing him to the latest and greatest features. :p

Link to comment
Share on other sites

This topic is now closed to further replies.