クリックするとサムネール画像が拡大され高解像度データに変わるようにする

■動作ブラウザ
Internet Explorer Netscape Navigator
4.0x 4.5 5.0x 5.5 6.0 4.x 6.0
Windows ○ - ○ ○ ○ × ○
Macintosh ○ ○ ○ - - × ○
UNIX - - - - - × ○

解　　説 　クリックするとサムネール画像が拡大され高解像度データに変わるようにするにはonClickイベントをimgタグ内に記述しイベントを検知します。この時に画像オブジェクトと表示する画像URL、サイズなどを関数に渡します。関数側では現在の画像サイズを調べてサムネールならば高解像度データに、高解像度データならばサムネールに戻すようにしています。if命令を使って記述するのが一般的ですが、三項演算子を使えばif命令を使うよりも半分程度の行数でシンプルに記述できます。
コード <html> <head> <title>クリックするとサムネール画像が拡大され高解像度データに変わるようにする</title> <script language="JavaScript"><!-- function setImg(iObj,sSrc,sX,sY,iSrc,iX,iY) { flag = (iObj.width == sX); iObj.width = (flag) ? iX : sX; iObj.height= (flag) ? iY : sY; iObj.src = (flag) ? iSrc : sSrc; } // --></script> </head> <body> クリックするとサムネール画像が拡大され高解像度データに変わります。<br><br> <img src="icon1.jpg" width="32" height="24" onClick="setImg(this,'icon1.jpg',32,24,'image1.jpg',320,240)"><br> <img src="icon2.jpg" width="32" height="24" onClick="setImg(this,'icon2.jpg',32,24,'image2.jpg',320,240)"><br> <img src="icon3.jpg" width="32" height="24" onClick="setImg(this,'icon3.jpg',32,24,'image3.jpg',320,240)"><br> </body> </html>

■サンプルスクリプトを実行する　>>実行
 ■各ブラウザでの動作結果を見る　>>View!