gpt4 book ai didi

javascript - 使用CSS让点击的缩略图显示全尺寸

转载 作者:太空宇宙 更新时间:2023-11-03 18:34:29 25 4
gpt4 key购买 nike

我在页面的一侧显示了三个缩略图。

点击后,需要在页面中间显示全尺寸图像,并在其下方显示文本。缩略图需要在 mouseover 上稍微增加尺寸,我已经用它编码了。我的主要问题是让全尺寸图像显示。

这是我所拥有的:

        <!DOCTYPE html>
<html>
<head>
<title>Homework 3, CSS Styles</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
img:hover
{
transform: scale(1.250,1.250);
padding:5px;
}
#right
{
position:absolute;
top:50px;
right:100px;
left:250px;
bottom:200px;
}

</style>
<script>
function changeSize(id)
{
var mainImage=document.getElementById("mainImage");
var someImage=document.getElementById(id);
mainImage.src=someImage.src;
}
</script>

</head>
<body>
<div align="center"><img id="mainImage" style="max-width:auto; max-height:auto" align="middle" src="blank.jpg"
alt="blank"/></div>
<table>
<tr>
<td><span style="cursor:pointer"><img style="max-width:70px; max-height:70px" id="cluster" src="cluster1.png"
alt="cluster" onClick="changeSize(id)"/></span></td>
</tr>
<tr>
<td><span style="cursor:pointer"><img style="max-width:70px; max-height:70px" id="gas"
src="gas1.png" alt="gas" onClick="changeSize(id)"/></span></td>
</tr>
<tr>
<td><span style="cursor:pointer"><img style="max-width:70px; max-height:70px"
id="launch" src="launch1.jpg" alt="launch" onClick="changeSize(id)"/></span></td>
</tr>

</table>
</body>
</html>

我不确定这是最好的方法,因此欢迎您提出建议。

最佳答案

不清楚你到底想做什么,但你应该将你的脚本包装到 onload 处理程序中。否则您将无法获得对 DOM 元素的引用。例如:

var boot = function() {
var main=document.getElementById("mainImage");
var someImage=document.getElementById("someImage");
main.src=someImage.src;
}
var changeSize = function() {

}

if (window.addEventListener) {
window.addEventListener('load', boot, false);
} else if (window.attachEvent) {
window.attachEvent('onload', boot);
}

关于javascript - 使用CSS让点击的缩略图显示全尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19071573/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com