如何製作圖像以便點擊時在同一頁面上打開較大圖像（相同圖像）？

我以前在藝術網站上看到過這種做法，但通常縮略圖會導致出現新頁面。我需要圖像在同一頁面上導向更大的圖像，居中。以下是該頁面的屏幕截圖，以便您瞭解我的意思：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

如何製作圖像以便點擊時在同一頁面上打開較大圖像（相同圖像）？

回答

相關問題