ワサコレ戦記の備忘録-pone

pone_web ワサコレ・スマホ・タブレット・パソコン・クルマ

TOP >> スポンサー広告 >> JavaScrptを使ってサムネイル画像から拡大画像へTOP >> Web site >> JavaScrptを使ってサムネイル画像から拡大画像へ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
※古い記事を試すときは自己責任で!

この記事にリンクを貼る


Trackback: -- |  Comment: --

JavaScrptを使ってサムネイル画像から拡大画像へ

よくある縮小画像(サムネイル)をクリックすると拡大画像が表示されるページ
自分の備忘録のために書き残します。


拡大写真
写真1写真2写真3


CODEはこうなります。
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="right" colspan="3"><img src="http://blog-imgs-46.fc2.com/r/e/c/recoboo/UPDATE_001.png" width="500" height="313" alt="拡大写真" name="ph01"></td>
</tr>
<tr>
<td height="120" align="center"><a href="javascript:document.ph01.src = 'http://blog-imgs-46.fc2.com/r/e/c/recoboo/UPDATE_001.png'; void(0);"><img src="http://blog-imgs-46.fc2.com/r/e/c/recoboo/UPDATE_001.png" width="160" height="100" alt="写真1" border="0"></a></td>
<td height="120" align="center"><a href="javascript:document.ph01.src = 'http://blog-imgs-46.fc2.com/r/e/c/recoboo/UPDATE_002.png'; void(0);"><img src="http://blog-imgs-46.fc2.com/r/e/c/recoboo/UPDATE_002.png" width="160" height="100" alt="写真2" border="0"></a></td>
<td height="120" align="center"><a href="javascript:document.ph01.src = 'http://blog-imgs-46.fc2.com/r/e/c/recoboo/UPDATE_003.png'; void(0);"><img src="http://blog-imgs-46.fc2.com/r/e/c/recoboo/UPDATE_003.png" width="160" height="100" alt="写真3" border="0"></a></td>
</tr>
</tbody>
</table>


Lightboxを使った画像の拡大縮小はこちらの記事から

関連記事:
【FC2】Lightbox v2.04 導入編 -1-
【FC2】Lightbox v2.04 カスタマイズ編 -2-

※古い記事を試すときは自己責任で!
Web siteの関連記事

この記事にリンクを貼る


TOP > スポンサー広告 > JavaScrptを使ってサムネイル画像から拡大画像へTOP > Web site > JavaScrptを使ってサムネイル画像から拡大画像へ

この記事に対するコメント

コメントの投稿

Secret

トラックバック

トラックバックURL
→http://recoboo.blog28.fc2.com/tb.php/203-ac85cf65
この記事にトラックバックする(FC2ブログユーザー)

ブログパーツ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。