Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    1
    Thanked 1 Time in 1 Post

    Exclamation Image "mouseover" ZoomIn & Out Not Working!

    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.

  • #2
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Maybe this will help

    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>

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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++;
    }
    ?>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •