Our sister article, entitled creating proper mouse-over borders explains how to add a clean border around an image link on hover, without the all-too-common and undesirable “jump” effect. In this article, we will explain in detail how to apply a border INSIDE an image itself, for those situations where an image may be displayed up against another element, or where a hidden margin would not be appropriate. Before we get started we should warn you that this technique is not (at this time) IE 5.5 friendly, but does work in Internet Explorer 6, 7, Firefox and Safari just fine. On to the code!

First, we will create the div to encase our image link. In contrast to our original mouse-over borders article, this one will not include the image within the div (we’ll explain this in just a moment). We will continue using the image of our furry friend for this article, and here’s the code we’ll start with: <div class="catwidth"><a href="#"></a></div>

Now, instead of adding the image directly into our div, we will need to define this image in the background of the div that we are using. If you are only planning on using this code in one place, you can simply use this css to do it:.catwidth a{width:130px;height:130px;border:0; background-image:url(images/cat.jpg);display:block;}
.catwidth a:hover {border:3px solid #5f9215;
width:124px;height:124px;background-position:center;}What we have done here is told the browser that we have a 130 pixel image link, but on mouseover we would like it to remove three pixels on each side (to 124 pixels), replacing it with a three pixel border. Now, the way we get around the image jumping and becoming displaced is by adding background-position:center, which orders the browser to maintain the same position for the image, even if it has been clipped on all edges by three pixels. Make sense?

Here is our end result:

This is great for one image, but let’s say that you have three different places on a page that you would like to apply the same effect to. You could create three distinct classes, but a much easier method (if all three images are the same size) would be to simply change your div code to look like this:<div class="catwidth" style="background-image:url(images/second-image.gif);" ><a href="#"></a></div>

This will override the image defined within your stylesheet, and render second-image.gif in its place. As we mentioned, this will only work if the images are all the same size. This is because, while we can define width and height just fine within the style variable of our div, we can’t define what will happen on mouseover. So, we could add an image at twice that size and declare as such in our div, but as soon as the image is moused over it would go back to what is defined within the stylesheet.

Compatibility:
This method has been tested in and is compatible with Internet Explorer 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac). Note that at the present time, IE 5.5 is not supported.

That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!

Recently, we have noticed a number of prominent web sites that suffer from an all-too-common problem: jumping or displaced mouse-over effects. For an example of what we’re talking about, run your mouse over this image:

What’s happening here is that a border (in this case a solid, 3 pixel border) has been applied to this image on mouseover, but has not been applied (and also not accounted for) before the mouseover.

Simply put, the problem is that when a visitor runs their mouse over the image, it not only adds the border, it also shifts the content around it in a jerking motion.

Note: The code above has been modified to be Internet Explorer 6 compliant. IE 6 has trouble properly assigning a border around a linked image tag without a sort of “call to action,” something that compels the browser to change the border option. Luckily for us, the first option we’ve outlined below not only fixes the image “jumping” issue, it also forces Internet Explorer 6 to do what it should. Our second option (below) accomplishes this with the addition of one short line of code.

Fix #1: Create an “invisible” image border

There are a couple of easy ways to fix this, depending on how your site is designed. If you have a site with a solid content background color (like ours), you can simply add a border with the same color code as your content background to the standard image link, like this:

The code we used to fix the problem is here:.catfixed a img{border:3px solid #fffaef /*this is the background color of our site*/;}
.catfixed a:hover img{border:3px solid #5f9215 /*our desired mouseover color*/;}Obviously, you can remove our notations before using it on your web site.

Fix #2: Creative use of margins

The first fix works fine if your site has a consistent background color, but what happens if your site has a background fade, or you want to apply the same style to items in different locations (with different colored backgrounds)? Instead of making multiple classes to accommodate each area, or resigning yourself to having a “jump” each time a visitor mouses over the affected item, we can simply replace our standard border with a margin instead, like this:.catmargin a img{margin:3px;border:0;}
.catmargin a:hover img{border:3px solid #5f9215; margin:0;}
.catmargin a:hover{margin:0; /*fixes IE 6*/}Don’t forget to zero out your margin on the image hover, or you will end up with the same jump that’s shown at the top of this article. Take a look at how this turns out, this time applied within a box that holds a background gradient.

Notice how the area around the image is still transparent, but there is no jump when the visitor mouses over the image.

Compare this to the first method under the same circumstances and you will see what we’re talking about here. To make the effect more obvious, we changed the initial, “invisible” border to a dark red:

Taking it further.

Now, there are ways to get a little more creative here, such as what CSS Design Yorkshire has done with the image links on their home page. In this case, the image jumps 1 pixel to the right and bottom, while keeping the content to the left and right intact. That last part is key, because it keeps what should be in focus emphasized, not the content that falls outside of the hover area. The text immediately below the image link jumps by 1 pixel as well, which serves as a light accent and an effective way to draw attention. The white-to-orange color choice also works well in this situation. Note that on this particular web site, the effect is not apparent in IE 6.

The point is, were this site to simply assign a border to the image on hover, the content all around the image would jump, making the site look unprofessional. But they took the time to do it right, and having a controlled, slight “bounce” as in this example adds emphasis to the item.

If you are interested in creating a mouseover image that has an inline border (one that does not increase the overall width or height of the image area), take a look at our sister article entitled creating an inline css image border.

Compatibility:
Both methods have been tested in and are compatible with Internet Explorer 5.5 and 6 (see above), 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!

This is a highly requested feature, and one that people often have a lot of trouble with. Before we go any further, Internet Explorer 5.5 and 6 are not compatible with this method, BUT we do have a simple and clean way of degrading for these browsers so that no one is the wiser.

Step 1: Creating the fades.

Depending on the width of your web site, the colors you have chosen and how profound you want your shadow to be, you may need to create your own shadows in Photoshop (for instructions on how to do this, visit our sister article entitled creating a clean png site shadow in photoshop). In this case, I have created a standard, 760 pixel shadow that should work out of the box on any similarly formatted web site or page.

Step 2: Creating the CSS

First, let’s cover what you’ll need to add into your stylesheet:
#shadow {width:784px; background: url(images/middle-shadow.png) repeat-y;margin:0 auto;}
#shadowtop{margin:0 auto;height:12px;width:784px;background: url(images/top-shadow.png) no-repeat;}
#shadowbottom{margin:0 auto;height:12px;width:784px;background: url(images/bottom-shadow.png) no-repeat;}And here’s where the Internet Explorer 6 fix comes in to play. You will need to create a new stylesheet named ie.css (or whatever you want, just be sure to modify the code below if you change the name), and add this code into it:
#shadow{background-image:none;}
#shadowtop{background-image:none;}
#shadowbottom{background-image:none;}Next, add this into the HEAD area of your web site (making sure that it’s placed below your standard stylesheet):
<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->This will tell Internet Explorer 6 (and below) to ignore the shadow effect. To learn more about what this code snippet is actually doing, check out our article entitled how to create IE specific stylesheets. If you have a solid background color, you can substitute the png files with gifs (with the proper background color embedded) in your original stylesheet, and bypass this step altogether. You can also try one of the many javascript solutions out there, designed to force compatibility between IE 6 and png transparency.

Step 3: Applying the code:

Now to pull it all together. In most circumstances, it’s as easy as adding this to the header:
<div id="shadowtop"></div>Next, add the main shadow DIV to the site, so that it encases the entirety of the design. You can do this just by adding: <div id="shadow">just before your “content” or “wrap” DIV (whichever DIV defines the width and location of your site), and closing this at the end of the page, just after your site footer.

Finally, add this code to the very bottom of your site, below the ending DIV you created for your main site shadow:
<div id="shadowbottom"></div>

Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5 and 6 (bypasses fade technique), 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!

Most of us have at one time or another have had to (or tried unsuccessfully to) alternate an image on mouse over. Most commonly, this is effect is used to provide a response when a visitor runs their mouse over a button, like the one below:

Now, this was very easy to create, using just the following CSS:
.buttonexample{background-image: url(images/button.gif); width:91px; height:28px;}
.buttonexample:hover{background-image: url(images/button-over.gif);}and the following html:
<div class="buttonexample"></div>

If you are just hoping to make a standard image change on mouseover, without having that image link to anything, then you are almost done. To prevent the hover image from “flashing” before loading, simply follow the steps listed on our sister article: A quick look: preloading images with css.

If, however you would like to have a mouseover effect on a linked image, it’s just a little bit more complex. In addition to the code above, we will add one more line to make this:
.buttonexample{background-image: url(images/button.gif); width:91px; height:28px;}
.buttonexample:hover{background-image: url(images/button-over.gif);}
.buttonexample a{display:block;width:91px;height:28px;}and the following html:
<div class="buttonexample"><a href="#"></a></div>

This is the simplest method, but is not compatible with IE 5.5/6. This is because IE 5.5 and 6 do not recognize the “hover” attribute when applied directly to a DIV. To make this button compatible, we’ll just need to define the same variables as we did on the standard div, but for the “a” tag, like this:
.buttonexample a{background-image: url(images/button.gif); display:block;width:91px;height:28px;}
.buttonexample a:hover{background-image: url(images/button-over.gif);

Now, we have this link. Remember to change the width and height of this link to correspond with the size of your image.

Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5 and 6 (see above), 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!

If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!

Let’s say that you have a large image (or several large images) on a particular page, and you want to let visitors know that the image is loading. You could use a piece of javascript to embed a “loading” image for all images that have not yet loaded, but unless you are loading a ton of very large images on a single page, we have a much simpler (and cleaner) method to accomplish the same thing.

Step 1: Find a preload image.

There are many fantastic sites out there that will allow you to create your own preload images. Our favorite is here. Just remember not to choose an icon that is too large (file size), or it may not load until after the larger image has loaded. Here is the one that we have created:

Step 2: Create the CSS

There is just a little bit of code to create here, and it can be pasted directly into your stylesheet. Just be sure to replace the “youricon.gif” text with your image name.

Code to paste into your stylesheet:
.load{background:url('images/youricon.gif') no-repeat center;}

Step 3: Applying the code
There are a couple of ways to do this, but this is probably the best solution (depending on your application). Simply encase the image you are interested in loading within a “load” div, and apply the width and height of your image to the div.

Example:
<div class="load" style="width:200px;height:200px">
<img src="large.jpg" alt="alternate text" /></div>

Here it is applied to an image:
You will likely need to clear your cache and reload this page to see the loading icon appear. A more thorough example of this loading icon in action can be found here.

As mentioned by contributor Lim Chee Aun below, you could also bypass the div and apply the .load class directly to the image itself, and here’s how you can do it:
<img src="large.jpg" alt="alternate text" class="load" style="width:200px;height:200px" /></div>The reason we hadn’t mentioned this idea initially, is if the image does not load it can break the look of the design. If you are absolutely positive you will not have any loading issues, you don’t care if the image needs to be centered (while validating xhtml strict), or if you are applying the class to multiple images, this may be a cleaner solution for you. See our updated example page below for examples of the method created both ways.

If this solution doesn’t fix the problem for you application, let us know what you are doing differently and we’ll be happy to go into more detail.

Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!

If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!

Now excuse me for pulling up an old chestnut, but this is one that comes up often for people who are just starting out with CSS and want to avoid the extensive javascript output by many website design applications such as Dreamweaver and the dreaded Front Page. This method only requires a very minor understanding of CSS, cleans up your markup and achieves the desired effect.

Step 1: Creating the CSS.

First, let’s start with the CSS we’ll need. This step is very simple, as there is only one line that you will need to add to your stylesheet. Decide what name you would like to use for your preload. In this case we have gone with the creative Class name “preload.” If this is fine for you, simply paste this code into your stylesheet. Otherwise, change the Class to another name you are more comfortable with, bearing in mind you will need to do this on the final code as well. I’ll cover why we chose to use a Class instead of an ID in just a minute.

Code to paste into your stylesheet:
.preload{display:none;}

Step 2: Creating the DIV.

Next, we’ll create the actual DIV that will contain the images you want to preload. If you are using a site that you created yourself, this can go in the footer area of your page, as this will ensure that the main portion of the site loads before your preloaded images. If you want this preload active on every page of your site, make sure to either A. Copy the code to each page of your site, or B. (Preferred) include a footer.txt file that will contain this preload on every page of your site. That way, if you need to add or remove an item, you can do it in one place instead of on every page. If you are using a site that has a WYSIWYG editor and you only want the preload on one page (or want to add different images for preload on each page), you can do this by clicking on the “view code” or “view source” button in the editor and entering the code at the bottom of the editor. The reason we chose to use a Class rather than an ID is because this will grant you the most flexibility to add more than one set of preloads to a site. Say you have a web site with database-driven content. You have a set of preload images in the footer that is outputted automatically on every page, but one particular page also needs a few more preloaded images. You can accomplish this simply by adding those few images into the WYSIWYG editor as described above, without having to worry about having two DIV’s with the same ID on a particular page.

Code to modify/paste into your web site:
<div class="preload">
<img src="images/dog-over.gif" alt="Dog" />
<img src="images/cat-over.gif" alt="Cat" />
<img src="images/mouse-over.gif" alt="Mouse" />
</div>Remember to add an alternate tag to each image!

Step 3: Testing.
Try it out! For our example, we created two different sets of images. One has a CSS preload, while one does not. Run your mouse over each, see the difference? The preloaded image loads immediately, while the non-preloaded image flashes before loading. Note that once you have moused over the non-preload image once, you will need to refresh the page to see it flash again.

WITH Preload

Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC, Linux and Mac), Netscape and Safari (PC and Mac).

That’s all folks!

If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!