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.
This is very simple to do and anyone can use it. It can make a difference on a site and many are impressed by it.
Finally really useful and really simple solution for rollover effect on images.
@George Serradinho, @Web Design Beach, And the important thing is, there is no need to edit the header of the webpage.
hi i want to make a web so cud u plz tel wht i hav to do so thks hemant
@hemant singh, You can use WordPress to build your website. We had written a post explaining steps to install WordPress @ http://technotip.org/setup-you.....wordpress/ – hope it helps.
Thanks for this bit of code. I tried it in my wordpress site but it displays the code as “text” in my post. See the link below as an example. What am I missing? Any help would be greatly appreciated.
http://www.amazingcarlos.com/?p=1
@Bill, The problem is, you have copied and pasted the code from here and changed the image url. This doesn’t work. Because, the straight quotes will turn into curly quotes, if you copy paste.
So, now go back to the code, delete the double quotes and manually retype. Save and refresh the page.
OR
But when I see your source code, I suspect that you are using “Visual Editor” and pasting the things. This again doesn’t work. Now copy the code, change the image URL, goto HTML editor, paste the code, save and refresh your webpage, and it should be working.
Nevermind! My mistake. So I got it working on the individual post pages. But on my entry blog page where wordpress lists my posts, the rollover effect no longer works. In other words, the rollover effect only works on the actual post page itself, not anywhere else wordpress displays the identical post within my blog. Is there a way to fix this? Thanks!
Thank you!. Everything is working now. Thanks so much for your help.
Thank you, Thank you, Thank you…sometimes you just don’t have access to the CSS or the HEAD of the document…this works perfectly!
YOU BLOODY BEAUTY! Spent 2 hours trying to get HTML and CSS codes to work and nothing did, but this FINALLY did and as it’s my uni project I won’t be deducted marks if I mention how this was a last resort because no other option worked
This is brilliant.
Thank you, this was just what I was looking for and it works great. Redesigning My site and needed a simple solution to a frustrating problem. Appreciate your sharing!