动态加载的缩略图显示其他缩略图的全尺寸图像，而不是自己的缩略图(使用javascript悬停效果）
Dynamically loaded thumbnail image shows other thumbnails full size image instead of its own (using javascript hover over effect)
我的知识水平：两天前，我观看了一个关于如何使用Dreamweaver构建数据驱动网站的视频教程，之后我刚刚开始自学PHP和Dreamweaver。
我的目标：创建一个页面，它基本上是一个动态表，有6列20行
column1 | column2 | column3 | column4 | column5 | column 6
50px thumbnail | ad post subject | gender | location | age | date of post
" " " " " "
" " " " " "
" " " " " "
" " " " " "
我的问题是：到目前为止，我已经成功地通过从mysqldb中提取行来填充表，并且column1中的缩略图也在动态加载。问题是，因为50pxby50px缩略图（实际上是/images文件夹中的一个大得多的jpg，但我认为它可以通过CSS或HTML调整大小）非常小，所以我决定当用户将光标悬停在图像上时，我希望图像被放大。我在这里找到了一个javascript脚本，可以很好地实现这一点-http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm我已经按照说明正确配置了所有这些。但我确实需要做一些实验，因为给出的例子不适用于动态图像（例子是tooltips[0]=["images/examplepic.jpg"]，而我的例子类似于
tooltips[0]=["images/<?php echo $row_qDisplayAds['image1']; ?>"]
在设法弄清楚正确的路径和echo语法应该是什么之后，我尝试在浏览器中预览它，它起到了作用，即当我将鼠标悬停在第一行的缩略图上时，第1行的缩略图显示了全尺寸版本。然而，当我将鼠标悬停在第2行的缩略图上时，它也显示了第1行缩略图的全尺寸版本。正如你可能已经猜到的，当鼠标悬停在表的所有20行中的所有其他缩略图上时，会显示相同的全尺寸图片。因此在悬停时显示其对应的全尺寸图像的唯一缩略图是行1。所有其他缩略图不显示它们自己的全尺寸图像，而是以全尺寸显示第一行缩略图。我需要做什么才能让每个缩略图显示出自己对应的全尺寸版本，因为我不知道如何做到这一点，而且这是一个特定的问题，所以不可能找到任何关于如何实现这一点的教程。
这是我的index.php页面的完整代码。
<?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);
?>
您需要循环浏览数据，并将图像分配给每个索引的工具提示
tiparray:function(){
var tooltips=[];
<?php
$index = 0;
do {
?>
tooltips[<?php echo $index++;?>]=["images/<?php echo $row_qDisplayAds['image1']; ?>"];
<?php
} while ($row_qDisplayAds = mysql_fetch_assoc($qDisplayAds));
mysql_data_seek($qDisplayAds,0);
?>
return tooltips //do not remove/change this line
}(),
此外，您还需要重置mysql记录集的内部数据指针（返回第1行），因为您将使用mysql_data_seek再次使用它。
您还需要将缩略图之间的链接应用到正确的全屏版本。这样做。
<table id="noticeboard">
<?php
$index = 0;
while ($row_qDisplayAds = mysql_fetch_assoc($qDisplayAds)) { ?>
<tr class="rowheight">
<td class="cellheight"><img src="images/<?php echo $row_qDisplayAds['image1']; ?>" alt="" rel='imgtip[<?php echo $index++;?>]' 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 }; ?>
</table>
javascript代码处理链接。您所需要做的就是更新rel='imgtip[0]'，为您的20张图像从0向上计数到19。
相关文章：
- 使用 LWIP 在 NodeJS 中生成缩略图
- 使用不同的缩略图来拍摄漂亮的照片
- 尝试显示使用 php 和数据库检索的缩略图中的全尺寸图像
- 如何使用jQuery单击其缩略图时显示主图像
- 如何使用缩略图和箭头创建图片库
- 如何使用jqueryjplayer的视频url创建缩略图
- 动态加载的缩略图显示其他缩略图的全尺寸图像，而不是自己的缩略图(使用javascript悬停效果）
- 使用超级缩略图避免页面宽度
- 使用Jquery读取媒体:缩略图RSS提要
- 如何使用javascript在缩略图中移动多个图像(从phpmyadmin检索）
- 尝试使用 Jquery 通过分页隐藏缩略图
- 使用脸书图形 API 获取照片的缩略图
- 使用 CSS 使单击的缩略图显示全尺寸
- 如何使用引导程序在一行中存在 3 个缩略图后创建新行
- 使用鼠标向下拖动以缩放图像缩略图
- 使用缩略图，如何将主图片更改为缩略图
- Javascript:将鼠标悬停在缩略图上，显示更大的图像，尝试使用“this”
- 猫头鹰轮播使用同位素缩略图作为页面导航
- 如何完全删除任何类型的缩略图使用Jquery FileUpload库
- 使用缩略图使用OnClick更改主图像
