Creating Rollover Images With Css Eliminate the need for Javascript

[clagnol1405241508 0]

I have seen it reported that 10% of Internet users have Javascript disabled. Whether for security concerns or to curtail annoyances like pop-up windows, it seriously limits your ability, as a web designer, to mold your website into something creative and novel.

 

This is where CSS rollovers come in. You know that effect you get when you roll the cursor over an image, and then the image changes? Traditionally, that effect has been accomplished by using Javascript to swap out images. I present here my own index page which has been made only with CSS and html. If you are unfamiliar with CSS, you may find this tutorial difficult to follow (and maybe even if you are familiar with it!).

 

If you look at the page, you will probably assume that I used 8 images. But in actuality, I used only this one image:

 

Let me explain. I placed an unordered list in the center of the page and specified the background-image property to point to the image I just showed you. Ostensibly, you could use any element that takes a class or id, rather than just a list, but the ul lends itself to this example. Importantly, I set the height of the ul block to cut off the bottom half of the background image. Here are my class specifications for the unordered list:

.circumcellion {[tab][/tab]background-image:  url(circumcellion.gif);[tab][/tab]height: 176px;[tab][/tab]width: 755px;[tab][/tab]padding: 0;[tab][/tab]margin: 0;[tab][/tab]position: relative;[tab][/tab]}[tab][/tab].circumcellion a {[tab][/tab]display: block;[tab][/tab]}.circumcellion li {[tab][/tab]list-style: none; position: absolute;[tab][/tab]}

All of the list items within the unordered list are made into links and given their own class. Using CSS, I specify the positions and sizes of the list items and their links, respectively, like so:

.journal {left: 0px; top: 0px;}.trip {left: 180px; top: 46px;}.money {left: 467px; top: 16px;}.contact {left: 687px; top: 16px;}.journal a {width: 123px; height: 166px;}.trip a {width: 238px; height: 86px;}.money a {width: 163px; height: 149px;}.contact a {width: 67px; height: 151px;}

As you may be aware, the CSS pseudo-class a:hover allows you to change attributes of a link when the cursor rolls over it. To add the rollover effect, I just have to call another instance of the same image. Using a:hover, you can pop up a background-image for the list item. So essentially, we are looking at a list item's background image in front of the list's background image. Understand?

 

The following code tells the browser to use the image as a background and specifies how many pixels up and left to shift the image:

.journal a:hover {background:  url(circumcellion.gif) 0px -176px no-repeat;}.trip a:hover {background:  url(circumcellion.gif) -180px -222px no-repeat;}.money a:hover {background:  url(circumcellion.gif) -467px -192px no-repeat;}.contact a:hover {background:  url(circumcellion.gif) -687px -192px no-repeat;}

And that's basically it. If I explained anything poorly, just ask for clarification. This is a complicated subject, and difficult to explain, so I would not be surprised if I left out something important. You can also look at my source code from the link above.

 

Also, I want to give credit to powderseekers.com, whose code I intently studied to figure this whole thing out, and thanks to the Xisto member who pointed out that CSS could be used thusly.

[EdgeXC 0]

I think I caught all of that. That's some really nifty stuff. I've been using CSS for about a year now and had no idea you could do that.I had tried to learn JavaScript, but dropped it after about a week because I didn't have time then. I had no idea that 10% of internet users have JavaScript turned off, that does kind of limit things.Well done, and the site and member that helped are great as well.

[mayank 2]

That is a nice good tutorial!These days I am learning Css..so I didnt understand the code much but I am trying hard to learn CSS and I am sure this can come handy in designing good websites. Well, Thanks for this nice tutorial..it is a great effect and good way of displaying your website.

[twitch 0]

I have recently used CSS rollover images (in list style) to achieve a similar effect.However, if you want to use more advanced things like onMouseDown images, then you're going to have to use JavaScript.

[iGuest 3]

Yes, I have seen similar coding using a two picture image for each button.I have not seen it done this way with the 8 part image, though. Interesting approach. Good job on the tutorial.

[Quatrux 4]

This is really great, I wanted to make this effect with css myself, but had some problems, so I stayed with the javascript, but there is another issue, the browsers with no css support or people who has it turned off for some reason also is a headache for web designers, there are browsers with no css support, but with some kind of javascript support. and wait a minute, does :hover work normally with IE ? I think only with anchors.. but I just checked your site and it works, both on Opera and IE.

[Kushika 0]

there are browsers with no css support, but with some kind of javascript support.

1064334960[/snapback]

CSS is used alot around the web.... I would think that the majority of people have a browser that enables CSS (correct me if I'm wrong).

 

Could you use both? In case one of them would be disables/non supported in the browser?

[iGuest 3]

I have seen it reported that 10% of Internet users have Javascript disabled. ...and thanks to the Xisto member who pointed out that CSS could be used thusly.

To be fair enogh, the use of CSS to produce rollover images is a good lesson to study. But the importance of Javascript, so far as web programming is concerned, can not be denied as Javascript helps us to make our webpages more interactive. Because Javascript helps us to detect an event such as ,when the user clicks on a link or button, submits a form, moves the mouse, or loads a page and even unloads a page, Javascript detects such events and helps us to add interactivity in the wbpages accordingly. That is why, modern days website browsing has become much more interesting. So as I think, use of CSS and Javascript will go side-by-side despite of certain disadvantages like unavailibility of 100% Browser support in both the cases. I have found a well to read Javascript tutorial in http://www.pageresource.com/. So, if anyone wants to know more about Javascript, please check out that link.

[Jeigh1405241495 0]

I've been toying around with different css stuff lately, might have to give that a try... personally I can't see it being useful for me but I can imagine alot of different ways it would be interesting, good stuff indeed. If I have any questions I'll harass you in a day or two lol.

[vujsa 0]

I'm a bit of a fan of the CSS image rollover effect. I guess in theory, you design your entire website using a single image.

I mean if you placed every graphic you needed in a single image and noted the coordinates for each item, it would work.

I created a push button effect with my CSS.
My Website: VW One

Feel free to take a look at the CSS file and image to get a better idea of how it works. If you don't know how to find this information, view the page source in your browser.

I like the feature becasue I don't have to keep track of as many images. It is a lot easier to code than JavaScript and it will work on all of my pages with just a link to the CSS file. I know that I can write a JavaScript file and link to it but I still find the CSS easier to use. I reserve JavaScript for things that CSS can't do.

I've not had any compatability issue with modern browsers other than IE being a pain to code for.

vujsa

[iGuest 3]

Wow thats an awsome tutorial! You could make some very intresting stuff with this tutorial.I'll go and have a go at this now...

[KDEWolf 0]

Really ingenious...I used to love Javascript and tables, but nowadays CSS is just king! Debugging JS code was really painful, with 'super' self-explanatory messages. Tables just added lots and lots of Kb to each page file size, and would break easily with a bigger image or word. Too bad I don't have the enough time to really master CSS.But is there any big advantage on having one huge image? Or is this just for ease of use and less files to care about? I suppose it could take the overall file size down, but multiple smaller images load faster due to various browser connections with the web server, don't they? Also, how does this behave with animated GIFs (hehehe animated gif buttons are really old school)? Whoa, so many questions. Time to stop. =p

[Josh-MOD 0]

Thanx for that tutorial. i really needed that. good job

[iGuest 3]

how to create hover imageCreating Rollover Images With Css

 Hi,

 

I'm having difficulties of finding out the right codes for creating hover in image. What I want to do is, I have a thumbnail image, then when I click on it, it will become a large image.Then when I click on the large image, it will go back to thumbnail. Please give me an example

 

Many Thanks!

-Angel