マウスカーソルが画像に触れたときに画像を入れ替えるには
操作方法
画像ファイルに触れると画像が置き換わるといったことをしたい場合は、「イメージの入れ替え」機能を使ってください。
そのWebページに公開したい、最初に表示させる画像をベタベタ貼り付けておきます。
[書式]→[ビヘイビア]をクリックします。
[ビヘイビア]作業ウィンドウより[挿入]ボタンをクリックして、一覧から「イメージの入れ替え」をクリックします。
[イメージの入れ替え]ダイアログボックスが表示されました。
それぞれのイメージを選択して、入れ替えるイメージのURLを指定します。
すると、入れ替えるイメージのURLがこのように指定されました。
あらかじめ「イメージをプリロードする」にチェックが付いています。通常はこのままにしてください。
イメージを入れ替える際にマウスカーソルがその画像から離れた場合に元のイメージに戻したい場合、[MouseOutイベント時に元に戻す」にチェックを入れておいてください。
最後に[OK]ボタンをクリックします。
「MouseOutイベント時に元に戻す」にチェックをつけた場合、以下の図のようになります。
HTMLコードについて
ちなみに、コードは以下の通りになりました。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>新しいページ 1</title>
<script language="JavaScript">
<!--
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
function FP_swapImgRestore() {//v1.0
var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } }
doc.$imgSwaps=null; }
}
// -->
</script>
</head>
<body onload="FP_preloadImgs(/*url*/'travel/travel/picture/nfz03.jpg')">
<p>
<img border="0" src="travel/travel/picture/nfz02_small.jpg" width="120" height="90" id="img1" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'travel/travel/picture/nfz03.jpg')"></p>
<p>
<img border="0" src="travel/travel/picture/nfz04_small.jpg" width="120" height="90"></p>
<p> </p>
</body>
</html>スポンサーリンク
INDEX
問題は解決しましたか？
操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください！
2012年12月21日（日本時間）をもって、Expression Web 4はフリーソフトになりました。FrontPageユーザーの方もダウンロードして使ってみてください。 なお、Expression Web 4すでに購入された方も、問題が修正された無料版にアップグレードすることをお勧めします。
