rvovk 0 Report post Posted August 1, 2005 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. body{ margin:0; padding:20px; text-align:justify; background:#FFFFFF;} 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: p.link{ font: 12px/16px verdana, arial; color: #797983; margin:0px; padding:0px 0px 0px 20px; text-align:justify;} 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: p.link a{ padding:0 0 0 20px; color: #797983; text-decoration:underline; background:url(link.jpg) center left no-repeat; } 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: p.link a:hover{ color: #797983; text-decoration:underline; background:url(over.jpg) center left no-repeat; } 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: body{ margin:0; padding:20px; text-align:justify; background:#FFFFFF;} p.link{ font: 12px/16px verdana, arial; color: #797983; margin:0px; padding:0px 0px 0px 20px; text-align:justify;} p.link a{ padding:0 0 0 20px; color: #797983; text-decoration:underline; background:url(link.jpg) center left no-repeat; } p.link a:hover{ color: #797983; text-decoration:underline; background:url(over.jpg) center left no-repeat; } 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: <style type="text/css" media="all">@import "layout1.css";</style> So this is HTML file: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;<html><head> <title>Hover effects</title><meta http-equiv="content-type" content="text/html;charset=windows-1250"/> <style type="text/css" media="all">@import "layout1.css";</style></head><body><p class="link"><a href="#" title="">Hyperlink</a></p></body></html> Let me explain this code: <p class="link"><a href="#" title="">Hyperlink</a></p> In CSS file we have defined p.link class. <p class="link">defines p.link class,href="#"link to some other file and Hyperlinktext 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 Share this post Link to post Share on other sites
Sprnknwn 0 Report post Posted August 1, 2005 Good tutorial! Thanks Share this post Link to post Share on other sites
Saint_Michael 3 Report post Posted August 1, 2005 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. Share this post Link to post Share on other sites
Dynomite 0 Report post Posted August 1, 2005 Nice tutorial, it was very straighforward and simple, excellant work! Share this post Link to post Share on other sites
rvovk 0 Report post Posted August 2, 2005 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. Share this post Link to post Share on other sites
Tyssen 0 Report post Posted August 2, 2005 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. 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: a:hover { background:url(image.jpg) 0 -10px no-repeat; }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. 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 designersUm, yeah, whatever you reckon mate. I think you'll find experienced web designers use the sort of technique rvovk has posted all the time. Share this post Link to post Share on other sites
rvovk 0 Report post Posted August 2, 2005 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. Share this post Link to post Share on other sites
Tyssen 0 Report post Posted August 2, 2005 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. This article does a much better job of explaining it than I did above. Share this post Link to post Share on other sites
rvovk 0 Report post Posted August 2, 2005 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. Share this post Link to post Share on other sites
Adamrosso 0 Report post Posted August 8, 2005 I like the final outcome. I might consider using this on my website. Thanks for posting this awesome tutorial =D Share this post Link to post Share on other sites
