Mouse Over Effect Without JavaScript

JavaScript and Mobile Browsers

As we move more and more to a world of mobile browsers there is one area where the hand held devices have an Achilles heel.

None of the browsers to date can display JavaScript; this means no flash, no cute mouse rollovers, etc.

This past week I was asked by a client to create a mouse over effect for a graphic on his site that took the user to the IDX solution.

I found several different tutorials on how to do this with CSS.   Some were complicated and took a lot of code to implement.   Others for one reason or another simply didn’t work.   Syntax is everything.   You teacher might let you skip a comma but code is a task master.

Personally, I’ve not had a need for this effect.   Like I said in “Bling on a Blog” if it moves I typically don’t like it.   But this might be the one exception.   (Along with the lightbox effect for making images large for viewing)

Since I took the time to do this I figured I might as well share you the rest of you Lab Rats how it is done, in a simple CSS way.   (Actually I’m writing this down so when I forget how to do it I can refer back to this post.)

One Size Does Not Fit All

This is an image by image, or I should say (div by div) solution.   There is no one size fits all images solution.   You create a special class in the style.php for the specific image you want to have this effect then apply the class to the image when you use it on your site.

The effect is accomplished using a large image which contain both the “at rest” and “hover” image to be displayed.

Image Side by Side

#MouseOver a {

text-decoration : none;

display:block; height:163px; width:180px; overflow:hidden;

}

#MouseOver a:hover {

text-decoration : none;

display:block; text-indent:-180px;

}

Once this code is added to your CSS you can wrap the image in a div tag.

<div id=”MouseOver”>align=”center” <a href=”http://www.realestatebloglab.com/wp-content/uploads/2009/04/mouserollover.jpg”><img   title=”mouse rollover” src=”http://www.realestatebloglab.com/wp-content/uploads/2009/04/mouserollover.jpg” alt=”Image Side by Side”   /></a></div>

This will put the style around the image and create the rollover effect.

So if you are geeking around this weekend wondering what to do with your time (I’m sure that’s always a concern). You can play with CSS Mouse Rollover Animation.   Have Fun.