[英]Get the image to appear larger with moving my other elements on my page
这是我要做的确切事情:
适当的JavaScript和html,以便当用户将鼠标移到特价的一种特定类型房间的缩略图上时,将显示与之相关的全尺寸(较大)图像(请注意,较大图像的显示应不会导致其他页面元素移动)。 当用户将鼠标从缩略图图像移开时,较大的图像应消失。
这是我的网站 。
我只希望能够将鼠标悬停在这些图像上并使其显示在页面上方,而无需更改页面现在的外观。
这是我目前的javascript部分;
div = {
show: function(elem) {
document.getElementById(elem).style.visibility = 'visible';
},
hide: function(elem) {
document.getElementById(elem).style.visibility = 'hidden';
}
}
但是我不确定那是对的还是现在对我想要的,
然后是html;
<a href="images/garden2.jpg" class="preview"><img src="images/garden2.jpg" width="201" height="143" alt="Garden Room" onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')"/></a>
<div id="div1"><img src="images/garden2.jpg" alt="Garden Room" /></div>
但这会在图像下方创建一个div并更改我的元素,这不是我想要的。
如果您希望某个元素出现在其他元素之上,则需要定位该元素-在您的情况下,最好的方法是设置所有容器元素-意味着包含原始显示图像和隐藏图像的元素-相对样式的位置-以及隐藏的图像设置绝对位置,当您将鼠标悬停在原始图像上时,只需按照已编码的方式显示隐藏的图像即可:
我做了一个简单的jsfiddle供您理解
HTML:
<div class="container">
<a href="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')" /></a>
<div id="div1" class="hid-img"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" /></div>
<div>
<div class="container">
<a href="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" onMouseOver="div.show('div2')" onMouseOut="div.hide('div2')" /></a>
<div id="div2" class="hid-img"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" /></div>
<div>
CSS:
.container{
position: relative;
}
.container .hid-img{
position: absolute;
display:none;
z-index:1;
}
js:
var div = {
show: function(elem) {
document.getElementById(elem).style.display = 'block';
},
hide: function(elem) {
document.getElementById(elem).style.display = 'none';
}
}
编辑:只需将宽度,高度添加到img标签http://jsfiddle.net/MKPgv/2/
我将使用以下更简单的代码:
HTML:
<a href="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg">
<img width="100" src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" />
<img class="fullsize" src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" />
</a>
<a href="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg">
<img width="100" src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" />
<img class="fullsize" src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" />
</a>
CSS:
a {
position: relative;
display: inline-block;
}
a .fullsize {
position: absolute;
top: 100%;
left: 0;
display: none;
z-index: 1;
}
a:hover .fullsize {
display: inline;
}
JS:-NONE-
小提琴: http : //jsfiddle.net/84anu/预览http://jsfiddle.net/84anu/show/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.