ウェブページで画像を拡大するには

Question

私のウェブサイトを構築するために1つのテンプレートを使用しています。ユーザーがクリックしたときに新しいウィンドウに拡大して開くページに写真を追加したい。

私は検索でいくつかのコードを見つけましたが、私が直面している実際の問題は、このテンプレートが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> 

しかし、あなたは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。