• ベストアンサー

スクリプトの入れ方で教えて下さい

文字(例:あいうえお)にマウスを重ねると画像が表示されるスクリプトを以下のように書き込みました。 一箇所はこの通りで正常にできたのですが、同じページ内に数箇所同じスクリプトを有効にさせるためにはどうしたらよいのでしょうか? また、以下のスクリプトの場合で画像が表示される位置を指定したいのですが 可能でしょうか?(右側に表示・・・等) よろしくお願いいたします。 <script language="javascript"> <!-- function changeVis(obj, visible) { document.all(obj).style.visibility=(visible?"visible":"hidden") } //--> </script> <P align="center"><FONT size="2"> <A HREF="#" onMouseMove="changeVis('image', true)" onMouseOut="changeVis('image', false)">あいうえお</A> </F></P> <IMG SRC="画像.gif" STYLE='visibility:hidden' id='image'></DIV>

  • fs-30
  • お礼率100% (8/8)

質問者が選んだベストアンサー

  • ベストアンサー
  • BlueRay
  • ベストアンサー率45% (204/453)
回答No.2

1. >”image”部分を変えるとのこと、済みません、 >例えばどのようなものに変えたらいいのでしょうか。 2. >また、以下のスクリプトの場合で画像が表示される位置を指定したいのですが >可能でしょうか?(右側に表示・・・等) テーブルを使ってみては如何でしょうか? 1と2を含んだサンプルです。 <script language="javascript"> <!-- function changeVis(obj, visible) { document.all(obj).style.visibility=(visible?"visible":"hidden") } //--> </script> <TABLE border=1> <TR> <TD><BR></TD> <TD><IMG SRC="画像1.gif" STYLE='visibility:hidden' id='image1'></TD> <TD><BR></TD> </TR> <TR> <TD><IMG SRC="画像2.gif" STYLE='visibility:hidden' id='image2'></TD> <TD><FONT size="2"> <A HREF="#" onMouseMove="changeVis('image1', true)" onMouseOut="changeVis('image1', false)">あ</A> <A HREF="#" onMouseMove="changeVis('image2', true)" onMouseOut="changeVis('image2', false)">い</A> <A HREF="#" onMouseMove="changeVis('image3', true)" onMouseOut="changeVis('image3', false)">う</A> <A HREF="#" onMouseMove="changeVis('image4', true)" onMouseOut="changeVis('image4', false)">え</A> </FONT></TD> <TD><IMG SRC="画像3.gif" STYLE='visibility:hidden' id='image3'></TD> </TR> <TR> <TD><BR></TD> <TD><IMG SRC="画像4.gif" STYLE='visibility:hidden' id='image4'></TD> <TD><BR></TD> </TR> </TABLE>

fs-30
質問者

お礼

ありがとうございます。 テーブルの大きさを変えることによってまったく違ったデザインが浮かびました。 画像があちこち飛ぶような、かわいいのができました。 満足です!! 今後ともよろしくお願いいたします。

fs-30
質問者

補足

”image" 変え方わかりました!! ありがとうございました。

その他の回答 (1)

  • Teenage
  • ベストアンサー率24% (67/278)
回答No.1

>同じページ内に数箇所同じスクリプトを有効にさせるためにはどうしたらよいのでしょうか changeVis('****', true)" や id=***を別の物に変えれば出来ると想います

fs-30
質問者

お礼

さっそく教えていただきましてありがとうございます。 ”image”部分を変えるとのこと、済みません、 例えばどのようなものに変えたらいいのでしょうか。 初心者で済みません

関連するQ&A

  • 6/10にお尋ねしましたマウスを重ねると横に画像がですスクリプトについて再度

    わかりやすく教えていただいたのですが、画像のURLを入力する個所がわからなくなってごちゃごちゃになってしまったのです。もうしわけありません、今一度URLをどこに入れたらよいのか教えていただければ幸いです。 お手数おかけいたします。 '********** ココから ********** <script language="javascript"> <!-- function changeVis(obj, visible) { document.all(obj).style.visibility=(visible?"visible":"hidden") } //--> </script> <A HREF="#" onMouseMove="changeVis('image', true)" onMouseOut="changeVis('image', false)">アイコン(hogehoge)</A> <IMG SRC="hogehoge.gif" STYLE='visibility:hidden' id='image'></DIV> '********** ココまで **********

    • ベストアンサー
    • HTML
  • onMouseOverの適応範囲

    困ってしまい質問させていただきます。 <div>  <a href="t1.html" onMouseOver="javascript:document.all('id1').style.visibility='visible';" onMouseOut="javascript:document.all('id1').style.visibility='hidden';">show</a> </div> <div id="id1" onMouseOver="javascript:document.all('id1').style.visibility='visible';" onMouseOut="javascript:document.all('id1').style.visibility='hidden';">  <a href="image.gif" onMouseOver="javascript:document.writeln(document.all('id1').style.visibility)">イメージ</a> </div> 以上のhtmlでは、「イメージ」にマウスを持っていくと、hiddenと表示されてしまいます。 一度も<div id="id1"></div>から離れていないため、visibleと表示されると思っているのですが、<div></div>の中であっても、onmouseOutが実行されてしまうのでしょうか? ブラウザはIEを利用しています。 どうか宜しくお願いします。

  • ドロップダウンメニューを短縮したい

    今ドロップダウンメニューを作っていて、メニューを大量に作りたい時に、下に添付してあるプログラムでは膨大になりすぎて入力がしんどいです。 ドロップダウンメニューには他にも様々なプログラム表記があると思います。ですので、メモ張にプログラムを貼ったら下と似たようなプログラムができ、なおかつこんな長ったらしいプログラムじゃなくても、こうすれば短くできる、などの知恵を持っていらっしゃる方がいらっしゃったら、是非ともご教授願えないでしょうか?。 できればプログラムで回答してもらえるとありがたいです。よろしくお願い致します。 <script language="javaScript"> function overL0(){ document.all("L0").style.backgroundColor="yellow"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function offL0(){ document.all("L0").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function overL1(){ document.all("L1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible"; } function offL1(){ document.all("L1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible"; } function overS1(){ document.all("S1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function offS1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function oversi1(){ document.all("si1").style.backgroundColor="yellow"; document.all("si1").style.visibility="visible"; } function offsi1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("si1").style.visibility="visible"; } function oversi2(){ document.all("si2").style.backgroundColor="yellow"; document.all("si2").style.visibility="visible"; } function offsi2(){ document.all("si2").style.backgroundColor="#afeeee"; document.all("si2").style.visibility="visible"; } </script> <body> <div id="L0" style="position:relative;background-color:#afeeee; width:1500;height:30" onMouseOver="overL0()" onMouseOut="offL0()"> </div> <div id="L1" style="position:relative;background-color:#afeeee; width:150;height:30" onMouseOver="overL1()" onMouseOut="offL1()"> name1 </div> <div id="S1" style="position:absolute;top:45;left:160;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="overS1()" onMouseOut="offS1()"> name2 </div> <div id="si1" style="position:absolute;top:45;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi1()" onMouseOut="offsi1()"> <a href="http://www.google.co.jp/" target="blank" target="c">A</a><br> </div> <div id="si2" style="position:absolute;top:75;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi2()" onMouseOut="offsi2()"> <a href="http://www.google.co.jp/" target="blank" target="c">B</a><br> </div> </body>

  • このプログラムを改善してくれませんか?。

    今ドロップダウンメニューを作っていて、メニューを大量に作りたい時に、下に添付してあるプログラムでは膨大になりすぎて入力がしんどいです。 ドロップダウンメニューには他にも様々なプログラム表記があると思います。ですので、メモ張にプログラムを貼ったら下と似たようなプログラムができ、なおかつこんな長ったらしいプログラムじゃなくても、こうすれば短くできる、などの知恵を持っていらっしゃる方がいらっしゃったら、是非ともご教授願えないでしょうか?。 できればプログラムで回答してもらえるとありがたいです。よろしくお願い致します。 <script language="javaScript"> function overL0(){ document.all("L0").style.backgroundColor="yellow"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function offL0(){ document.all("L0").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function overL1(){ document.all("L1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible"; } function offL1(){ document.all("L1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible"; } function overS1(){ document.all("S1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function offS1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function oversi1(){ document.all("si1").style.backgroundColor="yellow"; document.all("si1").style.visibility="visible"; } function offsi1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("si1").style.visibility="visible"; } function oversi2(){ document.all("si2").style.backgroundColor="yellow"; document.all("si2").style.visibility="visible"; } function offsi2(){ document.all("si2").style.backgroundColor="#afeeee"; document.all("si2").style.visibility="visible"; } </script> <body> <div id="L0" style="position:relative;background-color:#afeeee; width:1500;height:30" onMouseOver="overL0()" onMouseOut="offL0()"> </div> <div id="L1" style="position:relative;background-color:#afeeee; width:150;height:30" onMouseOver="overL1()" onMouseOut="offL1()"> name1 </div> <div id="S1" style="position:absolute;top:45;left:160;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="overS1()" onMouseOut="offS1()"> name2 </div> <div id="si1" style="position:absolute;top:45;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi1()" onMouseOut="offsi1()"> <a href="http://www.google.co.jp/" target="blank" target="c">A</a><br> </div> <div id="si2" style="position:absolute;top:75;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi2()" onMouseOut="offsi2()"> <a href="http://www.google.co.jp/" target="blank" target="c">B</a><br> </div> </body>

  • マウスオーバーの合体

    マウスオーバーのプルダウンメニューと マウスオーバー画像変更スクリプトを組み合わせることは可能なのでしょうか? イメージとしては所期画面に画像Aがあり、マウスを載せると画像Aが画像Bになり、 更に画像Bの下にプルダウンメニューが表示されるイメージです。 尚、現在は以下の組み合わせがうまくいかない為(不可能?) 個々にスクリプトを記載しておきます。 ↓↓↓↓↓↓マウスオーバーのプルダウンメニュー↓↓↓↓↓↓ <html> <head> <script language="JavaScript"><!-- vType = ["hidden","visible"]; function pdMenu(mName) { Menu = document.all[mName].style; Menu.visibility = vType[Menu.visibility.indexOf("hidden") + 1]; } // --></script> </head> <body> <img src="main.png" onMouseover="pdMenu('Menu')"><br> <div id="Menu" style="visibility:hidden" onMouseout="pdMenu('Menu')"> <a href="http://www.yahoo.co.jp/" ><img src="sub01.png" border="0"></a><br> <a href="http://www.google.co.jp/"><img src="sub02.png" border="0"></a><br> </div> </body> </html> ↑↑↑↑↑↑マウスオーバーのプルダウンメニュー↑↑↑↑↑↑ ↓↓↓↓↓↓マウスオーバー画像変更スクリプト↓↓↓↓↓↓ <img border="0" src="main.png" onmouseover="this.src='main2.png'" onmouseout="this.src='main.png'"> ↑↑↑↑↑↑マウスオーバー画像変更スクリプト↑↑↑↑↑↑

  • これは何をするスクリプトですか?

    <head> <script type="text/javascript"> <!-- function loading() { if (document.getElementById){ document.getElementById('load').style.visibility = 'hidden'; } else { if (document.layers){ document.layers['load'].visibility = 'hidden'; } else { document.all('load').style.visibility = 'hidden'; }}} // --> </script> </head> <body onload="loading()"> 詳細は略して書いています。 プログラムに全く詳しくないので、何をやろうとしているスクリプトなのかわかりません。 皆様には簡単かとは思いますが、よろしくお願いします。

  • JavaScriptがfirefoxで作動しない

    IEでは正しく作動するjavascriptがfirefoxではうまく作動しません。なぜなのかどなたか教えてください・・・・! <script type="text/JavaScript"> flag = false; function pd1() { if(flag) ID1.style.visibility = "hidden"; else ID1.style.visibility = "visible"; flag = !flag; } </script> ここからhtml <div id= "w1"><a href="javascript:pd1()" >テキスト</a></div> <div id="ID1" style="visibility: hidden;"> <p>テキスト</p></div> 以上です。まだまだ超初心者です。よろしくお願いいたします。

  • z-indexを指定したボックスの下に表示させる

    z-indexとjavascriptを組み合わせて下記のようなページを作っています。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ああああ</title> <meta http-equiv="Content-Script-Type" content="text/JavaScript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <script type="text/javascript"> <!-- function MM_showHideLayers() { //v9.0 var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; } obj.visibility=v; } } //--> </script> <style type="text/css"> div#aaa { z-index: 2; position:absolute; width: 300px; } div#bbb { z-index: 1; position:absolute; width: 300px; } </style> </head> <body> <h1>あああ</h1> <p><a onclick="MM_showHideLayers('aaa','','show','bbb','','hide')">ううう</a> / <a onclick="MM_showHideLayers('aaa','','hide','bbb','','show')">えええ</a></p> <div id="aaa" style="visibility:visible"> <h2>ううう</h2> <p>うううううううう<br /> うううううううう</p> </div> <div id="bbb" style="visibility:hidden"> <h2>えええ</h2> <p>えええええええええ<br /> えええええええええ<br /> えええええええええ<br /> えええええええええ<br /> えええええええええ</p> </div> <p>いいいいいいいいい<br /> いいいいいいいいい</p> </body> </html> 切り替わるdivの下に<p>いいいい</p>を表示させたいのですが、後ろに回って表示されません。 これを表示させる方法をご存じでしたら教えてください。

    • ベストアンサー
    • HTML
  • opera で戻った時のページの初期化処理について

    こんにちわ。 opera上の「戻る処理」関連で困っています。 デフォルト非表示の<div>領域をjavascriptで 表示するようにしたりしてるのですが、 一度どこかのページに行って「戻るボタン」で 戻ってきたときに、それが表示されたままに なってしまいます。 出来れば戻ってきた場合も非表示にするための 初期化処理をしたいのですが、なにかいい方法を ご存知の方いらっしゃいましたら教えてください。 検証:windows98, opera7.23 分かっていること:戻った場合、body onload も通らない。 --------------- <head> <script> function vis_switch(arg) { obj = document.getElementById("vis"); obj.style.visibility = arg; } </script> </head> <body onload="javascript:vis_switch('hidden')"> <div id="vis" style="visibility:hidden;"> 表示/非表示 </div> <a href="javascript:vis_switch('visible');">表示on</a> <a href="http://goo.ne.jp">どこかのページ</a> </body> -----------------------

  • ロールオーバーで画像拡大、z-index

    下記の様にjavascriptとcssで、 サムネイル画像をロールオーバーしたら拡大画像が表示されるように設定しました。 しかしz-indexが効かずに拡大画像がほかのサムネイル画像の下に表示されてしまいます。 z-indexの対処方法などいろいろ調べ試してみたのですが、 うまくいきませんでした。 どのようにすればうまく表示できるか教えていただけないでしょうか。 よろしくお願いします。 <html> <head> <title>テスト</title> <script type="text/javascript"> <!-- function setStyle(thum,vType) { document.getElementById(thum).style.visibility = vType; } //--> </script> </head> <body> <p style="margin-top:50px;"> <div style="position:relative; float:left;"> <div id="thum1" onMouseover="setStyle('thum2','visible'),setStyle('thum1','hidden')" onMouseout="setStyle('thum2','hidden'),setStyle('thum1','visible')" style="border:0px; z-index:2;"> <img src="thum1.png" width="100" height="100"> </div> <div id="thum2" style="position:absolute; z-index:10; top:-100px; left:-50px; visibility:hidden;" onMouseover="setStyle('thum2','visible'),setStyle('thum1','hidden')" onMouseout="setStyle('thum2','hidden'),setStyle('thum1','visible')"> <img src="thum2.png"" style="border:1px solid #dedede;" width="200" height="200"> <div style="background-color:#dedede; padding:5px; width:192px; line-height:99%;"> <b><center>テスト1</center></b> </div> </div> </div> <div style="position:relative; float:left;"> <div id="thum3" onMouseover="setStyle('thum4','visible'),setStyle('thum3','hidden')" onMouseout="setStyle('thum4','hidden'),setStyle('thum3','visible')" style="border:0px; z-index:2;"> <img src="thum3.png" width="100" height="100"> </div> <div id="thum4" style="position:absolute; z-index:10; top:-100px; left:-50px; visibility:hidden;" onMouseover="setStyle('thum4','visible'),setStyle('thum3','hidden')" onMouseout="setStyle('thum4','hidden'),setStyle('thum3','visible')"> <img src="thum4.png"" style="border:1px solid #dedede;" width="200" height="200"> <div style="background-color:#dedede; padding:5px; width:192px; line-height:99%;"> <b><center>テスト2</center></b> </div> </div> </div> <div style="position:relative; float:left;"> <div id="thum5" onMouseover="setStyle('thum6','visible'),setStyle('thum5','hidden')" onMouseout="setStyle('thum6','hidden'),setStyle('thum5','visible')" style="border:0px; z-index:6;"> <img src="thum5.png" width="100" height="100"> </div> <div id="thum6" style="position:absolute; z-index:10; top:-100px; left:-50px; visibility:hidden;" onMouseover="setStyle('thum6','visible'),setStyle('thum5','hidden')" onMouseout="setStyle('thum6','hidden'),setStyle('thum5','visible')"> <img src="thum6.png"" style="border:1px solid #dedede;" width="200" height="200"> <div style="background-color:#dedede; padding:5px; width:192px; line-height:99%;"> <b><center>テスト3</center></b> </div> </div> </div> </p> </body> </html>

    • ベストアンサー
    • HTML

専門家に質問してみよう