javaを使って、ある1つの画像にマウスを乗せると、
他の場所にある画像2つが同時に入れ替わるという事を行いたいのですが
どうしても上手くいきません。
例えば・・・
┌─────┐
│◇画像A◇ │
└─────┘
┌─────┐
│○画像B○ │
└─────┘
┌─────┐
│☆画像C☆ │
└─────┘
とあるとしたら、
画像Aにマウスを乗せた場合、画像Cと画像Dが
他の画像になるようにしたいのです。
┌─────┐
│◇画像A◇ │←これにマウスオン
└─────┘
┏━━━━━┓
┃●画像B● ┃
┗━━━━━┛←画像Bと画像Cが
┏━━━━━┓←同時に他の画像に変わる
┃★画像C★ ┃
┗━━━━━┛
画像Aはマウスを乗せても変化は無いままで、
画像Bと画像Cは異なる画像です。
マウスを画像Aから放したら、元の画像に戻るようにしたいと考えています。
さらに、同ページ内に複数使用したいのです。
~~~~~~~~~~~~~~~~~~~~~
if (document.images) {
var img0 = new Image();
img0.src = "○画像B○";
var img1 = new Image();
img1.src = "●画像B●";
function On(name) {
if (document.images) {
document.images['ネーム'].src = eval(name + '.src');}}
function Off() {
if (document.images) {
document.images['ネーム'].src = img0.src;}}
を応用して、どうにかならないかな…と思ったのですが、
どうにもなりませんでした。
もしかしたら、応用のやり方が間違えているのかもしれません。
あまり詳しくないので・・・。
どこを探してもサンプル等見つからず、困っています。
どなたか教えて下さい。どうぞ宜しくお願いします。
No.2ベストアンサー
- 回答日時:
なるべく簡単に一般化したつもりだけれど長くなってしまった。
(チェック等は省略)画像同士の位置関係に規則性があるのか不明なので、全部idで処理しています。
同時に入れ替える対象画像数の指定なし。
マウスオンの対象も複数設定可能。(入替え対象画像の重複可)
(画像の先読みはしていません。必要ならaddのあたりで…)
設定は、Changer.add("マウスオン画像のid", ["変更画像1のid, 変更url", ・・・・]) の要領で、設定を削除する時は、Changer.remove("画像id")
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<div>
trigger1
<img id="trigger1" src="btn1.gif" alt=""><br>
trigger2
<img id="trigger2" src="btn1.gif" alt="">
</div>
<hr>
<div>
target<br>
<img id="target1" src="A.jpg" alt="C by1">
<img id="target2" src="B.jpg" alt="C by1">
<img id="target3" src="C.jpg" alt="C by1 & 2">
</div>
<script type="text/javascript">
<!--
/*@cc_on@*/
var Changer = {
item:{},
flag:true,
add:function(id, data){
if (this.flag) this.init();
var i, e, d, ary = this.item[id] || [];
for (i=0; i<data.length; i++){
d = data[i].split(",");
e = document.getElementById(d[0]);
if (e && e.nodeName=="IMG"){
d[0] = e;
d[2] = e.src;
ary.push(d);
}
}
if (ary.length) this.item[id] = ary;
},
remove:function(id){
var e = this.item;
if (e[id]) delete e[id];
},
checker:function(e){
/*@if(1)
var t=e.srcElement, r=e.toElement;
@else @*/
var t=e.target, r=e.relatedTarget;
/*@end @*/
if (t && t.nodeName=="IMG") this.change(t.id,"out");
if (r && r.nodeName=="IMG") this.change(r.id,"on");
},
change:function(id, type){
var e, i, ary = this.item[id];
if (ary){
for (i=0; i<ary.length; i++) ary[i][0].src = ary[i][type=="on"?1:2];
}
},
listener:function(){
return function(e) {Changer.checker.call(Changer, e);}
},
init:function(){
document. /*@if(1)attachEvent('on' + @else @*/addEventListener(/*@end @*/ 'mouseout', Changer.listener(), false);
this.flag = false;
}
};
//*** 動作の設定 ***
Changer.add("trigger1",["target1,B.jpg","target2,C.jpg"]);
//Changer.remove("trigger1");
Changer.add("trigger1",["target3,D.jpg"]);
Changer.add("trigger2",["target3,E.jpg"]);
//-->
</script>
</body>
</html>
ご回答ありがとうございます。
で、できました! 理想通りに画像が変わります!
嬉しくて、意味なく何度も画像にマウス乗せて遊んでます(笑)
できた時はかなり感動しました。
もう3週間位パソコンとにらめっこして悩んでいたので・・・。
本当に感謝しています。ありがとうございます!♪\(^▽^)
No.1
- 回答日時:
画像が以下の5点あると仮定します
A.JPG
B1.JPG(画像Bの元)
B2.JPG(画像Bの変身)
C1.JPG(画像Cの元)
C2.JPG(画像Cの変身)
以下サンプル
<html>
<head>
<title>TEST</title>
<script language="JavaScript"><!--
num = 0;
function change(i){
if(i==0){
document.myIMG1.src = "./B2.JPG";
document.myIMG2.src = "./C2.JPG";
}else{
document.myIMG1.src = "./B1.JPG";
document.myIMG2.src = "./C1.JPG";
}
}
// --></script>
</head>
<body>
<img src="./A.JPG" border="0" onMouseover="javaScript:change(0)" onMouseout="javaScript:change(1)"><br>
<img src="./B1.JPG" name="myIMG1" border="0"><br>
<img src="./C1.JPG" name="myIMG2" border="0"><br>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
WEBページ立ち上げ時に1回のみ...
-
アクセス毎に画像を順番に表示...
-
画像の重なりの順序を代える方...
-
jQueryスライドショー画像への...
-
透過pngの透明部分以外をクリッ...
-
画面の表示位置を指定させて表...
-
1枚の画像をクリックすると複数...
-
textareaに画像を表示したい
-
■ポップアップウィンドウをIEで...
-
javascript ポインタ周辺のスポ...
-
マウスを乗せると、画像ファイ...
-
ボタンをクリックした時に、キ...
-
MAX関数を使ってからLEFT JOIN...
-
c++std::string型をTCHARに変換...
-
条件分岐でキーが入力されてい...
-
removeAttribute()メソッドで削...
-
iframe内のリンクが飛ばないの...
-
リンクで画像を置き換えたい
-
Excel VBA マクロ 画像(...
-
ラズパイでno module named zbar
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
1枚の画像をクリックすると複数...
-
画像の重なりの順序を代える方...
-
透過pngの透明部分以外をクリッ...
-
WEBページ立ち上げ時に1回のみ...
-
Javascriptで指定した日付と時...
-
Gifアニメ、最後のコマに行った...
-
画像をフォルダに入れれば表示...
-
1枚の画像をクリックして複数の...
-
JavaScript スライドの画像にリ...
-
画像のランダム表示、及び画像...
-
画像ランダム表示、しかしダブ...
-
表と裏がある1枚の画像を回転す...
-
オンマウスで画像が切り替わっ...
-
オンマウスで、画像切り替え+...
-
jQueryスライドショー画像への...
-
画面の表示位置を指定させて表...
-
画像の切り替えの方法について
-
javascriptで毎月替わる画像
-
javascriptで、一枚の画像を、...
おすすめ情報