On MouseOver & OnMouseout event of table image changing in links by JavaScript

We can use OnMouseover and OnMouseout events to trigger various functions or effects.

OnMouseover and OnMouseout on a table row.

We can change the background color of a table row by using mouseover events. Same way we can change to different color or restore the original color by using mouseout event. Here is an example.

<table>
<tr onmouseover="this.style.background='#f1f1f1';" 
  onmouseout="this.style.background='#cfcfcf';">
<td > this is table cell </td><td> this is another </td></tr>
</table>

this is table cell
Place your mouse here

this is another cell
Place your mouse here

Bring mouse over the above line inside a table .

While loading or refreshing this page the background color of table row is whilte. On Mouse over the row it becames #0fffff and on Mouse out it changes to #ffff00

Image changing onMouseOver & Out by JavaScript

We can use onMouseOver and onMouseOut events to swap images and create an image rollover navigational links. Using this when mouse is passed over the link we can display another image.

This is done by using two images. One image is displayed first as a hyper link and with the help of onMouseOut event the other image is displayed. Here are two images

Here is the demo of on Mouse Over and on Mouse out event on a image hyper link

Here is the code of the above demo

<A HREF="../" onmouseover="document.my_image.src=''images/wrong.jpg''"
onmouseout="document.my_image.src=''images/correct.jpg''" ><img src=images/correct.jpg name=my_image border=''0''></a>

Using this technique a push button type image button can be developed. On button is first displayed and the second button with Push effect is displayed once the mouse is placed over it.

Using Multiple Images

Use different names for each image ( watch the name attribute of images displayed )

<A HREF="../" onmouseover="document.my_image2.src='images/cross2.png'"
onmouseout="document.my_image2.src='images/tick2.png'" ><img src=images/tick2.png name=my_image2 border='0'></a>
<br><br>
<A HREF="../" onmouseover="document.my_image3.src='images/cross3.png'"
onmouseout="document.my_image3.src='images/tick3.png'" ><img src=images/tick3.png name=my_image3 border='0'></a>
<br><br>
<A HREF="../" onmouseover="document.my_image4.src='images/cross4.png'"
onmouseout="document.my_image4.src='images/tick4.png'" ><img src=images/tick4.png name=my_image4 border='0'></a>

Event Handling onMouseDown and onMouseUP

Subscribe to our YouTube Channel here

Mouseover and Mouse out

OnMouseover and OnMouseout on a table row.

Image changing onMouseOver & Out by JavaScript

Using Multiple Images