Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
SQL Server

Creating Smart Images in ASP.NET.

Author: DevASP
Download Source Code :

This article is about how you can create smart images in your ASP.NET application They know when the mouse gets near them, and they enlarge the closer the mouse gets!

Steps you will do.


Start visual studio and create a new web application.


Open the HTML design of your web form and add the following JavaScript functions before closing the head tag.



<script language="javascript">

document.onmousemove = b


window.onload = init;

startEnlarge = 250;  // The distance to start enlarging the picture at, in pixels.

enlargeTo = 200;     // The number of Pixels to enlarge to.

minSize = 40;        // The number of Pixels to shrink to.


centerOfPic = new Array();


function init(){




function beSmart(){



    if(document.images[i].className == "smart"){

      mouseX = window.event.x;

      mouseY = window.event.y;

      imageX = document.images[i].offsetLeft + (document.images[i].width / 2);

      imageY = document.images[i].offsetTop + (document.images[i].height / 2);

      distance = Math.ceil(Math.sqrt(Math.pow(mouseX - imageX,2) + Math.pow(imageY - mouseY,2)));

      percent = distance / startEnlarge * enlargeTo;

      percent = enlargeTo - percent

         if(percent > minSize){

           document.images[i].style.width = percent;

           document.images[i].style.height = percent;

         } else {

           document.images[i].style.width = minSize;

           document.images[i].style.height = minSize;








Now add the following HTML code to design your web page.



<body bgcolor=#009999 text="lime">     


<img src="images.jpg" class="smart"> <img src="images.jpg" class="smart">

<img src="images.jpg" class="smart"> <img src="images.jpg" class="smart">

<img src="images.jpg" class="smart"><br>

<h3>Take your mouse over the images to see the effects</h3><br>

<h3>Dont forgot to visit <a href=""></a></h3><br>





Note! Don’t forget to include the image and if your image has a different image name the change it in the image tags mention above.



Run you application and take the mouse near that images.






Article Comments
This is nice article but How we will do if I have images in datalist? Will it be same to enlarge datalist images too??

Posted on 11/19/2008 3:15:47 PM by dev

Add Article Comment:
Name :
Email Address :
Comments :
<< Creating Animated Eyes Using JavaScript

Disclaimer - Privacy
© 2002-2017