マウスのイベント効果について
-
0 名前： きゅう ： 2006/10/04（水） 00:43 ID:E0cFWLbU
- 1ページないでマウスイベント効果を複数つけたいのですが
画像b,c,d,f,g,hにマウスオンすると画像eに反映されており
うまい具合にできず困っていました。
画像b,c,dに関しては画像aに反映し画像f,g,hに関しては画像eに反映させたいのですが
どのようなhtmlになるのでしょうか？
現在は以下の内容でやっております。
<SCRIPT language="JavaScript">
<!--
function myChgPic(myPicURL){
document.images["myBigImage"].src = myPicURL;
}
// -->
</SCRIPT>
<IMG src="画像a" width="・・・" height="・・・" name="myBigImage">
<BR>
<A href="javascript:void(0)" onmouseover="myChgPic('画像b')"onmouseout="myChgPic('画像a')">
<IMG src="画像b" width="・・・" height="・・・" border="0"></A>
<A href="javascript:void(0)" onmouseover="myChgPic('画像c')"onmouseout="myChgPic('画像a')">
<IMG src="画像c" width="・・・" height="・・・" border="0"></A>
<A href="javascript:void(0)" onmouseover="myChgPic('画像d')"onmouseout="myChgPic('画像a')">
<IMG src="画像d" width="・・・" height="・・・" border="0"></A></TD>
<BR>
<IMG src="画像e" width="・・・" height="・・・" name="myBigImage">
<BR>
<A href="javascript:void(0)" onmouseover="myChgPic('画像f')"onmouseout="myChgPic('画像e')">
<IMG src="画像f" width="・・・" height="・・・" border="0"></A>
<A href="javascript:void(0)" onmouseover="myChgPic('画像g')"onmouseout="myChgPic('画像e')">
<IMG src="画像g" width="・・・" height="・・・" border="0"></A>
<A href="javascript:void(0)" onmouseover="myChgPic('画像h')"onmouseout="myChgPic('画像e')">
<IMG src="画像h" width="・・・" height="・・・" border="0"></A></TD>
-
1 名前： 匿名 ： 2006/10/04（水） 00:43 ID:HnVmavZ4
- ざっと見たかんじですが、onmouseoverとonmouseoutが逆じゃないですか？
-
2 名前： きゅう ： 2006/10/04（水） 00:43 ID:E0cFWLbU
- 画像a,eには画像を表示してあることを前提に・・・
・画像b,c,dにマウスオーバー＝画像aの位置に画像b,c,d拡大表示
・画像b,c,dマウスアウトー＝画像aの位置に画像a表示
・画像f,g,hにマウスオーバー＝画像eの位置に画像f,g,h拡大表示
・画像f,g,hマウスアウトー＝画像eの位置に画像e表示
このような形になります。
javascriptを1ページで複数使用する形に
なると思うのですが・・・
-
3 名前： sasame ： 2006/10/04（水） 00:43 ID:snaaEut2
- a用とe用で分けて作ってみた場合、同じ現象になりますか？
同じnameが2つあるのが原因のような気がしますが…
と、JavaScriptド素人が言ってみる。
-
4 名前： きゅう ： 2006/10/04（水） 00:43 ID:E0cFWLbU
- なんとか想い通りになりました＾＾
いろいろ調べてるうちに疑問に思ってことがあり
1つ質問なのですが画像の先読込みなどは必要なものなのでしょうか？
どれくらい効果があるものかもわからないので
わかる方いましたら宜しくお願いします。
-
5 名前： 牛若 ： 2006/10/04（水） 00:43 ID:55MunpYS
- 画像のサイズにもよります。
軽いものならいまどきの環境であれば問題ないのでは。
しかし、onmouseoverなどの瞬時に変わることを期待する
イベントの場合、先読みしといた方が無難です。
サンプルはネットにいくらでもあります。
-
6 名前： きゅう ： 2006/10/04（水） 00:43 ID:E0cFWLbU
- ありがとうございます。
いろいろ勉強しながら頑張ってみます！！
-
7 名前： きゅう ： 2006/10/04（水） 00:43 ID:E0cFWLbU
- プレロードの質問なのですが
1つのロールオーバーは可能なのですが
function setImgSrc(imgURL)
{
document.myIMG.src = imgURL;
に関して複数設定する場合（setImgSrc1・myIMG1）
などどのような記述になるのでしょうか？
以下の記述をしています
<SCRIPT language="JavaScript">
<!--
fName = ["***.jpg","***.jpg","****3.jpg","****4.jpg","***5.jpg","****6.jpg","****7.jpg","****8.jpg"];
prIMG = new Array();
for (i=0; i<fName.length; i++)
{
prIMG[i] = new Image();
prIMG[i].src = fName[i];
}
function setImgSrc(imgURL)
{
document.myIMG.src = imgURL;
}
// -->
</SCRIPT>
