myspaceprodesigns.com

rollovers and hovers

I am writing this tutorial to help everyone understand hover codes. We will first cover the basics, then we'll look at image hovers (or image rollovers) and CSS pop-ups.

If you would like to get some hands on experience with this, you will need to use Firefox with the Web Developer Toolbar. If you haven't downloaded them yet, click the links and download. You'll love it, and this tutorial will give you the opportunity to test your own ideas and play with the links that are already here.

Anyway, so the basics for hovers are that we first need to create a link class. If you've read through the div tutorial or the tutorial on style sheets you will recall that we do this by placing something like this in our style sheet:

We then assign the class to our links like this:

The reason we separated the link, active, and visited from the hover is because we want our link to behave differently on hover. You can use whatever properties you like. You can change borders, font-family, font-size, position, etc. Basically, any CSS property applies. On this page, for example, most of the links change background-color and color on hover. You can see this by hovering over any of the links in the menu on the left.

The way I did this is by using the following method:

That's what went into the style sheet, then I simply assigned a class to the link this:

Now, lets try out some examples. If you have downloaded Firefox with the Web Developer Toolbar, please open up your CSS Editor. Use CTRL + Shift + E as a shortcut to open it. Now, click the tab that says "Embedded Styles" and you will see the CSS that we will are using for our examples.

basic link hover

Let's start out easy by examining the link below. In your CSS Editor find the "uday1" class. This is a class="uday1":

MySpaceProDesigns.com

Notice in your CSS Editor that I have told your browser to switch colors of this link on hover. We are simply changing this link from white to red on hover. This is a very simple link. Feel free to play with the colors or start adding your own properties to see what they do.

This is a class="uday2":

MySpaceProDesigns.com

We added a few new properties to this one. Notice in the CSS that we defined a width and height for this link and we used the property display:block;. What this does is it tells our browser that we want the entire area to take on this background color and not just the area behind the text. This is important especially if you are changing font size because you probably wouldn't want the background color area changing with the size of text. This is basically the same as the uday1 class with some new properties added to it. Again, you can adjust anything you like in the CSS Editor and the way that this link displays on this page will also change (which is a great feature of the Web Developer Toolbar). So play with this a little bit until you understand how to adjust properties.

css image rollover

So now that you've got that down, check out this next link:

So how did I do that? Well, pretty simple really, here's the code we used:

This is our rollover class, which you can find in the CSS editor and is comprised of two individual pictures. This is the first one which is the background-image for the non-hover part:

Here is the second one for the hovers:

It's pretty simple. Just define width and height of the area and use a different background image for each. Also note that I made the width and height 72 X 72 because that was the size of the image and I used the display:block; property again to force the browser to make the entire area linkable and hold the dimensions.

If I made it any larger, then the image would have repeated unless I told it not to and if I made it any smaller, then the full image would not have appeared. Notice how I didn't want any text over the image so I used a <BR> between my link tags. Another important note for you to know is that image hovers only work in IE if you define a background properties for the hover and non-hover sections. Another method of doing this is using the background-position property and only making one image. You can put move the position of your image on hover, making it do the same thing.

css popup

Now we are going to add a pop-up to a hover. Just for fun, let's add the pop-up to the rollover we already created. In your CSS Editor, check out the popup class. Notice that the properties for the links are exactly the same as the rollover class. Also notice that we added a few things. One of the things we added says a.popup span {display:none;}. This is telling our browser to not display linked spans. The span is the popup.

The other part says a.popup:hover span {properties:values;}. This is telling our browser what properties the span will have on hover. We put another background image in this one because we want it to display an image when hovered and we are going to put some text on this span. We also used display:block; again. In addition, note the left: top: position: values. We are telling our browser to position the popup XXXpx from the top left corner of the link. Here is what this will accomplish:

Rollover Span

Here is the code we use on the link:

You can change the words "Rollover Span" to say whatever you like or you can put an image between the span tags if you want an image to appear. You can replace the <BR> with text or an image if you want the popup to appear when hovered over text or another image. You can also mix and match images with text for other interesting pop-up affects or use some child divs within the span for even further complication, which I won't show you, but hope you'll play with.

If you're feeling up to it, you can use this page to test any hover ideas you might have. You can test out image hovers by just changing the image URL's in the CSS Editor or test out other hovers by changing properties in the uday1 and uday2 classes. You can test your image rollovers by changing properties or images in the rollover classes, and you can test out your popups by adjusting those properties.

Comments

View Comments (25) •  Leave Comment  •  Support Forum

contact

© 2006-2018 myspaceprodesigns.com | all rights reserved | development and hosting by d web designs

valid css-3 | valid xhtml 1.1 | valid wcag 2.0 l3 | valid section 508 | irca label | perfect seo! | 46256 members | 82 users online