KIのソフトリンクス

写真を拡大表示方法のサンプル

1.JavaScriptで新ウインドを開き、指定したHTMLファイルにある画像を表示【IE5】

<IMG SRC="raion1.jpg" WIDTH=121 HEIGHT=123 BORDER=0 onClick="shasin1()" ALIGN="left">

function shasin1() {
f2 = window.open("kakudai2.html","aaa","scrollbars=no,width=540,height=520");
}

2.前項ではNN4が表示出来なかった。ハイパーリンク(href)設定でIE5・NN4ともＯＫ

<a href='#' onClick="shasin1()"> <IMG SRC="imei/pam7.gif" WIDTH=121 HEIGHT=123 BORDER=0 ALIGN="left"></a>

function shasin1() {
f2 = window.open("kakudai2.html","aaa","scrollbars=no,width=540,height=520");
}

3.文章の中にjavascriptを記述する場合

タイ国の現地法人に出向している時、クメール遺跡を数箇所訪れましたが、パノムルン遺跡へ行った時その近くのスパタナラー寺院と言う小さなお寺に、笑うライオン(クリックで画像表示)があった。その時は少し面白いと思った程度だったが一応写真を撮っておいた。後でこの写真を見たら見るたびに頬がゆるんでしまう何ともユーモアに溢れた画像で、旅先の通りすがらに撮った写真では私の一番の傑作です。

4.マウスオーバーで拡大表示（スタイルシートを使用）

<a href="javascript:;" onMouseOver="styovr()" onMouseOut="styout()">
<IMG SRC="raion1.jpg" WIDTH=121 HEIGHT=123 BORDER=0 ALIGN="left"></a>

<DIV ID="raion" STYLE="position:absolute; left:150; top:450; visibility:hidden">
<IMG SRC="raion2.jpg" WIDTH=300 HEIGHT=300>
</DIV>

function styovr() {
if(document.all)document.all("raion").style.visibility="visible";
if(document.layers)document.layers["raion"].visibility="visible";
}

function styout() {
if(document.all)document.all("raion").style.visibility="hidden";
if(document.layers)document.layers["raion"].visibility="hidden";
}

5.HTMLタグ画像表示(小画像と大画像は別のファイル）(JavaScript未使用の場合)

6.HTMLタグ画像表示(小画像は大画像をサイズ指定で表示例）(JavaScript未使用の場合)

7.HTMLタグ画像表示(小画像は大画像をサイズ指定で表示例）(JavaScript未使用、別ウインドウへ表示)

【HOME】　【実用編へ戻る】