5 Replies - 69809 Views - Last Post: 03 December 2008 - 11:58 AM

#1 swetha123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 01-December 08

How to increase (zoom in) image when mouseover on the image

Posted 01 December 2008 - 11:34 PM

hello,

I am new to this thread

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 in java script

please help me out how to do this and suggest me if they are any best tutorials site for the php and java script

here is my code


<html>
<head>
<script type="text/javascript">

function mover(img1)
{
document.getElementById("img1").style.height="250px";
document.getElementById("img1").style.width="300px";
}
function mout(img1)
{
document.getElementById("img1").style.height="170px";
document.getElementById("img1").style.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();
$query2="select style from styles";
$sql=mysql_query($query2);
$result2=mysql_num_rows($sql);  //25
$query="select path from styles "; //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(img1)" onmouseout="mout(img1)" width="170px" height="100px" src='.$cimage.'>

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

  ?>																	  
</body>
</html>




the problem is when i mouse over on the image the <td> cell is increased but not the images and table cells are disturbed
please tell what wrong am i doing

Is This A Good Question/Topic? 0
  • +

Replies To: How to increase (zoom in) image when mouseover on the image

#2 xerxes333  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 31
  • View blog
  • Posts: 504
  • Joined: 05-July 07

Re: How to increase (zoom in) image when mouseover on the image

Posted 02 December 2008 - 07:50 AM

The way you are doing it will work (with some slight modification) but keep in mind when you change the size of the image the resolution is not changed. By that I mean if you have an image that is 50px wide and you change the width to 100px then the image will be pixelated. Just something to keep in mind.
function mover(img1){
	//Define out dimensions
	W = "300px";
	H = "250px";
	
	//Create our new container <DIV> and its attributes
	div = document.createElement('div');
	div.setAttribute("id","grow")
	div.style.position = "absolute";
	div.style.width = W;
	div.style.height = H;
	
	//Create out new magnified <IMG> and its attributes
	img = document.createElement("img");	
	img.src = img1.src;
	img.style.width = W;
	img.style.height = H;
	
	//Append the <IMG> to the <DIV>
	div.appendChild(img);	
	
	//Append the <DIV> to the document
	document.body.appendChild(div)
}

function mout(){
	//We simply call the element by name (grow) and remove it from the DOM
	document.body.removeChild(document.getElementById("grow"));
}



If you want to position the div at the current location of the mouse I suggest reading one of my code snippets

This should help get you on the right path.
Was This Post Helpful? 0
  • +
  • -

#3 swetha123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 01-December 08

Re: How to increase (zoom in) image when mouseover on the image

Posted 02 December 2008 - 11:19 PM

View Postxerxes333, on 2 Dec, 2008 - 06:50 AM, said:

The way you are doing it will work (with some slight modification) but keep in mind when you change the size of the image the resolution is not changed. By that I mean if you have an image that is 50px wide and you change the width to 100px then the image will be pixelated. Just something to keep in mind.
function mover(img1){
	//Define out dimensions
	W = "300px";
	H = "250px";
	
	//Create our new container <DIV> and its attributes
	div = document.createElement('div');
	div.setAttribute("id","grow")
	div.style.position = "absolute";
	div.style.width = W;
	div.style.height = H;
	
	//Create out new magnified <IMG> and its attributes
	img = document.createElement("img");	
	img.src = img1.src;
	img.style.width = W;
	img.style.height = H;
	
	//Append the <IMG> to the <DIV>
	div.appendChild(img);	
	
	//Append the <DIV> to the document
	document.body.appendChild(div)
}

function mout(){
	//We simply call the element by name (grow) and remove it from the DOM
	document.body.removeChild(document.getElementById("grow"));
}



If you want to position the div at the current location of the mouse I suggest reading one of my code snippets

This should help get you on the right path.




hello, xerxes333

thanks for the reply

but my problem is not solved,

till now i had tried in so many ways but i din't even see the zoom effect
but after trying with your example i had seen just only the empty window with out any image when i hover on the images
that too at the left bottom corner of the screen

i just tried with ur code please tell what wrong am i doing
Was This Post Helpful? 0
  • +
  • -

#4 xerxes333  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 31
  • View blog
  • Posts: 504
  • Joined: 05-July 07

Re: How to increase (zoom in) image when mouseover on the image

Posted 03 December 2008 - 06:42 AM

you need tocode your <IMG> tag like this . .
<img src="images/test.gif" onmouseover="mover(this)" onmouseout="mout();"/>

obviously substituting your image for "images/test.gif"
Was This Post Helpful? 0
  • +
  • -

#5 Magic Toolbox  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 5
  • Joined: 03-December 08

Re: How to increase (zoom in) image when mouseover on the image

Posted 03 December 2008 - 09:48 AM

You could use our Javascript zoom and avoid having to write the code yourself :)

http://www.magictoolbox.com/magiczoom/

It works cross browser, it's AAA compliant, it's valid HTML and CSS :)

You can get a free license for non-commercial sites. It's 25 for commercial sites.

Magic Toolbox

Attached image(s)

  • Attached Image

This post has been edited by Magic Toolbox: 03 December 2008 - 09:49 AM

Was This Post Helpful? 1

#6 xerxes333  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 31
  • View blog
  • Posts: 504
  • Joined: 05-July 07

Re: How to increase (zoom in) image when mouseover on the image

Posted 03 December 2008 - 11:58 AM

Nice tool! I would be careful though, advertising a product/service (I'm using the term advertising loosely). I'm not sure how the moderators will treat you (some of them can be quite nasty at times).
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1