如何制作图像以便点击时在同一页面上打开较大图像（相同图像）？

我以前在艺术网站上看到过这种做法，但通常缩略图会导致出现新页面。我需要图像在同一页面上导向更大的图像，居中。以下是该页面的屏幕截图，以便您了解我的意思：http://i.imgur.com/uhxEJmQ.jpg?1我会想象这有一个相当简单的解决方案。在此先感谢您的帮助！如何制作图像以便点击时在同一页面上打开较大图像（相同图像）？

这里是我的代码：

<head> 
<style type="text/css"> 
<!-- 

nav {width:100%;display:block;} 
nav ul {list-style-type:none;margin:0; 
padding:0;text-align:center;background-color:#222419} 
nav li {display:inline-block;background-color:#222419;} 
nav a {line-height:35px; color:white; padding: 0 30px; font-size:18px; 
    font-family:Arial, sans-serif;background-color:#222419;} 
nav a:hover {text-decoration:none} 

a{float:left; 
    margin-right:58px; 
    margin-left:58px; 
    display:inline-block; 
    color:#000; 
    text-decoration:none;} 

.head {width:100%} 
.logo {display:inline-block;padding:10px;font-family:Arial,sans-serif;} 
--> 
</style> 
<meta charset="utf-8"/> 
<title>DrawYourPets.com</title> 
</head> 

<body> 

<header> 
<nav> 

<div style="text-align:center"> 
<title="DrawYourPetsBanner"> 
<img src="DrawYourPetsBanner2.jpg" border="0" alt="DrawYourPetsBanner2"> 
</div> 

<div> 
<ul> 
<li><a href="drawyourpets2.html"><strong>HOME</strong></a></li> 
<li><a href="drawings.html"><strong>DRAWINGS<strong></a></li> 
<li><a href="store.html"><strong>STORE</strong></a></li> 
<li><a href="contact.html"><strong>CONTACT</strong></a></li> 
</ul> 
</div> 

</nav> 

</header> 

<section> 
<aside> 
</aside> 

<article> 
<br> 
<br> 

<div style="text-align:center" class="head"> 
<div class="logo"> 
<figure> 
<img src="Wesson.jpg" height="300px" weight="300px" alt="Wesson"/> 
<figcaption>Wesson, 8.5'' x 11''</figcaption> 
</figure> 
</div> 

<div class="logo"> 
<figure> 
<img src="Stanley.jpg" height="300px" weight="300px" alt="Stanley"/> 
<figcaption>Stanley, 13'' x 15''</figcaption> 
</figure> 
</div> 

<div class="logo"> 
<figure> 
<img src="Archibald.jpg" height="300px" weight="300px" alt="Archibald"/> 
<figcaption>Archibald, 13'' x 15''</figcaption> 
</figure> 
</div> 
<br> 
<div class="logo"> 
<figure> 
<img src="Maggie.jpg" height="250px" weight="250px" alt="Maggie"/> 
<figcaption>Maggie, 16'' x 13''</figcaption> 
</figure> 
</div> 

</div> 

</article> 

</section> 

<footer> 
</footer> 

</body> 
</html>

来源

2015-01-08 HappyHands31

见插图。有一种方法可以让你自己做，但是对于你来说，正确的方法是。 – panther

您是否正在寻找像这样的效果，但连接到鼠标的点击？ http://jsfiddle.net/rutevLfk/2/？ – aberna

这是你在找什么fiddle

<a href="#large"><img src=" "></a> 

<img id="large" src=" " >

来源

2015-01-08 08:19:33 Akshay

nb。点击并不会导致一个更大的图像，居中，在OP所要求的同一页面上... – SW4

@ SW4它似乎对我来说很好，一旦它被点击，页面将向下滚动到部分其中id大的图像位于 – Akshay

你或许可以用onHover选项鼠标事件来呈现图像的放大形状。

来源

2015-01-08 08:26:12 Saurabh

需要点击发生，而不是悬停 – HappyHands31

如何制作图像以便点击时在同一页面上打开较大图像（相同图像）？

回答

相关问题