マウスを乗せた時に画像を変化させるには？
[上に]
[前に]
[次に]
一巳
[E-Mail]
2000/03/01(水) 03:05:44
他の方の質問で似たかんじのはあったのですが、応用がきかないの
で、すみませんがどなたか教えてください。
大きな画像が五種類ありましてそれぞれsum01.jpg～sum05.jpgと
しました。そのうちのsum01.jpgをマップで四つに分けてそれぞれ
の場所にマウスが乗ったらそれぞれsum01とかsum02とかに画像を変
化させ、マウスが画像から離れたらsum05の画像に変わるように
したいのですが、どのようにしたらいいでしょうか。すみませんが
宜しくお願いします。m(__)m
みんこ
2000/03/01(水) 10:37:16
<SCRIPT LANGUAGE="JavaScript">
<!--
sum01 = new Image(); sum01.src = "sum01.jpeg";
sum02 = new Image(); sum02.src = "sum02.jpeg"; //以下続く
//マウス乗る
function noru(n){
document.gazou.src ="sum0" +n+ ".jpeg";
}
//マウス離れる
function hanareru(){
document.gazou.src ="sum05.jpeg";
}
//-->
</SCRIPT>
<img src="sum01.jpeg" name="gazou">
<map>
<area onMouseOver="noru(2)";return false;" onMouseOut="hanareru()"; return false;">
</map>
01の画像をマップで切って、マウス載せたら01を02に変えて、
外したら05に変わる。で、いいんですよね。
必要最低限しか書いてないからこのままじゃ動きません。
マップエリア指定とか何とか入れながらどうぞ。
一巳
[E-Mail]
2000/03/01(水) 13:24:54
みんこさんありがとうございます。
上記のスクリプトを利用してみたのですが、このままだと動かない
と思いますのですみませんが見ていただけますか？
<SCRIPT LANGUAGE="JavaScript">
<!--
sum01 =new Image();sum01.src = "top/sum01.jpeg";
sum02 =new Image();sum02.src = "top/sum02.jpeg";
sum03 =new Image();sum03.src = "top/sum03.jpeg";
sum04 =new Image();sum04.src = "top/sum04.jpeg"; //以下続く
//マウス乗る
function noru(n){
document.gazou.src ="sum0" +n+ ".jpeg";
}
//マウス離れる
function hanareru(){
document.gazou.src ="top/sum05.jpeg";
}
//-->
</SCRIPT>
これをヘッダーの中に記述しました。今回topというディレクトリ
の中に画像を入れました。
<IMG SRC="top/sum01.jpeg" NAME="gazou" ALIGN="BOTTOM">
<!--SELECTION--><MAP NAME="sum1Map1">
<AREA SHAPE="rect" COORDS="130,240,255,490" NOHREF area onMouseOver="noru(2)"
;return false;" onMouseOut="hanareru()" ; return false;">
<AREA SHAPE="rect" COORDS="0,240,130,490" NOHREF area onMouseOver="noru(2)"
;return false;" onMouseOut="hanareru()" ; return false;">
<AREA SHAPE="rect" COORDS="0,0,130,240" NOHREF area onMouseOver="noru(2)"
;return false;" onMouseOut="hanareru()" ; return false;">
<AREA SHAPE="rect" COORDS="130,0,255,240" NOHREF area onMouseOver="noru(2)"
;return false;" onMouseOut="hanareru()" ; return false;">
</MAP><IMG SRC="top/sum1.jpg" WIDTH="255" HEIGHT="480" ALIGN="BOTTOM"
BORDER="0" NATURALSIZEFLAG="3" USEMAP="#sum1Map1" ISMAP ALT="sum0">
これをbodyに入れました。マップを切ったらmapnameが勝手に付い
てしまいました。(sum1Map1)これはこのままでもいいのでしょうか
？それとリンクをさせたいわけではないのでNOHREFはそのままでも
いいのでしょうか？長くなってすみません。
みんこ
2000/03/01(水) 13:54:34
すいません、久々に使ったのでマップの書き方間違えました。
基本的なことは以下参照。
http://www.tohoho-web.com/html/map.htm
<MAP NAME="sum1Map1">
<AREA SHAPE="rect" COORDS="130,240,255,490" href="#" onMouseOver="noru(2)";return false;" onMouseOut="hanareru()";return false;">
<AREA SHAPE="rect" COORDS="0,240,130,490" href="#" onMouseOver="noru(3)";return false;" onMouseOut="hanareru()";return false;">
</MAP>
<IMG SRC="top/sum1.jpg" NAME="gazou" WIDTH="255" HEIGHT="480" usemap="# sum1Map1">
ですか。
NOHREF入れると動かなくなるような気がしますけど。
あと全角スペース入れたらそりゃ動きません。areaも二つあるし。
細かいところは自力で見直してください。私雑なんで。
な～んとなく、ソースが「ぺーじみる」っぽいような....？
一巳
[E-Mail]
2000/03/01(水) 14:16:00
素早いレスありがとうございます。
>な～んとなく、ソースが「ぺーじみる」っぽいような....？
そうです。凄いよくわかりますね～。 プロの方ですか？
殆ど初心者なので四苦八苦してます。
さきほどの方法をとったら画像が縦に二つならんでしまいました。
この画像をマップで変化させるという方法はマップの画像と
変化して表示する画像は別の位置に表示されてしまうものなん
でしょうか？ 同じ位置に表示させたいのですが…無理ですか？
出来るとしたらマップを作る画像というのはマウスが離れた時に
出てくるようにしたいsum05で作らなくてはならないのでしょうか？
なんか基本的なことで申し訳ありませんが教えていただけたら
うれしいです。(もしかして基本的なことで勘違いしてるかも…)
みんこさん上記のURLでマップの勉強してきます。ありがとうご
ざいます。m(__)m
みんこ
2000/03/01(水) 15:00:28
画像が二つ出るのはMAPタグの上と下に画像指定してるから。
下のだけでいいんです。書き直した方のソースを参考にしてください。
でもってページミルとかソフトでタグ手書きすると余計なこと
される可能性もあるので、できればこの部分だけは
テキストエディタで直すとかした方がいいのでは。
＞そうです。凄いよくわかりますね～。 プロの方ですか？
何のプロなんだ...ページミルは昔使ったことがあるのですが
まあその何ですか、特徴的なソースがアレなので止めました。
一巳
[E-Mail]
[HomePage]
2000/03/01(水) 16:09:38
書き直して下さったソースを参考に取りあえずアップしてみたの
ですが動かないです。やっぱりエディターで書き直さないと無理
でしょうか。
http://homepage1.nifty.com/prize/top.html
宜しければ見ていただけると助かります。m(__)m
てっきりＨＰ作成のプロの方かと思ってました。そういえば、友人
もページミルは余計なタグが入るから嫌いと言ってました。
でも私それしか持ってないのでそれに頼るしかないんですよ。(泣)
みんこ
[E-Mail]
[HomePage]
2000/03/01(水) 16:48:57
なんか、ソースコピーして見ると
sum01 =new Image();sum01.src = "top/sum01.jpeg";
とか
document.gazou.src ="sum0" +n+ ".jpeg";
とかの空白でエラー出てるみたいです。
化けてるのかも知れませんのでタブにするか消すかしたらうちでは動きましたけど。
あと実はまだ間違えてました。すいません。
×
onMouseOver="noru(2)";return false;"
onMouseOut="hanareru()";return false;"
↓
○
onMouseOver="noru(2);return false;"
onMouseOut="hanareru();return false;"
「"」一個多いがな...動くけど。
＞ てっきりＨＰ作成のプロの方かと
一応仕事ではやってるかも.......一応。
しかしホームページのプロかと言われると多分違います。
一巳
[E-Mail]
2000/03/01(水) 18:30:51
>sum01 =new Image();sum01.src = "top/sum01.jpeg";
>とか
>document.gazou.src ="sum0" +n+ ".jpeg";
>とかの空白でエラー出てるみたいです。
一応どこの空白かよくわからなかったので取りあえず一通り空白を
消してみました…でも動かないです…。消しすぎですか？
(new Imageとsum01.srcの前のスペースも半角ぶんだけ消してアップ
してみましたが変わらず…)
あとonMouseOverとOutそれぞれの"を一個ずつ消しました。
それでも私の場合動かないです～。むむむ…。困った…。
みんこさんの場合は消してみたら動いたんですよね～、出来れば
そのソースをコピーしていただけると嬉しいです。…いいなぁ。
一巳
2000/03/01(水) 18:49:03
凄い！ 動きました！ ありがとうございました。m(__)m
でも２枚の画像は出るんですけど…あと３枚が…なかなか。
また少し悩んでみます。
なんで白抜けしちゃうかなぁ～？？
一巳
[E-Mail]
2000/03/01(水) 21:54:32
[[解決]]
みんこ様、いろいろありがとうございました。
なんとかあと四枚まで画像が出るようになりました。
目的の画像は動くようになりましたので後一枚は自力で
なんとか頑張ってみます。本当にありがとうございました。
m(__)m
[上に]
[前に]
[次に]