鼠标悬停显示全尺寸图像

时间：2021-06-28 17:57:27

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.

我有2个相同图像的链接。一个是显示在屏幕上的缩略图。第二个链接是缩略图的完整大小图像。

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. 使屏幕变黑

  2. Load Fullsizeimage.jpg in the centre of the screen

    3. 在屏幕*加载Fullsizeimage.jpg

3 个解决方案

#1

4  

Well what you could possibly do is place a div element above all other elements (use 100% width and height, position:absolute and z-index). Make it hidden by default. Then when you are ready to display an image, make that div visible and load the full size image into it. You can make the screen black simply by giving that div some css properties - background-color:black.

那么你可能做的是将div元素放在所有其他元素之上(使用100%宽度和高度,位置:绝对和z-index)。默认情况下将其隐藏。然后,当您准备好显示图像时,使该div可见并将完整大小的图像加载到其中。你可以简单地通过赋予div一些css属性 - background-color:black来使屏幕变黑。

You'll want to modify your HTML to have the small image contain a reference to the large image. Something like this -

您需要修改HTML以使小图像包含对大图像的引用。像这样的东西 - 

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

For the actual loading of the image, you'd want to do something like this -

对于图像的实际加载,你想要做这样的事情 - 

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

Then the HMTL for the large image would be -

那么大图像的HMTL将是 - 

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

Don't forget to allow the user to close this large image view.

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

#2

3  

Use the Below CSS to display black div on hover property of an image

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

#3

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>

dont forget to put the close link as suggested in one of the answers

别忘了按照其中一个答案中的建议放置关闭链接

#1

4  

Well what you could possibly do is place a div element above all other elements (use 100% width and height, position:absolute and z-index). Make it hidden by default. Then when you are ready to display an image, make that div visible and load the full size image into it. You can make the screen black simply by giving that div some css properties - background-color:black.

那么你可能做的是将div元素放在所有其他元素之上(使用100%宽度和高度,位置:绝对和z-index)。默认情况下将其隐藏。然后,当您准备好显示图像时,使该div可见并将完整大小的图像加载到其中。你可以简单地通过赋予div一些css属性 - background-color:black来使屏幕变黑。

You'll want to modify your HTML to have the small image contain a reference to the large image. Something like this -

您需要修改HTML以使小图像包含对大图像的引用。像这样的东西 - 

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

For the actual loading of the image, you'd want to do something like this -

对于图像的实际加载,你想要做这样的事情 - 

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

Then the HMTL for the large image would be -

那么大图像的HMTL将是 - 

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

Don't forget to allow the user to close this large image view.

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

#2

3  

Use the Below CSS to display black div on hover property of an image

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

#3

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>

dont forget to put the close link as suggested in one of the answers

别忘了按照其中一个答案中的建议放置关闭链接

标签：

相关文章