3

I have 2 links for the same image. One is a thumbnail which is being displayed on the screen. The second link is the full size image of the thumbnail.

How can I code this so that when the mouse hovers over the image the screen turns black and just the full screen image is shown?

<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>

On mouse hover

  1. Make screen black
  2. Load Fullsizeimage.jpg in the centre of the screen
4

3 回答 3

4

那么你可以做的就是在所有其他元素之上放置一个 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);
});

那么大图像的 HMTL 将是 -

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

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

于 2012-06-09T19:31:06.543 回答
3

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

`#1 Img:hover +div  {
position:fixed;
top:0px;
left:0px;
width:"set the width";
height :"set the height";
}`
于 2012-06-12T04:57:23.047 回答
1 
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>

不要忘记按照答案之一的建议放置关闭链接

于 2012-06-09T19:43:03.003 回答