Change the image when the cursor moves over it

Many of you would have noticed that in certain websites,especially the ones with Advts, when you move the cursor over a certain image, it changes to another eye-catchy image.Now you too can give that kind of an effect in your blog with pictures that are chosen by you.Still a bit hazy,.. just move the cursor over the images below
NOTE:- You must have Javascript enabled in the browser

• We shall be using two images to get this kind of the effect.
• There shall be slight modifcations in the code depending on
  1. Both Images have SAME dimentions (width & height)
  2. Both Images have DIFFERENT dimentions
  3. The Images LINK-TO another URL / site
  4. The images DONOT LINK-TO any other URL/Site

• Any combination of the above ..such as
  1. Both Images of the SAME dimetions AND link to another site

  Notice the change in the appearence of the cursor (“hand-shape” icon)

  2. Both Images of the SAME dimetions DONOT link to another site
  3. Both Images of the DIFFERENT dimetions AND link to another site

  Notice the change in the appearence of the cursor (“hand-shape” icon)

  4. Both Images of the DIFFERENT dimetions DONOT link to another site

Both Images of the SAME dimentions LINK-TO another site

<A href=”URL_of the site“ onmouseover=”document.Same_size_LINK.src=’MOUSE-OVER-PIC-URL‘” onmouseout=”document.Same_size_LINK.src=’NORMAL-PIC-URL‘”> <IMG SRC=”NORMAL-PIC-URL” NAME=”Same_size_LINK” WIDTH=”100″ HEIGHT=”50″ BORDER=”0″ > </A>

Both Images of the SAME dimentions DONOT link to another site

<A onmouseover=”document.Same_size_SELF.src=’MOUSE-OVER-PIC-URL‘” onmouseout=”document.Same_size_SELF.src=’NORMAL-PIC-URL‘”> <IMG SRC=”NORMAL-PIC-URL” NAME=”Same_size_SELF” WIDTH=”100″ HEIGHT=”50″ BORDER=”0″ > </A>

Both Images of the DIFFERENT dimentions LINK-TO another site

<A href=”URL_of the site“ onmouseover=”document.Different_size_LINK.src=’MOUSE-OVER-PIC-URL‘” onmouseout=”document.Different_size_LINK.src=’NORMAL-PIC-URL‘”> <IMG SRC=”NORMAL-PIC-URL” NAME=”Different_size_LINK” BORDER=”0″ > </A>

Both Images of the DIFFERENT dimentions DONOT link to another site

<A onmouseover=”document.Different_size_SELF.src=’MOUSE-OVER-PIC-URL‘” onmouseout=”document.Different_size_SELF.src=’NORMAL-PIC-URL‘”> <IMG SRC=”NORMAL-PIC-URL” NAME=”Different_size_SELF” BORDER=”0″ > </A>

POINTS TO REMEMBER

1. In the &IMG NAME=” tag make a note of the NAME specified
2. Consider CODE:-4
   <A onmouseover=”document.Different_size_SELF.src=’MOUSE-OVER-PIC-URL'” onmouseout=”document.Different_size_SELF.src=’NORMAL-PIC-URL'”>

   <IMG SRC=”NORMAL-PIC-URL” NAME=”Different_size_SELF” BORDER=”0″ >

   </A>

3. The NAME of the < IMG tag is repeated on its corresponding <A onmouseover=”document.Different_size_SELF.src=’MOUSE-OVER-PIC-URL’ onmouseout=”document.Different_size_SELF.src=’NORMAL-PIC-URL'”>
4. So if you plan to have more than 2 sets of such images , then its necessary that you have different NAME in the < IMG NAME =
5. And use the corresponfing NAME only in the respective < A tag

Thank you for dropping by here..Hope you enjoyed the session.If you are very much satisfied , kindly leave a comment 😀