When visitor roll mouse pointer over a image, s/he will see a different image, when s/he moves mouse pointer out of the image focus, s/he will see the previous image. This is called RollOver Effect. This method is mostly done using JaveScript. It is used mainly on images, while building menu etc.
Yesterday I had written an article about OnlineProfits re-lauch and I had used rollover effect to one of the images there, and some people asked me how I did it(Simple Ans: See the source code 😉 ).
So here is the simple code to achieve this design effect:
<a href="Destination Address"
ONMOUSEOVER='thinkwithsatish.src="ImageURL-when-mouseover" '
ONMOUSEOUT='thinkwithsatish.src="ImageURL-when-mouseout"
'><center><img src="ImageURL-to-be-shown-by-default"
NAME="thinkwithsatish"/></center></a>Explaination:
ONMOUSEOVER and ONMOUSEOUT are valid JS effects. Since all most all browsers support JS, this works fine.
Give a name to the actual image to be displayed:
<img src="URL-of-default-image" NAME="thinkwithsatish"/>
I have named above tag src as thinkwithsatish. Now Refer to this name by using ONMOUSEOVER and ONMOUSEOUT commands.
ONMOUSEOVER='thinkwithsatish.src="ImageURL-when-mouseover" '
ONMOUSEOUT='thinkwithsatish.src="ImageURL-when-mouseout" '
Hope the rest of the code is self explanatory.
Code in action!:
Now you can test it by taking your mouse pointer in and out of image area. If you don’t see any changes, place the mouse pointer over the image for some time – because in some cases, it takes some time to load.
I see that, it works perfectly in Mozilla FireFox, Internet Explorer and Chrome. I haven’t tested it in other browsers. And interestingly, I saw it working even in RSS feed!
Many people use content management system software like WordPress, to publish their content. So in order to include a RollOver effect using JavaScript means – editing the header part or installing a plugin which does the job etc. So instead we can incorporate this simple coding to get the design effect.
Design Tip: This is just the coding/programming part. To get the effect on the design, you must choose such images which will have good effect on users mind. So choose the images wisely.
I am not sure, how helpful it is to you. But it surly helps me sometime to get some minimal design effects on my WordPress blog posts.