TOPページ >  画像を表示する/動画/サウンド > 画像をクリックで拡大させる

画像をクリックで拡大させる

限られたスペースに縮小して貼った画像をクリックでダウンロードさせて、拡大してみせることができます。

ここに、『./sample/tahiti.jpg 』というjpgファイルが用意してありますが、このファイルの大きさは 640x512 ピクセルです。ブログではちょっとこのまま貼るわけにもいきません。

そこで、サイズを指定したIMGタグを、画像URLへ直リンクさせるアンカータグ(Aタグ)の中に 入れ子にしましょう。

<a href="./sample/tahiti.jpg" target="_blank" title="タヒチの青空">
<img src="./sample/millenario.jpg" width="160" height="120" alt="タヒチの青空">
</a>

このソースは、青字部分でサイズを指定して貼り付けますが、その画像に元画像をリンクさせていますので、新しいウィンドウにダウンロードして大きな画像を見せることができます。
※ウィンドウのサイズを指定しないで開いているので、画像が大きすぎるなど、場合によっては ブラウザで適当に縮小されます。

↓Clickで拡大↓
タヒチの青空

もし、本当に原寸の画像サイズで表示させたい場合は、次のようにしてもよいでしょう。

↓Clickで拡大↓<br>
<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で新しいウィンドウを開きます。詳細は、次のページを参考にしてください。→大きさを指定してウィンドウを開く

このソースを表示させると、次のようになります。実際にクリックして、先のサンプルとの違いを 比べてみてください。

↓Clickで拡大↓

width=660,height=532』の部分で ウィンドウのサイズを 指定しています。画像のURLに直リンクして開く場合、勝手にブラウザで上下に余白が取られますので、縦横共に原寸の画像サイズよりも 20~30 ピクセル程度大きな 値を指定してください

また、『scrollbars=no,toolbar=no,menubar=no,directories=no,location=no』の部分で、スクロールバーやメニューバーなどを 非表示にしています。これは、お好みで指定してください。指定できるオプションは、次のページを参考にしてください。→window.open() のスタイル指定一覧

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
バックグラウンドでサウンドを演奏する(BGM)
インラインフレームを表示する
プラグインで動画やサウンドを再生する
文字や文章、テーブルなどの背景画像の位置を指定する
文章の背景に画像を固定表示する
文章の背景に指定した画像を繰返し表示する
テーブルに画像やボタンを表示する
文章の背景画像を指定する
画像をクリックで拡大させる
画像への文字の回り込みを解除する
画像と文字の上下間隔を指定する
画像と文字の左右間隔を指定する
画像の左右に文字を回り込ませる
画像の表示位置を指定する
画像を表示させる
画像にリンクを貼る
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス