html - 如何放大网页上的图像

Question

我正在使用一个模板来构建我的网站。我想在页面上添加一些图片，当用户单击它们时，这些图片会放大并在新窗口中打开。

我通过搜索找到了一些代码片段，但我面临的真正问题是这个模板是使用 CSS 构建的，我很少接触到它。这些代码片段需要将代码放入 HTML 正文中，而我无法使用此模板在此处执行此操作。

这是我正在使用的样式表，并使用它制作了所有页面。如何将几张图片添加到页面，就像点击它们时在新窗口中放大一样。

* {
    margin: 0;
    padding: 0;
}
a:link {
color: #506F09;
}
body {
background: url(images/backgr.jpg) top left no-repeat #2D2E2B;
}
#tot{
position:relative;
overflow:hidden;
z-index:0;
}
#antet{
background:#2D2E2B;
height:100px;
border-bottom:#F7FDE1 solid 7px;
margin-left: 157px;
}
.butonas1{
background:url(images/butonas3.png) left no-repeat;
height:62px;
width:125px;
position:absolute;
top:-36px;
font-family: Arial, Helvetica, sans-serif;
color:;
font-size:22px;
line-height:62px;
text-align:center;
font-weight:bold;
}
.butonas1 a:link{
text-decoration:none;
color:#2D2E2B;
height:62px;
width:125px;
}
.butonas1 a:visited{
text-decoration:none;
color:#2D2E2B;
height:62px;
width:125px;
}
.butonas1 a:hover{
text-decoration:none;
color:#2D2E2B;
}
.butonas2{
background:url(images/butonas1.png) left no-repeat;
height:62px;
width:125px;
position:absolute;
top:-36px;
font-family: Arial, Helvetica, sans-serif;
color:#F7FDE1;
font-size:22px;
line-height:62px;
text-align:center;
font-weight:bold;
}
.butonas2 a:link{
text-decoration:none;
color:#F7FDE1 ;
}
.butonas2 a:visited{
text-decoration:none;
color:#F7FDE1 ;
}
.butonas2 a:hover{
background:url(images/butonas3.png) left top no-repeat;
text-decoration:none;
height:62px;
width:125px;
position:absolute;
top:0;
left:0;
color:#2D2E2B;
}
#logo_sus{
background:url(images/logo1.png) left no-repeat;
height:178px;
width:171px;
position:absolute;
left:274px;
top:60px;
}
#bara {
position:relative;
height:62px;
}
#container{
width:408px;
background:url(images/sus.jpg) top center no-repeat #F7FDE1;
float:left;
margin-left:470px;
display:inline;
z-index:1;
}
#jos {
background:url(images/jos.jpg) no-repeat bottom center;
width:408px;
height:30px;
z-index:1;
 }
.text{
width:380px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align:justify;
margin:30px 12px;
} 
.titlu {
color:#506F09;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
}
.titlu2 {
color:#506F09;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:22px;
font-weight:bold;
padding-left:170px;
padding-top:20px;
}
.clear{
height:1px;
clear:both;
}
#bottom {
background:url(images/bara.jpg) bottom left no-repeat;
height:30px;
width:556px;
float:left;
margin-left:340px;
margin-top:30px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#F7FDE1;
text-align:right;
display:inline;
z-index:1;
}
#bottom span{
padding-right:25px;
}
#jos2 {
background:url(images/jos2.jpg) no-repeat bottom center;
width:563px;
height:53px;
z-index:1;
 }

Answer 1

How do I add few pictures to a page like when they are clicked, are enlarged in a new window.

你不需要 CSS 来实现它。只需在标记中的图像周围添加一个 anchor :

<a href="/images/image1_large.jpg" title="Open picture in new window" target="_blank">
  <img src="/images/image1_small.jpg" alt="Image 1" />
</a>

但是如果您喜欢 STRICT 文档类型，或者如果您相信您的读者会使用因此设计的浏览器功能，我建议您在同一窗口中打开图像；用户始终可以使用鼠标中键或右键单击来覆盖它:

<a href="/images/image1_large.jpg" title="Open picture in this window">
  <img src="/images/image1_small.jpg" alt="Image 1" />
</a>

要在弹出窗口中打开链接，您需要调用 JavaScript window.open();例程，如解释的那样e.g. on this page .