我正在尝试使用从数据库中检索到的缩略图。 PHP 工作正常并显示我的缩略图。我不知道如何将 id 从数据库获取到 JavaScript 函数的 imageID
和 getElementById
,以便在单击时显示为全尺寸。我可以在我的代码中直接执行 JavaScript 内联 onsubmit
。内联 JavaScript 正在运行;正在显示缩略图,单击时显示全尺寸,但我想使用我的数据库检索图像在单击时显示全尺寸图像。你认为你可以帮助我处理我的代码吗?
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
//function that shows full sized image of the thumbnail
function showImage(imageID) {
//first hide all images
document.getElementById('image1').style.display = 'none';
//then display the one that had its thumbnail clicked.
document.getElementById(imageID).style.display = '';
}
</script>
</head>
<body>
<h1></h1>
<?php
$host = "localhost";
$user = "root";
$pass = "";
$database = "travel1";
$conn = new mysqli($host, $user, $pass, $database);
if ($conn->connect_error)
die ("Unable to connect to database: " . $conn->connect_error );
$sql = "select * from what_to_do
where DESTINATION='NEW YORK CITY'";
$result = $conn->query($sql);
if ($result->num_rows >= 0) {
echo "<table>";
while($row = $result->fetch_assoc()) {
echo "<td>".$row["THUMBNAIL"]."</td>";
}
echo "</table>";
}
else {
echo "You have no destinations";
}
$conn->close();
?>
<p>
<img id="image1" alt="" src="images/NewYork/Pick7/9-11show.jpg"
style="display: none" />
</p>
<p>
<img alt="" src="="images/NewYork/Pick7/9-11thumb.JPG"style="width:100px;
height:100px" onclick="showImage('image1')" />
</p>
最佳答案
在此代码中,第二个 img 标签过早关闭,如 src="something"等。如果该标签的格式正确,我认为这应该有效吗?
否则,你只会做类似 "src="/blah"/>
希望这能回答您的问题?
然后对于 I onclick 函数,基本上做同样的事情。
关于javascript - 尝试显示使用 php 和数据库检索的缩略图的全尺寸图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29057429/