Hello all; I need a hand. this forum has solved a bunch of my issues and I have another doosie on my hand. I have some ajax code that I query information from database in table form. I am trying to add an image link into the table, once it is moused over, I want a preview of the image to show. once clicked, I need the image to be shown. here is the code I have.... PHP

$q=$_GET["q"];

$con = mysql_connect('xxx.xxx.xxx.xxx','indian','pswrd');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("indian", $con);

$sql="SELECT * FROM donorcollect WHERE id = '".$q."'";

$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>Age</th>
<th>Job</th>
<th>Height(cm)</th>
<th>Weight(kg)</th>
<th>Hair Color</th>
<th>Eye Color</th>
<th>Diet</th>
<th>Availability</th>
<th>Classification</th>
<th>Education</th>
<th>Image</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['age'] . "</td>";
  echo "<td>" . $row['job'] . "</td>";
  echo "<td>" . $row['height'] . "</td>";
  echo "<td>" . $row['weight'] . "</td>";
  echo "<td>" . $row['hair_color'] . "</td>";
  echo "<td>" . $row['eye_color'] . "</td>";
  echo "<td>" . $row['diet'] . "</td>";
  echo "<td>" . $row['availability'] . "</td>";
  echo "<td>" . $row['class'] . "</td>";
  echo "<td>" . $row['education'] . "</td>";
  echo "<td>" . $row['imagelink'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysql_close($con);
?>

my jquery code

/*
 *
 */

this.screenshotPreview = function(){    
    /* CONFIG */

        xOffset = 10;
        yOffset = 30;

        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result

    /* END CONFIG */
    $("a.screenshot").hover(function(e){
        this.t = this.title;
        this.title = "";    
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");                               
        $("#screenshot")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");                        
    },
    function(){
        this.title = this.t;    
        $("#screenshot").remove();
    }); 
    $("a.screenshot").mousemove(function(e){
        $("#screenshot")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });         
};


// starting the script on page load
$(document).ready(function(){
    screenshotPreview();
});

My logic was that I could store the hyperlink in the mysql table, recall it, and have the javascript execute the code. Is my logic wayward? what is the usual way that this is done? what would be the query to insert the hyperlink into the database without returning a 1064 error?

If you are able to succesfully store the link and display the link in text, then just use onmouseover to call the function.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.