PDA

View Full Version : How to increase the size of the image using the X, Y co-ordinates


swetha123
11-24-2008, 12:53 PM
hello,

I need to increase the size of the image when onmouseover() and onmouseout() event occurs at the same position using x and y co-ordinates

please help me out how to do this

here is my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

function mover(event)
{
x=event.clientX;
y=event.clientY;
document.getElementById("img1"+ x,y).height="250px";
document.getElementById("img1"+ x,y).width="300px";
}
function mout(event)
{
x=event.clientX;
y=event.clientY;
document.getElementById("img1"+ x,y).height="170px";
document.getElementById("img1"+ x,y).width="100px";
}
</script>
</head>

<?php
function connect()
{
$dbhost='localhost';
$dbuser='root';
$dbpass='swetha';
$conn= mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql'.mysql_error());
$dbname='hakman';
mysql_select_db($dbname);
return $conn;
}
?>

<body bgcolor="#0a1936">
<?php
$c=connect();
$page_name="spry_styles.php";
$start=$_GET['start'];
if(!($start>0))
{
$start=0;
}
$eu=($start-0);
$limit=9;
$this1=$eu+$limit; //6
$back=$eu-$limit; //-6
$next=$eu+$limit; //6
$query2="select style from styles";
$sql=mysql_query($query2);
$result2=mysql_num_rows($sql); //25
$query="select path from styles limit $eu,$limit"; //0 to 6
$result=mysql_query($query);
echo '<table border="1" align="center" width="55%" height="60%" BORDERCOLOR="#C6C6C6" >';
for($r=1;$r<=3;$r++)
{
echo '<tr>';
for($d=1;$d<=3;$d++)
{
$obj=mysql_fetch_object($result);
$imageSrc=$obj->path;
$cimage="/images/".$obj->path;


echo '<td border="1" width="15px" height="25px" id="img1" name="img1">
<img onmouseover="mover(event)" onmouseout="mout(event)" width="170px" height="100px" src='.$cimage.'></td>';


}
echo '</tr>';
}
echo'</table>';

// From here the paging code starts

echo '<table align ="center" width="50%"><tr><td align="center">';
$nume=$result2;
if($nume > $limit ) // 25>9 y
{
echo "<table align ='center' width='100%'><tr><td align='left' width='5%'>";
if($back >=0) //
{
print "<a href='$page_name?start=$back&uname=$cuser'><font face='Verdana' size='2'>PREV</font></a>";
}
echo "</td><td width='10%'>";
$i=0;
$l=1;
for($i=0;$i < $nume;$i=$i+$limit)
{
if($i <> $eu)
{
echo "<a href='$page_name?start=$i&uname=$cuser'><font face='Verdana' size='2'>$l </font></a>";
}
else
{
echo "<font face='Verdana' size='2' color=red>$l </font>";
}
$l=$l+1;
}
echo "</td><td align='right' width='5%'>";
if($this1 < $nume)
{
print "<a href='$page_name?start=$next&uname=$cuser'><font face='Verdana' size='2'>NEXT</font></a>";
}
echo "</td></tr></table>";
}
echo '</tr></td></table>';
?>
</body>
</html>



thanks in advance