<?php
// Connect to database
$conn = @mysql_connect("dc1-mysql-01.kattare.com", "bmclaugh", "db-1p0j0rdw");
if (!$conn)
die("Error connecting to MySQL: " . mysql_error());
if (!mysql_select_db("bmclaugh", $conn))
die("Error selecting database: " . mysql_error());
$image_name = $_REQUEST['image'];
$select = 'SELECT *';$from = ' FROM image_database';
$where = ' WHERE name = \'' . $image_name . '\'';
$queryResult = @mysql_query($select . $from . $where);
if (!$queryResult)
die("Error retreiving image data from the database.");
while ($row = mysql_fetch_array($queryResult)) {
echo $row['name'] . "|" .
$row['title'] . "|" .
$row['date'] . "|" .
$row['description'];
}
mysql_close($conn);
?>
|
上述代码会获得请求参数以及图像名称、在数据库中查找它并返回所有有关此图像的信息（由管道符 | 分隔），正如规范所规定的一样。
  |
|
要让此过程更加趋于现实（尽管设置上有些复杂），让我们先来创建一个 SQL 数据库以存储每个图像的信息。如下所示的是来自我所使用的表的 phpMyAdmin 的一个屏幕快照（参见图 2）：
这些列都非常简单：
img 元素的 src 属性中所使用的文件名相匹配。注意当我们要将所有这些连起来的时候，我们要去除 img/ 前缀，即图像所在的目录名，所以如果到某个图像的引用是 img/image_01.jpg，我们处理后的结果应该为 "image_01.jpg"。很显然，这是一种非常基础的表设计；虽然不怎么复杂，但主旨俱在。使用图像名称作为键不是一种很好的做法，而且还会引发各种各样的麻烦。但，这是数据库设计方面的问题，不在本文的讨论范围之内；这里的关键是设置一个从 Web 页到 JavaScript 到服务器端再到数据库的信息流，而这经常都是在处理实际的应用程序所要涉及的事情。
|
|
接下来，应该向表中插入示例数据。我在本文的 参考资料 部分提供了一个可下载的 SQL 批文件，它会创建表并插入全部五行数据。您可以针对自己的数据库使用这些数据，自然，花一下午时间为不是自己拍摄的照片键入 20 个描述不是什么愉快的事情。示例包括了 5 行，您可以添加更多的示例数据来填充剩余的图片库。
表中有了这些数据之后，就可以实际将前端（Web 表单）和后端（数据库）连接起来了。
|
|
现在，页面已经有了一个请求对象，称为 request，并且用来从中获取数据的 PHP 脚本和数据库也准备好了。这时要做的就是构建一个向脚本发起请求的 JavaScript 函数，然后再将图片库中的图像连接到该函数。
在开始处理客户到服务器的连接前，需要首先确保图像能调用函数。所以让我们从一个简单的占位符 JavaScript 函数开始：
function getImageDetails() {
alert("Image details would get pulled here.");
}
|
我将上述代码放到了 hoverbox-ajax.js 中用于创建请求对象的代码的下面。此函数真的不过是一个占位符，但我们现在可以只调用它，而先不用顾及服务器端和 Ajax 细节。它先是创建一个请求对象，然后再弹出一个信息消息框。
现在，需要针对图像修改 HTML。先来看一下图片库中的每个图像是如何表示的：
<li> <a href="#"><img src="img/photo01.jpg" alt="description" /> <img src="img/photo01.jpg" alt="description" class="preview" /></a> </li> |
乍看上去，这让人有些费解，我们不妨分开来看看。首先，这里有一个 a 标记，它不链接到任何东西（使用 # 符号作为对象）。当鼠标在该图像上停留的时候，它能让 CSS 规则就绪。然后，就是 img 标记。这是图片库默认显示的图像 — 较小版。最后，是第二个 img，带 “preview” 类。如下所示的是该类的 CSS（取自 css/hoverbox.css）：
.hoverbox a
{
cursor: default;
}
.hoverbox a .preview
{
display: none;
}
.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}
|
默认地，上述代码表明第二个图像 — 即图片库图像未缩小的较大版本 — 被隐藏（display 属性设为 none）。所以当页面加载时，由第二个图像标记所引用的图像不可见。
但是，当鼠标在其上悬停时，.preview 规则生效。该图像被显示在第一个图像的上方（原因是第二个图像的 z-index 被设为 1，一个很低的值），可以稍微向上移动一点以使该图像完全覆盖下面的图像。效果如图 3 所示：
我们需要的动作是当用户的鼠标移到该图像之上时调用我们的 JavaScript 处理程序。这意味着对每个 img 标记上都应上一页 [1] [2] [3] [4] [5] 下一页
打印文档
推荐好友 
返回顶部
增大字体 
减少字体
