Home » javascript » snippet » snippets » Snippet : Javascript onmouseover and onmouseout

Snippet : Javascript onmouseover and onmouseout

in , , - By - on 9/08/2013 - 3 comments
This snippet helps you to make buttons etc.. I have been using this for Download Buttons.

<a href="URL"><img src="Image_1" 
onmouseover="this.src='Image_2'"
onmouseout="this.src='Image_1'" 
alt="Hoi Hoi"></a>
  • Replace URL with your URL
  • Replace Image_1 with your image 1
  • Replace Image_2 with your image 2
Heres the code of my Download Button
<a href="Download Link">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLBnON6cUo7QDSttvhskvetMrDEYv5D7pZs_7LLow9LaKQlRsS8ehVWy-xhQ_ZAjJ5L2buVBpxN0rJOuJfASpo2ycUXsrHwRaNgdFx2WlP1bC2II-mA9eCNO0GCPcbv7ZIXMRlCnX4hOE/s158/download-buttons01.png" 
onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Jc4iL_VfUt615izgsnmxhKLJppiotLfMVv7BzTUI_qhYtiTGi9KO0YzoLNArPj_nm6LZC7-E-P2dfgZ8f0-rZ6TSj0dXuc0E1rlifGkIcwqGwph4_50RL-jZQQvz2WrMNUAhtjkGPTU/s158/download-buttons02.png'" 
onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLBnON6cUo7QDSttvhskvetMrDEYv5D7pZs_7LLow9LaKQlRsS8ehVWy-xhQ_ZAjJ5L2buVBpxN0rJOuJfASpo2ycUXsrHwRaNgdFx2WlP1bC2II-mA9eCNO0GCPcbv7ZIXMRlCnX4hOE/s158/download-buttons01.png'" 
alt="Download Now"></a>

Labels: , ,