웹 페이지의 이미지를 확대하는 방법

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

는 새 창에서 확대된다.

이를 달성하려면 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> 

그러나 당신은 엄격한 문서 타입을 좋아하거나, 따라서 설계 브라우저 기능을 사용하여 독자를 신뢰하는 경우, 나는 같은에서 이미지를 엽니 다 추천 할 것입니다 경우 창문; 사용자가 항상 중산층 또는 오른쪽 마우스 클릭으로 그것을 대체 할 수 있습니다 :

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

그리고 팝업 창에서 링크를 열려면, 당신은 자바 스크립트 window.open()를 호출 할 필요가; 루틴은 설명대로 e.g. on this page입니다.