Oke, this is my second tutorial today. I was always pleased with CSS and (X)HTML. You can achieve lot if effect with just a few lines of code. What will I present you here is hover effect of hyperlink.

So what we will do here. We have two images that are a like, only difference is color of icon.





We want to have first image (link.jpg) to be shown will idle, but when we go with mouse over the link we want to have second image to be shown (over.jpg). Images are 16*16px.

Ok let's start with CSS. First we will format body.



No fuss here. Margin set to 0, padding to 20px so that we have better representation of our link. Background of body is set to background of "link" and "over" jpegs, which is white (#FFFFFF).

Ok, let take a look at next image, where will be shown our result of this tutorial and explanation of padding in p.class »Link«.



We see that p.class »Link« has left padding set to 20px, so that text is moved 20px more to the right side that it won't interact with hover effect images (link and over jpegs).

Code for this action is next:



Font size set to 12px and spacing to 16px, which is same height as our hover effect images, padding-left set to 20px, so width of hover effect images is also 16px which leaves us with 4px of space infront of hyperlink text. Text is justified.

Next code will define idle state of hyperlink:



We have defined padding of hyperlink, text decoration, which can be none (no underline) or underline (underlined). We have also defined background image for hyperlink, which is link.jpg (idle state). Image is aligned to left and centered.

Next code will define hover effect:



In this section we have defined hover effect, everything stays same only thing that will change is changing from link.jpg to over.jpg when going over the hyperlink with a mouse (hover).

So whole CSS file should look like this:



Not a big one for such a nice hover effect

Next thing we will do is HTML file which will be linked to layout1.css file. You can change the name of this file to personal needs, but remember that you must also change link in HTML file which is:



So this is HTML file:



Let me explain this code:



In CSS file we have defined p.link class. defines p.link class,link to some other file and text that will be displayed in browser.

Working example is located here.

CSS file is located here.

Critics, suggestions or anything else is welcome as always.

Robert

 

 

 

Reply

Good tutorial!

Thanks

Reply

its ok but i don't use the image hovering anymore it more out of date for those that be doing it for awhile but could be useful for the beginning web designers.

Reply

Nice tutorial, it was very straighforward and simple, excellant work!

Reply

Thanx to everyone. I really like CSS and XHTML. So much better then Javascript with DHTML. It loads fast and it small code. If you have high speed server and high speed internet connection you would even notice there was loading of 0.5kB image, but if you use preloader then everything is fine. Display:None can solve problem for some browser, not sure it would do for Opera and IE5. need to find some good preloader script.

Reply

You actually don't have to worry about preloading if you put both states of your image into one file.
Then simply do something like this:


where the -10px equates to roughly half the height of your image (in this case the images are stacked on top of each other but you could have them side by side and reposition them horizontally). So what you're doing is when you roll over the link, you're pushing the off state out of the way and replacing it with the over state.


Um, yeah, whatever you reckon mate.
I think you'll find experienced web designers use the sort of technique rvovk has posted all the time.

 

 

 

Reply

Tyssen, I didn't understand that a bit. About preloading. But I believe you know this drill better then me. If you are so kind maybe you could explain this in more detailed way. Thanx.

I don't like blinking websites, but hover effects are really nice thing to have on your site. Everything comes up rather fancy than dull. It is all matter of taste actually.

Reply

This article does a much better job of explaining it than I did above.

Reply

I have just realised who is Tyssen on CSS forum Venture, hehe. Thanx for article, I will sure read it out. Now it is time to go sleep.

Reply

I like the final outcome. I might consider using this on my website. Thanks for posting this awesome tutorial =D

Reply