スポンサーサイト

一定期間更新がないため広告を表示しています

   拍手する



  • 2014.03.26 Wednesday
  • -
  • -
  • -
  • -
  • -
  • by スポンサードリンク

サムネイル画像をポップアップで拡大表示する

JUGEMテーマ:JUGEM

このブログの更新をサボっている間に、サイズを指定してラジオボタンを
クリックするだけで、いとも簡単にサムネイルを作成できる機能が、
いつの間にか JUGEM に搭載されていました。

簡単にサムネイルが作成できる。


とても便利で助かる機能ですが、サムネイルをクリックすると、
残念なことに同一ウィンドウ内に画像を読み込んでしまいます。

ハイデルベルグの街並み (JUGEM 標準のサムネイル)

【タグ】
<a href="画像ファイルの場所"><img src="サムネイルファイルの場所" alt="画像の代わりのテキスト" class="pict" width="サムネイルの幅" height="サムネイルの高さ"></a>


別ウィンドウで表示させるために、タグに target="_blank" を追加しましたが、
今度は表示された別ウィンドウの余白が気になります。

ハイデルベルグの街並み (target=" _blank" を追加したサムネイル)

【タグ】
<a href="画像ファイルの場所" target="_blank"><img src="サムネイルファイルの場所" alt="画像の代わりのテキスト" class="pict" width="サムネイルの幅" height="サムネイルの高さ"></a>


ポップアップの大きさを固定した別ウィンドウを表示させるためには、
タグの記述をどのようにすればいいでしょう?


バチカン市国の夜景

【タグ】
<a href="画像ファイルの場所" target="_blank" onClick="window.open('画像ファイルの場所','','width=ウインドウの幅,height=ウインドウの高さ');return(false)"><img src="サムネイルファイルの場所" alt='画像の代わりのテキスト' class="pict" width="サムネイルの幅" height="サムネイルの高さ"></a>


このタグでは、枠固定でスクロールバーなしの別ウィンドウ
JavaScript表示されますので、ブラウザ設定で
JavaScript が無効の場合は、タグの
赤字部分が実行されません。

その場合、画像自体は別ウィンドウで表示されますが、
ウインドウの枠固定は解除されます。

【ワンポイント】
ウインドウのサイズ指定は、実際の画像サイズに
16〜18px 足したぐらいがちょうどいいと思います。(Firefox の場合)

2000ピクセル以上のフリー写真素材集様より
素敵な画像を使わせていただきました。ありがとうございました。


【更新履歴】
2009/01/17 新規作成
2011/04/17 修正

   拍手する




スポンサーサイト

   拍手する



  • 2014.03.26 Wednesday
  • -
  • -
  • -
  • -
  • -
  • by スポンサードリンク

コメント
コメントする








   
この記事のトラックバックURL
トラックバック

profile

search this site.

recommend

links

categories

archives

ブログパーツ

Creative Commons

この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
Creative Commons License

ケーキ・和菓子

RSS / Atom

mobile

qrcode

PR


流行ったダイエット