my level of knowledge: i have just started teaching myself PHP and Dreamweaver after watching a video tutorial on how to build data-driven websites using dreamweaver 2 days ago.
my aim: to create a page which is basically a dynamic table which has 6 columns and 20 rows
column1 | column2 | column3 | column4 | column5 | column 6
50px thumbnail | ad post subject | gender | location | age | date of post
" " " " " "
" " " " " "
" " " " " "
" " " " " "
my problem: so far i have successfully managed to populate the table by pulling the rows from mysql db and the thumbnail in column1 is also dynamically loading. the problem is, because the 50pxby50px thumbnail (which is actually a much larger jpg in the /images folder but being resized by CSS or HTML i think) is quite small and so i have decided that i want the image to be enlarged when user hovers cursor over it. i found a javascript script which achieves this very nicely here – http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm i have managed to configure all that correctly following the instructions. but i did need to experiment a bit as the examples given arent for dynamic images (example is tooltips[0]=["images/examplepic.jpg"] whereas my case is like this
tooltips[0]=["images/<?php echo $row_qDisplayAds['image1']; ?>"]
after managing to figure out what the correct path and echo syntax should be i tried previewing it in browser and it worked i.e when i hovered over the thumbnail in the first row a full sized version shows of the thumbnail in row 1. however, when i hover over the thumbnail in row 2 it shows the full size version of thumbnail in row 1 aswell. as youve probably guessed when hovering over all the other thumbnails in all 20 rows of the table the same full size pic is shown. so the only thumbnail which shows its corresponding full size image upon hovering is row 1. all other thumbnails dont show their own full size image and instead show the first rows thumbnail in full size. any ideas what i need to do to make each thumbnail show its own corresponding full size version as i have no idea how to go about this and as its such a specific problem its impossible to find any tutorials on how to achieve this.
this is the full code of my index.php page.
<?php virtual('/myfirstsite/Connections/conn_firstdynamic.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
if (PHP_VERSION < 6) {
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
}
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}
mysql_select_db($database_conn_firstdynamic, $conn_firstdynamic);
$query_qDisplayAds = "SELECT category, topic, `date`, age, location, image1 FROM ads ORDER BY idno DESC";
$qDisplayAds = mysql_query($query_qDisplayAds, $conn_firstdynamic) or die(mysql_error());
$row_qDisplayAds = mysql_fetch_assoc($qDisplayAds);
$totalRows_qDisplayAds = mysql_num_rows($qDisplayAds);
?>
<!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>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="ddimgtooltip.css" />
</head>
<body>
<script type="text/javascript">
var ddimgtooltip={
tiparray:function(){
var tooltips=[]
//define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object]
//For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\'m the king of the world"
//For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc}
tooltips[0]=["images/<?php echo $row_qDisplayAds['image1']; ?>"]
return tooltips //do not remove/change this line
}(),
tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
//***** NO NEED TO EDIT BEYOND HERE
tipprefix: 'imgtip', //tooltip ID prefixes
createtip:function($, tipid, tipinfo){
if ($('#'+tipid).length==0){ //if this tooltip doesn't exist yet
return $('<div id="' + tipid + '" class="ddimgtooltip" />').html(
'<div style="text-align:center"><img src="' + tipinfo[0] + '" /></div>'
+ ((tipinfo[1])? '<div style="text-align:left; margin-top:5px">'+tipinfo[1]+'</div>' : '')
)
.css(tipinfo[2] || {})
.appendTo(document.body)
}
return null
},
positiontooltip:function($, $tooltip, e){
var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(),
x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(ddimgtooltip.tooltipoffsets[0]*2) : x
y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
$tooltip.css({left:x, top:y})
},
showbox:function($, $tooltip, e){
$tooltip.show()
this.positiontooltip($, $tooltip, e)
},
hidebox:function($, $tooltip){
$tooltip.hide()
},
init:function(targetselector){
jQuery(document).ready(function($){
var tiparray=ddimgtooltip.tiparray
var $targets=$(targetselector)
if ($targets.length==0)
return
var tipids=[]
$targets.each(function(){
var $target=$(this)
$target.attr('rel').match(/\[(\d+)\]/) //match d of attribute rel="imgtip[d]"
var tipsuffix=parseInt(RegExp.$1) //get d as integer
var tipid=this._tipid=ddimgtooltip.tipprefix+tipsuffix //construct this tip's ID value and remember it
var $tooltip=ddimgtooltip.createtip($, tipid, tiparray[tipsuffix])
$target.mouseenter(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.showbox($, $tooltip, e)
})
$target.mouseleave(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.hidebox($, $tooltip)
})
$target.mousemove(function(e){
var $tooltip=$("#"+this._tipid)
ddimgtooltip.positiontooltip($, $tooltip, e)
})
if ($tooltip){ //add mouseenter to this tooltip (only if event hasn't already been added)
$tooltip.mouseenter(function(){
ddimgtooltip.hidebox($, $(this))
})
}
})
}) //end dom ready
}
}
//ddimgtooltip.init("targetElementSelector")
ddimgtooltip.init("*[rel^=imgtip]")
</script>
<table id="noticeboard">
<?php do { ?>
<tr class="rowheight">
<td class="cellheight"><img src="images/<?php echo $row_qDisplayAds['image1']; ?>" alt="" rel='imgtip[0]' style='width:50px;height:50px'/></td>
<td class="cellheight"><?php echo $row_qDisplayAds['subject']; ?></td>
<td class="cellheight"><?php echo $row_qDisplayAds['gender']; ?></td>
<td class="cellheight"><?php echo $row_qDisplayAds['age']; ?></td>
<td class="cellheight"><?php echo $row_qDisplayAds['location']; ?></td>
<td class="cellheight"><?php echo $row_qDisplayAds['date']; ?></td>
</tr>
<?php } while ($row_qDisplayAds = mysql_fetch_assoc($qDisplayAds)); ?>
</table>
</body>
</html>
<?php
mysql_free_result($qDisplayAds);
?>
You will need to loop through the data and assign the images to the tooltip for each index
Additionally, you also need to reset the internal data pointer(back to row 1) for your mysql recordset since you be using it again using mysql_data_seek.
You also need to apply the link between the thumbnails to the correct full screen version. Do this.
The javascript code handles the linking. All you need to do is update the rel=’imgtip[0]’ to count up from 0 to 19 for your 20 images.