画像をクリックで拡大させる
限られたスペースに縮小して貼った画像をクリックでダウンロードさせて、拡大してみせることができます。
ここに、『./sample/tahiti.jpg 』というjpgファイルが用意してありますが、このファイルの大きさは 640x512 ピクセルです。ブログではちょっとこのまま貼るわけにもいきません。
そこで、サイズを指定したIMGタグを、画像URLへ直リンクさせるアンカータグ(Aタグ)の中に 入れ子にしましょう。
<img src="./sample/millenario.jpg" width="160" height="120" alt="タヒチの青空">
</a>
このソースは、青字部分でサイズを指定して貼り付けますが、その画像に元画像をリンクさせていますので、新しいウィンドウにダウンロードして大きな画像を見せることができます。
※ウィンドウのサイズを指定しないで開いているので、画像が大きすぎるなど、場合によっては
ブラウザで適当に縮小されます。
もし、本当に原寸の画像サイズで表示させたい場合は、次のようにしてもよいでしょう。
<a href="javascript:void(0)" onclick=" window.open('http://html.appelle.jp/sample/tahiti.jpg', '_blank', 'width=660,height=532,scrollbars=no,toolbar=no,menubar=no,directories=no,location=no'); "> <img src="http://html.appelle.jp/sample/tahiti.jpg" width="160" height="120" border="0">
</a>
このサンプルは、JavaScriptで新しいウィンドウを開きます。詳細は、次のページを参考にしてください。→大きさを指定してウィンドウを開く
このソースを表示させると、次のようになります。実際にクリックして、先のサンプルとの違いを 比べてみてください。
『width=660,height=532』の部分で ウィンドウのサイズを 指定しています。画像のURLに直リンクして開く場合、勝手にブラウザで上下に余白が取られますので、縦横共に原寸の画像サイズよりも 20~30 ピクセル程度大きな 値を指定してください。
また、『scrollbars=no,toolbar=no,menubar=no,directories=no,location=no』の部分で、スクロールバーやメニューバーなどを 非表示にしています。これは、お好みで指定してください。指定できるオプションは、次のページを参考にしてください。→window.open() のスタイル指定一覧
ランキングに参加中です! お役に立てたらクリックをお願いします→

コンピュータとインターネット > データ形式 > HTML > リファレンス