Skip to main content

Create Image Swap Effect Using Css

The image swap effect is a very common thing for navigational purposes, it can make menus much easier on the eyes by highlighting the user’s pick. This helps to prevent misclicks, and looks nice as well. When you want to create an image swap effect, the standard procedure is usually to throw in an OnMouseOver event in JavaScript.

Unfortunately, there are disadvantages to this approach, like the fact that a large number of people have JavaScript disabled in their web browser for security purposes and same effect can be created using standard HTML and a neat trick using CSS.

Here’s is the trick of CSS. First you’ll create a division in your code with the div tag and give it a class. Inside of the division, you’ll place the image in standard image tags that will be used for when the mouse is not over the designated area. Next, you’ll add a background image to the division’s class using CSS, and this image will be the one that appears when the mouse is over the designated area.

Finally, you’ll add a piece of CSS that changes the display attribute to “block” for the anchor tags within the div class you created, as well as changing the display attribute to “hidden” for when the mouse hovers over anchors tags inside of that division class.
in practice it’s much easier to see.

Here is a sample piece of code that achieves this effect:

<div>
<a href="#">
<img src="logo.gif" width="187" height="136" alt="" />
</a>
</div>

And the CSS to go along with it:

div.nav
{
height: 187px;
width: 136px;
margin:0;
padding:0;
background-image:url("logo-red.gif");
}
div.nav a, div.nav a:link, div.nav a:visited {
display:block;
}
div.nav img
{
width:100%;
height:100%;
border:0;
}
div.nav a:hover img
{
visibility:hidden;
}
The way this works is that when you hover over the anchor image in the swap division, the CSS hides that piece of content so that only the background image of the division is seen. It’s a neat trick that a lot of people, even professional web site programmers, don’t know about.

As you might expect if you are familiar with web design, you’ll need to make an adjustment for users on Internet Explorer. The reason for the tweak for Internet Explorer is that this particular browser has problems storing background images in the cache. This results in a sort of random blue and red flashing when the mouse goes over the division image. Also with IE, you’ll need to make sure that you don’t have the “background-position” attribute set for this fix to work since that will bring back the flashing problem. Here is the fix, which can be put in with or without the conditional comments.

< !-- [if lte IE 6] >
<style type=”text/css”>
div.swap
{
background-repeat: no-repeat;
}
div.swap a:hover
{
visibility: visible;
}
</style>
<! [endif] -->

One disadvantage of this method is that it will greatly increase the size of your CSS file if you use it for a large set of menus, but this is minor since CSS files load very quickly as they are just simple text. It’s also not a problem for file sizes on the server since most people use some form of unlimited hosting.
Labels:

Comments

Post a Comment

Popular posts from this blog

Manipulating WW2 Fire AirCraft

In this tutorial we will be learning some indispensable techniques to use for any type of photo-manipulation. We will be doing this by taking a photograph of a model plane and editing it to to look like a photograph of a WW2 spitfire which has just been shot down and is on fire. The techniques used here are the same for any type of 'destruction' photo-manipulation. Below is the link you will learn how to create. In the second part of this tutorial we will go on to use this image in a movie poster/DVD cover design View Tutorial
Post a Comment
Read more

Beginner Html Lesson 2

In the previous lesson we just copy a code and paste it. In this lesson we will guide you through rest of the things what is that let's talk more. We made a webpage with something very weird for beginner don't worry go ahead. <html> : This is the essential thing for any web page and also closing tag </html>. Between these codes we add some more codes <head> </head> , <body> </body> between the body code actually body itself saying that i am body of your webpage. What Head tags containg (<head> </head>) ? Basically head tags contains following <title> <base> <link> <meta> <script> <styles>  What Body tags contains (<body> </body>) ? And a body tags contains anything like your bolded text , your content of any type.Paragraphs , Headings anything. I hope you understand.
Post a Comment
Read more

Simple Hit counter

A hit counter will let us know how many times a page is accessed. Incase one visitors loads the page several times, the hit counter willincrease several times (but this is likely to happen only a few times). The code for the hit counter bellow will save the number of hits in afile named counter.txt (the name of this file may be changed). Each time the page is loaded,the file will be read, the number will be increased by one and the newnumber will be saved to the same file. Counter.php <?php //The file where number of hits will be saved; name may be changed;p.e. "/counter_files/counter1.txt" $counterfile = " counter.txt "; // Opening the file; number of hit is stored in variable $hits $fp = fopen($counterfile,"r"); $hits = fgets($fp,100); fclose($fp); //increading number of hits $hits ++; //saving number of hits $fp = fopen($counterfile,"w"); fputs($fp, $hits ); fclose($fp); //printing  hits; you may remove next lin...
1 comment
Read more