gpt4 book ai didi

javascript - 使用 CSS 和 onMouseOver 显示更大的图像

转载 作者:太空宇宙 更新时间:2023-11-04 16:22:01 25 4
gpt4 key购买 nike

我使用这个简单的脚本:

<body>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("img1").src ="images/p2.jpg";
}
function mouseOut()
{
document.getElementById("img1").src ="images/p1.jpg";
}
</script>
<div class="img">
<a target="_blank" href="images/p1.jpg"><img src="images/p1.jpg" alt="Klematis" width="110" height="90" id="img1" onMouseOver= "mouseOver()" onMouseOut="mouseOut()"/></a>
<div class="desc">Add a description of the image here</div>
</div>

图像很大,所以我用宽度和高度属性调整它们,我想如果我只调用函数我会看到更大的图像,但它并没有发生。所以我该怎么做才能看到放大的图像与 onMouseOver? 如果重要,我会添加样式表:

<style type="text/css">
div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
</style>

附言

不要介意<a href我只是使用 w3 学校的原始代码...

P.S 也许我会为此问另一个问题,放大图像的问题已解决,但现在我希望它们以某种 block 形式显示,因为现在如果我将最后一个图像悬停在放大的图像上时甚至有 4 个图像图像远离起始位置,我想让它像画廊 block 一样,并且所有图像都不会在那里显示,而不会超出画廊的边界。任何帮助或其他问题可能更好......

最佳答案

在你的 css 中你可以这样做:

div.img img { height: 90px; width: 110px; }
div.img img:hover { height: auto; width: auto; }

关于javascript - 使用 CSS 和 onMouseOver 显示更大的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6412119/

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