#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    56
    Rep Power
    2

    Preview image from MySQL on mouse hover


    Hi,

    What i want is to modify the image preview on mouse-hover script i found to be able to preview my images. I am uploading images to a local directory while saving their names in MySQL database.

    Currently, the following link will open the details page by clicking the image in the gallery:

    Code:
    <td><a href=details.php?c_id=$sn><img src=\"./images/{$row['cfilename']}\" width=\"90\" height=\"120\" alt=\"\" /></a> \n
    </td>
    I want the same action included in the following code so that i can preview images on mouse hover:

    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>URL Screenshot Preview with jQuery</title>
    <meta name="description" content="Easiest jQuery Tooltip Ever">
    <script src="image-hover/jquery.js" type="text/javascript"></script>
    <script src="image-hover/main.js" type="text/javascript"></script>
    </meta>
    
    <style>
    
    body {
    	margin:0;
    	padding:40px;
    	background:#fff;
    	font:80% Arial, Helvetica, sans-serif;
    	color:#555;
    	line-height:180%;
    }
    
    h1{
    	font-size:180%;
    	font-weight:normal;
    	color:#555;
    }
    h2{
    	clear:both;
    	font-size:160%;
    	font-weight:normal;
    	color:#555;
    	margin:0;
    	padding:.5em 0;
    }
    a{
    	text-decoration:none;
    	color:#f30;	
    }
    p{
    	clear:both;
    	margin:0;
    	padding:.5em 0;
    }
    pre{
    	display:block;
    	font:100% "Courier New", Courier, monospace;
    	padding:10px;
    	border:1px solid #bae2f0;
    	background:#e3f4f9;	
    	margin:.5em 0;
    	overflow:auto;
    	width:800px;
    }
    
    img{border:none;}
    ul,li{
    	margin:0;
    	padding:0;
    }
    li{
    	list-style:none;
    	float:right;
    	display:inline;
    	margin-right:10px;
    }
    
    
    
    /*  */
    
    #screenshot{
    	position:absolute;
    	border:1px solid #ccc;
    	background:#333;
    	padding:5px;
    	display:none;
    	color:#fff;
    	}
    
    /*  */
    
    </style>
    
    </head>
    <body>
    
    
    <h1>URL Screenshot Preview with jQuery</h1>
    
    <table>
    	<tr>
    	<td>	
    
    <p>Monalisa <a href="http://www.cssglobe.com" class="screenshot" rel="images/cssg_screenshot.jpg" width="100" height="200" title="Web Standards Magazine">Css Globe</a> link.</p>
    	</td>
    	<td>
    <p>Ceramic Bowl <a href="http://www.cssglobe.com" class="screenshot" rel="images/LouvBowl.jpg" width="100" height="200" title="Web Standards Magazine">Css Globe</a> link.</p>
    	</td>
    	<td>
    <p>Some painting<a href="http://www.cssglobe.com" class="screenshot" rel="images/picasso8.jpg" width="100" height="200" title="Web Standards Magazine">Css Globe</a> link.</p>
    	</td>
    </tr>
    </table>
    	
    </body>
    </html>
    NOTE: code source

    Kindly assist how i can do it.

    joseph
    Last edited by josephbupe; January 30th, 2013 at 09:29 AM. Reason: corrections
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,110
    Rep Power
    119
    Although this is really a server side question and not a client side question; here's the basic concept on how to do this:

    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>URL Screenshot Preview with jQuery</title>
    <meta name="description" content="Easiest jQuery Tooltip Ever">
    <script src="image-hover/jquery.js" type="text/javascript"></script>
    <script src="image-hover/main.js" type="text/javascript"></script>
    </meta>
    
    <style>
    
    body {
    	margin:0;
    	padding:40px;
    	background:#fff;
    	font:80% Arial, Helvetica, sans-serif;
    	color:#555;
    	line-height:180%;
    }
    
    h1{
    	font-size:180%;
    	font-weight:normal;
    	color:#555;
    }
    h2{
    	clear:both;
    	font-size:160%;
    	font-weight:normal;
    	color:#555;
    	margin:0;
    	padding:.5em 0;
    }
    a{
    	text-decoration:none;
    	color:#f30;	
    }
    p{
    	clear:both;
    	margin:0;
    	padding:.5em 0;
    }
    pre{
    	display:block;
    	font:100% "Courier New", Courier, monospace;
    	padding:10px;
    	border:1px solid #bae2f0;
    	background:#e3f4f9;	
    	margin:.5em 0;
    	overflow:auto;
    	width:800px;
    }
    
    img{border:none;}
    ul,li{
    	margin:0;
    	padding:0;
    }
    li{
    	list-style:none;
    	float:right;
    	display:inline;
    	margin-right:10px;
    }
    
    
    
    /*  */
    
    #screenshot{
    	position:absolute;
    	border:1px solid #ccc;
    	background:#333;
    	padding:5px;
    	display:none;
    	color:#fff;
    	}
    
    /*  */
    
    </style>
    
    </head>
    <body>
    
    
    <h1>URL Screenshot Preview with jQuery</h1>
    
    <table>
     <tr>
    <?php
    
    // connect to database
    // choose database & data table
    // query database
    
    // while loop {
    
    // set-up / define database variables... example $link, $titleText, $relImg, $linkText
    
    echo '  <td>
       <p><a href="'.link.'" class="screenshot" rel="'.$relImg.'" width="100" height="200" title="'.$titleText.'">'.$linkText.'</a> link.</p>
      </td>';
    }
    
    // close database
    
    ?>
     </tr>
    </table>
    	
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo