Question

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

我通过搜索找到了一些代码，但我面临的真正问题是这个模板是使用CSS构建的，我的曝光率非常低。这些代码片段需要将代码放在HTML体中，我无法使用此模板在此处执行此操作。

这是我使用的样式表＆amp;使所有页面都使用它。如何在页面上添加几张图片，就像点击它们一样，在新窗口中放大。

* {
    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

如何在页面上添加少量图片，就像点击它们一样，在新窗口中放大。

您不需要CSS来实现这一目标。只需在标记中的图像周围添加一个锚点：

<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 doctype，或者您信任您的读者使用这样设计的浏览器功能，我建议您在同一窗口中打开图像;用户可以使用鼠标中键或右键单击覆盖：

<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所述。

如何在网页上放大图像

1 个答案: