鼠标悬停时显示完整大小的图片。

Question

我有两个链接指向同一张图片。一个是缩略图，显示在屏幕上。第二个链接是缩略图的全尺寸图像。

当鼠标悬停在图像上时，如何编码使屏幕变黑，并仅显示全尺寸图像？

<div id= "1" class="thumbnail"><a href="/fullsizeimage.jpg"><img scr="/thumbnail.jpg"> </a></div>
<div id= "2" class="thumbnail"><a href="/fullsizeimage2.jpg"><img scr="/thumbnail2.jpg"> </a></div>

鼠标悬停时

1. 屏幕变黑
2. 在屏幕中央加载Fullsizeimage.jpg图片

- Yahoo

Answer 1

您可以将一个 div 元素放置于所有其他元素之上（使用 100% 的宽度和高度，position:absolute 和 z-index 属性）。默认情况下将其隐藏。然后当您准备显示一张图片时，将该 div 变为可见并将完整尺寸的图片加载到其中。通过给该 div 添加一些 CSS 属性 - background-color:black，您可以轻松地使屏幕变黑。

您需要修改 HTML，使小图片包含对大图片的引用。类似于下面这样的内容 -

<div id= "smallImage" class="thumbnail"><a href="/fullsizeimage.jpg"><img scr="/thumbnail.jpg"> </a></div>

实际加载图片时，您需要像这样做 -

$("#smallImage").on('mouseover',function(){
  var smallImage = $(this);
  var largeReference = smallImage.attr('rel');
  $("#largeImage").attr('src',largeReference);
});

然后大图的HTML代码将是 -

<img id="largeImage" src="" />

不要忘记允许用户关闭此大图像视图。

- Lix

---

我该如何“将完整尺寸的图像加载到其中”？是否有一种方法只在鼠标悬停在上面时才加载图像？ - Yahoo

Answer 2

使用以下CSS在图像的悬停属性上显示黑色div

`#1 Img:hover +div  {
position:fixed;
top:0px;
left:0px;
width:"set the width";
height :"set the height";
}`

- Ajay Beniwal

Answer 3

function fullscreen1() {
img = document.getElementById('img1')
img.src = "/fullsizeimage.jpg"
img.style = "position:fixed;top:30px;left:30px;width:990px;box-shadow:6px 7px 5px;background-color:rgb(70,70,70);"}
 function fullscreen2() {
img = document.getElementById('img2')
img.src = "/fullsizeimage2.jpg"
img.style = "position:fixed;top:30px;left:30px;width:990px;box-shadow:6px 7px 5px;background-color:rgb(70,70,70);"}
    <div id= "1" class="thumbnail"><a href="/fullsizeimage.jpg" onmouseover="fullscreen1()"><img id="img1" scr="/thumbnail.jpg"> </a></div>
    <div id= "2" class="thumbnail"><a href="/fullsizeimage2.jpg" onmouseover="fullscreen2()"><img id="img2" scr="/thumbnail2.jpg"> </a></div>

不要忘记按照其中一个答案建议的方式放置关闭链接。

- Mahesh Bansod