使用CSS来制作点击缩略图显示全尺寸

单击时，需要在页面中间显示全尺寸图像，并在其下方显示文本。缩略图需要在mouseover上稍微增加一些，我已经编码了。我的主要问题是让全尺寸的图像显示。

这是我有：

 <!DOCTYPE html> 
<html> 
    <head> 
     <title>Homework 3, CSS Styles</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <style> 
    img:hover 
     { 
     transform: scale(1.250,1.250); 
       padding:5px; 
     } 
    #right 
     { 
     position:absolute; 
     top:50px; 
     right:100px; 
     left:250px; 
      bottom:200px; 
      } 

    </style> 
    <script> 
    function changeSize(id) 
    { 
    var mainImage=document.getElementById("mainImage"); 
    var someImage=document.getElementById(id); 
    mainImage.src=someImage.src; 
    } 
    </script> 

    </head> 
    <body>  
     <div align="center"><img id="mainImage" style="max-width:auto; max-height:auto" align="middle" src="blank.jpg" 
alt="blank"/></div> 
     <table> 
      <tr> 
       <td><span style="cursor:pointer"><img style="max-width:70px; max-height:70px" id="cluster" src="cluster1.png" 
alt="cluster" onClick="changeSize(id)"/></span></td> 
      </tr> 
      <tr> 
       <td><span style="cursor:pointer"><img style="max-width:70px; max-height:70px" id="gas" 
src="gas1.png" alt="gas" onClick="changeSize(id)"/></span></td> 
      </tr> 
      <tr> 
       <td><span style="cursor:pointer"><img style="max-width:70px; max-height:70px" 
id="launch" src="launch1.jpg" alt="launch" onClick="changeSize(id)"/></span></td> 
      </tr> 

     </table> 
    </body> 
</html>

我不知道它是这样做的最好办法，所以建议表示赞赏那里。

来源

2013-09-28 falkon114

听起来像你对我正在寻找一个[收藏]（http://lokeshdhakar.com/projects/lightbox2/） –

应该能够使用类似的代码添加到您：悬停：激活（点击时变为激活状态）'img：active { transform：scale（1.50,1.50）; padding：5px; }'有一些绝对的属性等... – technosaurus

目前尚不清楚你到底想要做什么，但你应该将你的脚本封装到onload处理程序中。否则，您将不会获得对DOM元素的引用。例如：

var boot = function() { 
    var main=document.getElementById("mainImage"); 
    var someImage=document.getElementById("someImage"); 
    main.src=someImage.src; 
} 
var changeSize = function() { 

} 

if (window.addEventListener) { 
    window.addEventListener('load', boot, false); 
} else if (window.attachEvent) { 
    window.attachEvent('onload', boot); 
}

来源

2013-09-28 21:01:07 Krasimir

对不起。所以我在页面左侧有三个缩略图显示在加载中。当用户点击图片时，它会在页面中间显示全尺寸图片，并在其下方放置一些文字，并将三张缩略图保留在左侧。 – falkon114

使用CSS来制作点击缩略图显示全尺寸

回答

相关问题