Image "mouseover" ZoomIn & Out Not Working!

doomed2020 · 09-12-2011, 04:09 PM

Hi there ,

I am trying to make Images on my site auto-ZoomIn on "mouseover" event , and auto-ZoomOut on "mouseout" event , but this is not working properly.

I hope some of you guys have tried such thing or seen such thing espescially on MAC , where Icons performs the same behaviour on mouseover, but i want to do it with Images .

It looks pretty simple , but becomes tough to combine Javascript with my PHP Code , where the Image Source is taken from the MySql Database Query.

Major Problems:

1-How to transfer Image Source from a PHP " $ " Variable to the Javascript Variable " var " ?

2- Should I make 6 <div>'s for 6 Images, in order to show their Zoomed HQ Image?

3-I don't want to use jQuery or other plugin files to make this happen for now.

Here is my Code :

Code:

<html>
<head>

<style>
#productImg
{
	width:600px;
	height:auto;
	position:relative;
}

#productImgBeta
{
	width:auto;
	height:auto;
	position:absolute;
	z-index:-100000;
	visibility:hidden;
}
</style>


<script  language="javascript" type="text/javascript">

function imageZoomCancel()
{
	document.getElementById("productImgBeta").style.zIndex = "-100000";
	document.getElementById("productImgBeta").style.visibility = "hidden";
}

function imageZoom()
{
	document.getElementById("productImgBeta").style.zIndex = "100000";
	document.getElementById("productImgBeta").style.visibility = "visible";
}

function imgSrc()
{
       //Not Sure what to put in here
}


</script>

</head>
<body>

<div id="productImg">
    <div id="productImgBeta">
        <?php  
        // $row['ProductImg'](0-11) are taken from MySQL Database
        // $row['ProductImg'](0-11) Contain the relative paths of the Images
        
	$LQImage1=  $row['ProductImg'];    $HQImage1=  $row['ProductImg6'];
	$LQImage2=  $row['ProductImg1'];  $HQImage1=  $row['ProductImg7'];
	$LQImage3=  $row['ProductImg2'];  $HQImage1=  $row['ProductImg8'];
	$LQImage4=  $row['ProductImg3'];  $HQImage1=  $row['ProductImg9'];
	$LQImage5=  $row['ProductImg4'];  $HQImage1=  $row['ProductImg10'];
	$LQImage6=  $row['ProductImg5'];  $HQImage1=  $row['ProductImg11'];
        ?>
//Here the Zoomed In(High Quality) Image will be displayed

<img align="left" width="500px" height="400px" src="imgSrc()" />


</div>

//Here The Zoomed Out(Low Quality) Image will be displayed

<img onmouseover="imageZoom()" onmouseout="imageZoomCancel()" width="150px" height="150px" src="<?php echo ($LQImage1); ?>" />
  
  <img onmouseover="imageZoom()  onmouseout="imageZoomCancel()" width="150px" height="150px" src="<?php echo ($LQImage2); ?>" />
   
 <img onmouseover="imageZoom()" onmouseout="imageZoomCancel()"  width="150px" height="150px" src="<?php echo ($LQImage3); ?>" />
    
<img onmouseover="imageZoom()" onmouseout="imageZoomCancel()" width="150px" height="150px" src="<?php echo ($LQImage4); ?>" />
    
<img onmouseover="imageZoom()" onmouseout="imageZoomCancel()" width="150px" height="150px" src="<?php echo ($LQImage5); ?>" />
    
<img onmouseover="imageZoom()" onmouseout="imageZoomCancel()" width="150px" height="150px" src="<?php echo ($LQImage6); ?>" />


</div>

</body>
</html>

I hope you understand the Code , if you find any Error regarding this Code or you think this Code needs improvements , then please guide me with my mistakes.

Please try this Code in your Browsers , i have tried it in IE8, Chrome 14(beta), Opera 11 and Firefox 6 , but all gave the same result.

Note : This Code is extracted from my site, it is not a complete page of my site but a small part of it , so it may have issues in the display.

dannybierek · 07-09-2012, 10:09 AM

This code sample may help if you still need it. I echoed the php values into a javascript array.

Code:

<html>
<head>
<?php
   $directory="art";
   // create a handler to the directory
    $dirhandler = opendir($directory);
 
    // read all the files from directory
    $nofiles=0;
    while ($file = readdir($dirhandler)) {
 
        // if $file isn't this directory or its parent 
        //add to the $files array
        if ($file != '.' && $file != '..' && preg_match("/thumb.jpg/", $file) == 0)
        {
         $files[$nofiles++]=$file;                
        }   
    }
    //close the handler
    closedir($dirhandler);
echo "<script type='text/javascript'>\n";
echo "var imageID=-1;\n";
echo "var files=[";
$notfirst = false;
foreach ($files as &$file) {
   if ($notfirst) {
      echo ", ";
   }
   else {
      $notfirst = true;
   }
   echo "['".$file."','".$file."thumb.jpg']";
}
echo "];\n";
echo "var paused=false;\n";
echo "var timerTIme=2;\n";
echo "var timer;\n";
echo "function pause() {\n";
echo "   clearTimeout(timer);";
echo "   paused = true;\n";
echo "}\n";
echo "function resume() {\n";
echo "    paused = false;\n";
echo "    timer = setTimeout('changeimage('+timerTIme+')',((timerTIme)*1000));\n";
echo "}\n";
echo "function prev() {\n";
echo "    if (imageID>0) {\n";
echo "        imageID--;\n";
echo "    } else {\n";
echo "        imageID = $nofiles - 1;\n";
echo "    }\n";
echo "    updateimage();\n";
echo "    clearTimeout(timer);\n";
echo "    timer = setTimeout('changeimage('+timerTIme+')',((timerTIme)*1000));\n";
echo "}\n";
echo "function next() {\n";
echo "    if (imageID < $nofiles - 1) {\n";
echo "        imageID++;\n";
echo "    } else {\n";
echo "        imageID = 0;\n";
echo "    }\n";
echo "    updateimage();\n";
echo "    clearTimeout(timer);\n";
echo "    timer = setTimeout('changeimage('+timerTIme+')',((timerTIme)*1000));\n";
echo "}\n";
echo "function updateimage(){\n";
echo "     document.getElementById('imagelink').href='art/'+files[imageID][0];\n";
echo "     document.getElementById('myimage').src='art/'+files[imageID][1];\n";
echo "}\n";
echo "function changeimage(every_seconds){\n";
echo "   clearTimeout(timer);\n";
echo "   if (!paused) {\n";
echo "      timerTIme = every_seconds;\n";
echo "      //change the image\n";
echo "      if(imageID<$nofiles){\n";
echo "         imageID++;\n";
echo "         updateimage();\n";
echo "      }\n";
echo "      else{\n";
echo "         imageID=0;\n";
echo "      }\n";
echo "      //call same function again for x of seconds\n";
echo "      timer = setTimeout('changeimage('+every_seconds+')',((every_seconds)*1000));\n";
echo "   }\n";
echo "}\n";
echo "</script>\n";
?>
</head>
<body onload='changeimage(3)'>
<div style='width:33%;top:50px;left=0px;position:absolute;' align='center'>
These are the images in my portfolio for drawing class.</br>Hover over an image to pause</br><a onclick='prev()'><u>Previous</a></u> <u><a onclick='next()'>Next</a></u></br>
<a id='imagelink' href='art/0.jpgthumb.jpg'><img width='100%' id='myimage' src='art/0.jpg' onmouseover='pause()' onmouseout='resume()'/></a></div>
</body></html>

dannybierek · 07-09-2012, 10:34 AM

Here is how to get the images from an images database set up like this (Change these to your actual values):
Server: localhost, Username: user, Password: pass
Database: db, Table: images, Column: src

Code:

<?php
$conn = mysql_connect("localhost","user","pass");
mysql_select_db("db");

$data = mysql_query("select src from images");
$numimages = 0;
while ($row = mysql_fetch_assoc($data)) {
   $images[$numimages] = $row['src'];
   echo "<img src='$images[$numimages]'>";
   $numimages++;
}
?>