4/06/2010

Mouseover effect using Javascript and css

Mouse over effect can be done by css e.g(button:hover{background:red;}.But this css will not work in IE6. So it needs to use java script for mouse over effect in a button .By using Javscript it can be possible to show mouseover effect in every browser. The demo of this script is applied in the button given below.

This effect will work in every browser.The javascript of this button is given bellow

<input style="width:113px; height:31px; border:none; background:url(button.gif);" onmouseover="this.style.background='url(buttonHover.gif)';" onmouseout="this.style.background='url(button.gif)'" type="button" value="See here" />

9 comments:

  1. tanu6ata4/09/2010

    I'm completely dumb when it comes to codes,scripts etc. don't know what a lot of the terms means but I can come here and just follow your simple direction and fell like a geek,lol,so Thanks man!

    ReplyDelete
  2. this is wonderful information, i was searching this kind of Changing Colour Button on internet for my blog, now i got it here...

    ReplyDelete
  3. hey bro is there any software from wich we make these buttons widout using these codes. i have not so much idea about web designing and java scrpits so if its possible then please tell me the name of that sofware

    ReplyDelete
  4. Mouseover effect are very useful for web designing. In this effect can i set timing for that effect.

    ReplyDelete
  5. just what i needed, thank you!! i'm totally lost when it comes to codes and stuff so this is totally helpful.

    ReplyDelete
  6. I learnt java script before but forgot all now. This coding made me to learn again javascript. This post describes nicely the mouse over effect.

    ReplyDelete
  7. This is really cool, creates nice visual effect for the readers, quite helpful for web designers.Thanks for sharing.

    ReplyDelete
  8. I am always fascinated by the mouseover effect. I used this code in my project today and it created wonders visually. I just love your tips and codes.

    ReplyDelete
  9. This is a very interesting effect... I will try it soon...

    I'm completely a dumb in html, and your blog really helped me a lot. Thanks!

    ReplyDelete