Picture Border Effect

                                                       

You see the samples above. Left one is normal image and right one with image border effect applied. So how can we do that?

I want to show you here a small trick to how to make image border effect by using java script. They call it hover effect or on mouse over effect so when user move cursor over it the script works. There are several ways to do it. You can put it in between head tags or for single picture directly into image tags.


How to do it in directly object tags.

Method 1

Directly you can use it into tags of image object.

 
 <img border="0" onmouseout="this.style.border='3px solid blue'" onmouseover="this.style.border='8px solid red'" src="YOUR PICTURE URL" />

Method 2

Or you can use it in between head tags and apply to your image.

 
<script type="text/javascript">

  function red(){

    document.picture.style.border='1px solid red';

  }

  function blue(){

    document.picture.style.border='1px solid blue';

  }

  </script>

And then to apply this script on image

 
<img src="YOUR PICTURE URL" border="1" name="image" onMouseOver="red()" onMouseOut="blue()">

Method 3

To apply this more than 1 picture you should use this.

  <script type="text/javascript">


  function red(Obj){

    Obj.style.border='1px solid red';

  }

  function blue(Obj){

    Obj.style.border='1px solid blue';

  }

  </script>

After that you can apply it to images like below. You have to use (this) for calling function.

 <img src="pic1.jpg" border="1" onMouseOver="red(this)" onMouseOut="blue(this)">


  <img src="pic2.jpg" border="1" onMouseOver="red(this)" onMouseOut="blue(this)">