• ベストアンサー

HPを作成しています。オンマウスオーバーで…

初心者ですみません。 イラスト集のホームページを作成中です。 サムネイル画像にオンマウスオーバーで大きな画像を表示させるところまでは検索等してできたのですが、同時に「題名」(テキスト)を画像の下などに表示させたいのですが、2つの指示を同時に行う事は不可能でしょうか?そもそもが分かっていないのでヒントでも頂けると助かります。 ちなみに画像は ヘッダーに↓ if(navigator.appVersion.charAt(0)>=3) { movimg=new Array() movimg[0] = new Image();movimg[0].src='********.gif'; movimg[1] = new Image();movimg[1].src='******.gif'; movimg[2] = new Image();movimg[2].src='******.gif'; function changImg1(imgNoA,imgNoB) { if(navigator.appVersion.charAt(0)>=3){ document.images[imgNoA].src=movimg[imgNoB].src; }; }; ボディーに↓ <a href="javascript:function voi(){};voi()" onMouseOver="changImg1(1,1)"><img src="*****" width="50" border="0"></a> というふうにやっています。

  • g707g
  • お礼率70% (12/17)

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

  • ベストアンサー
  • leap_day
  • ベストアンサー率60% (338/561)
回答No.2

こんにちは こんな感じ? <script type="text/javascript"><!-- if(navigator.appVersion.charAt(0)>=3) { movimg=new Array() movimg[0] = new Image();movimg[0].src='sample0.gif'; movimg[1] = new Image();movimg[1].src='sample1.gif'; movimg[2] = new Image();movimg[2].src='sample2.gif'; Title=new Array() Title[0] = "題名1"; Title[1] = "題名2"; Title[2] = "題名3"; } function changImg1(imgNoA,imgNoB) { if(navigator.appVersion.charAt(0)>=3){ document.images[imgNoA].src=movimg[imgNoB].src; document.getElementById("title").innerHTML = Title[imgNoB]; } } //--></script> <div> <a href="javascript:function voi(){};voi()" onMouseOver="changImg1(3,0)"><img src="sample0_little.gif" width="50" border="0" alt="sample0_little"></a> <a href="javascript:function voi(){};voi()" onMouseOver="changImg1(3,1)"><img src="sample1_little.gif" width="50" border="0" alt="sample1_little"></a> <a href="javascript:function voi(){};voi()" onMouseOver="changImg1(3,2)"><img src="sample2_little.gif" width="50" border="0" alt="sample2_little"></a> </div> <div> <img src="" alt="larg_image"> <div id="title"></div> </div> large_imageの初期画像は何か適当に(^^)

g707g
質問者

お礼

ご丁寧にタグまで記述くださり大変助かりました!おおいに参考になり、希望通りに表示させる事が出来ました。

その他の回答 (1)

noname#54215
noname#54215
回答No.1

<img>のalt属性はご存じありませんか? 『img alt』で検索してください。 そうではなくページ内にテキストを表示したいのであればinnerHTMLですかね。 ちなみに、タイトルを半端なところで切ってぼかすと、本文を見るまで質問内容が分からないということで面倒だから無視されることが多くなります。今後注意された方がいいですよ。

g707g
質問者

お礼

ご回答ありがとうございます。今後はきちんとタイトルを分かるように入力するようにします。innerHTMLでできるようになりました!

関連するQ&A

  • マウスが離れたら元々表示されていた画像に戻したい

    次のサンプルでは、 (1) 最初はimg0.gifが表示されています (2) 文字列「やまだ」のうえにマウスが乗るとimg1.gifが表示されます (3) 文字列「すずき」のうえにマウスが乗るとimg2.gifが表示されます (4) 文字列「さとう」のうえにマウスが乗るとimg3.gifが表示されます ここで、各文字列がらマウスが離れたときは表示する画像を最初の「img0.gif」に戻したいです。 素人なりの予想では、たとえば <div onmouseover="changImg1(0,1)">やまだ</div>   を <div onmouseover="changImg1(0,1)" onmouseout="changImg1(0,0)">やまだ</div>  のように 修正すればできそうな気がしましたが、試すとできませんでした。 具体的な記述をご教示いただきたく、よろしくお願い致します。 <html><head> <script language="javascript"> <!-- if(navigator.appVersion.charAt(0)>=3) { movimg=new Array() movimg[0] = new Image(); movimg[0].src='img0.gif'; movimg[1] = new Image(); movimg[1].src='img1.gif'; movimg[2] = new Image(); movimg[2].src='img2.gif'; movimg[3] = new Image(); movimg[3].src='img3.gif'; }; function changImg1(imgNoA,imgNoB) { if(navigator.appVersion.charAt(0)>=3) { document.images[imgNoA].src=movimg[imgNoB].src; }; }; //--> </SCRIPT> </head><body> <img src="img0.gif"> <div onmouseover="changImg1(0,1)">やまだ</div> <div onmouseover="changImg1(0,2)">すずき</div> <div onmouseover="changImg1(0,3)">さとう</div> </body></html>

  • なぜ「ページでエラーが発生しました。」?

    字数が限られているので、「なぜエラーなのですか?」 -----ここからhead区間 <!--JavaScript Function window.onerror = null; var ver4 = (navigator.appVersion.charAt(0) >= "4"); var NN4 = ver4 && (navigator.appName.charAt(0) == "N"); var IE4 = ver4 && (navigator.appName.charAt(0) == "M"); var NN3 = ((navigator.appVersion.charAt(0) == "3") && (navigator.appName.charAt(0) == "N")); if(NN3 || NN4 || IE4){ var img_b = new Array(); img_b[0] = new Image(); img_b[0].src = "kbw.jpg" img_b[1] = new Image(); img_b[1].src = "ao.jpg" img_b[2] = new Image(); img_b[2].src = "bcw.jpg" img_b[3] = new Image(); img_b[3].src = "sm.gif" } function B_in(nam,num){ if(NN3 || NN4 || IE4) document.images[nam].src = img_b[num].src; } function B_out(nam,num){ if(NN3 || NN4 || IE4) document.images[nam].src = img_b[num].src; return false; } // END ---> </SCRIPT> </head> -----ここからbody <BODY onLoad="time(0)"> <SCRIPT LANGUAGE="JavaScript"> <!--- ここから表示 document.write(TodayIMG(0)); //end ---> </SCRIPT>

  • onMouseOverで変える位置

    お世話になります。 長文失礼します。 <html> <head> <title>ページのタイトル名</title> <SCRIPT LANGUAGE="JavaScript"> <!-- movimg=new Array() movimg[0] = new Image();movimg[0].src='img/img-01-206.jpg'; movimg[1] = new Image();movimg[1].src='img/img-01-208.jpg'; movimg[2] = new Image();movimg[2].src='img/img-01-213.jpg'; function changImg1(imgNoA,imgNoB) { document.images[imgNoA].src=movimg[imgNoB].src; }; <!----> </SCRIPT> </head> <body> <img src="img/img-01-01.jpg" width="300" height="225">--(1) <img src="img/img-01-208.jpg" width="300" height="225">--(2) <BR> <a href="javascript:function voi(){};voi()" onMouseOver="changImg1(0,0);"> <IMG src="img/img-01-206.jpg" border="0"></a> <a href="javascript:function voi(){};voi()" onMouseOver="changImg1(0,1);"> <img src="img/img-01-208.jpg" border="0"></a> <A href="javascript:function voi(){};voi()" onMouseOver="changImg1(0,2);"> <IMG src="img/img-01-213.jpg" border="0"></A> </body> </html> という風にonMouseOverで画像を変えているようにしているのですが、 この場合(1)の画像がかわりますよね。 これで(2)の画像を変えるようにするにはどうすればいいでしょうか? 参考になるHPなどでも構いませんのでよろしくお願いします。

  • ・JAVASCRIPTを使って、ホームページを作成しています。

    ・JAVASCRIPTを使って、ホームページを作成しています。 ・ JAVAを使って、ホームページを作成しています。 ・メニューのボタンに、マウスオーバーでボタンの画像を切り替える <!-- loadImage = new Image(); loadImage.src = "profile.gif"; // --> ・と同時に任意の画像を切り替える // ポイント時の処理 function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // 放した時の処理 function Off() { if (document.images) { document.images['def'].src = img0.src; } } // --> ・というscriptを同時に使いたいのですが、どちらかだけになってしまったり、どちらも作動しません。 ・一つのボタンに2つのJAVAを使う場合何か特別な入力が必要なのでしょうか? ・それとも、ただ単純にボタンのタグが誤っているのでしょうか? ・どなたかご教授お願い致します。 ・ちなみにタグを全て載せると、 <SCRIPT Language="JavaScript"> <!-- loadImage = new Image(); loadImage.src = "bbs.gif"; // --> </SCRIPT> <script type="text/javascript"> <!-- if (document.images) { // 設定開始(使用する画像を設定してください) // 通常の画像 var img0 = new Image(); img0.src = "topic4.jpg"; // ポイント時の画像1 var img1 = new Image(); img1.src = "topic4.jpg"; // 設定終了 } // ポイント時の処理 function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // 放した時の処理 function Off() { if (document.images) { document.images['def'].src = img0.src; } } // --> </script> とボタンのタグが、 <A HREF="../usatop.html"onMouseOver="On('img2')" "if(document.images) "myImage.src='bbs2.gif'" "onMouseOut="Off()""if(document.images) "myImage.src='bbs.gif'"><IMG SRC="bbs.gif" BORDER="0" name="myImage"></A> ・となっております。 ・よろしくお願いします!

  • ・JAVAを使って、ホームページを作成しています。

    ・JAVAを使って、ホームページを作成しています。 ・メニューのボタンに、マウスオーバーでボタンの画像を切り替える <!-- loadImage = new Image(); loadImage.src = "profile.gif"; // --> ・と同時に任意の画像を切り替える // ポイント時の処理 function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // 放した時の処理 function Off() { if (document.images) { document.images['def'].src = img0.src; } } // --> ・というscriptを同時に使いたいのですが、どちらかだけになってしまったり、どちらも作動しません。 ・一つのボタンに2つのJAVAを使う場合何か特別な入力が必要なのでしょうか? ・それとも、ただ単純にボタンのタグが誤っているのでしょうか? ・どなたかご教授お願い致します。 ・ちなみにタグを全て載せると、 <SCRIPT Language="JavaScript"> <!-- loadImage = new Image(); loadImage.src = "bbs.gif"; // --> </SCRIPT> <script type="text/javascript"> <!-- if (document.images) { // 設定開始(使用する画像を設定してください) // 通常の画像 var img0 = new Image(); img0.src = "topic4.jpg"; // ポイント時の画像1 var img1 = new Image(); img1.src = "topic4.jpg"; // 設定終了 } // ポイント時の処理 function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // 放した時の処理 function Off() { if (document.images) { document.images['def'].src = img0.src; } } // --> </script> とボタンのタグが、 <A HREF="../usatop.html"onMouseOver="On('img2')" "if(document.images) "myImage.src='bbs2.gif'" "onMouseOut="Off()""if(document.images) "myImage.src='bbs.gif'"><IMG SRC="bbs.gif" BORDER="0" name="myImage"></A> ・となっております。 ・よろしくお願いします!

    • ベストアンサー
    • Java
  • 複数画像にクリッカブルマップ

    当方、HTML・CSSは少しだけ分かりますが、javascriptの知識がありません。 添付の画像のように、 ひとつのHTML内に複数の画像を置き、それぞれの中に複数のクリッカブルマップ(ロールオーバーも可能) を設置したいのですがうまく動きません。。 ■javascript (動かず) if(navigator.appVersion.charAt(0) >=3){ var rolimg = new Array(); for( i = 0 ; i < 10 ; i++ ){ rolimg[i] = new Image(); } rolimg[0].src= "img/0.jpg" rolimg[1].src= "img/1.jpg" rolimg[2].src= "img/2.jpg" rolimg[3].src= "img/3.jpg" rolimg[4].src= "img/4.jpg" rolimg[5].src= "img/5.jpg" } function paintRol(dim,cnt){ if(navigator.appVersion.charAt(0) >= 3 ){ document.images[dim].src=rolimg[cnt].src; } } ■HTML <!--ひとつめの画像--> <img src="img/0.jpg" usemap="#map" name="rollover" /> map name="map" id="map"> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',1)" onMouseOut="paintRol('rollover',0)" /> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',2)" onMouseOut="paintRol('rollover',0)" /> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',3)" onMouseOut="paintRol('rollover',0)" /> </map> <!--ふたつめの画像--> <img src="img/4.jpg" usemap="#map" name="rollover" /> map name="map" id="map"> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',5)" onMouseOut="paintRol('rollover',0)" /> </map> ------ よろしくお願いします。

  • スライドショー(1回)が思うように動作しません

    下記のjavascriptをホームページを参考にして記述したのですが、スライドショースタートをクリックするとスライドショーが表示されるのですが、ページを表示したときは、画像が×になっています。どのようにしたら画像が表示されるのですか <html> <head> <title>zyoutou</title> </head> <body background="yoru.gif"> </body> <SCRIPT LANGUAGE="JavaScript"> <!-- if (navigator.appVersion > "3") { phot_a = new Image(); phot_a.src = "1.jpg" phot_b = new Image(); phot_b.src = "2.jpg" phot_c = new Image(); phot_c.src = "3.jpg" 省略 phot_i = new Image(); phot_i.src = "9.jpg" phot_j = new Image(); phot_j.src = "10.jpg" phot_k = new Image(); phot_k.src = "11.jpg" phot_l = new Image(); phot_l.src = "12.jpg" } function bbb(b1,b2) { if (navigator.appVersion > "3") { document.images[b1].src = eval(b2); } } function ccc() { if (navigator.appVersion > "3") { bbb('img2','phot_b.src') setTimeout("bbb('img2','phot_a.src')",1000) setTimeout("bbb('img2','phot_b.src')",2000) setTimeout("bbb('img2','phot_c.src')",3000) 省略 setTimeout("bbb('img2','phot_i.src')",9000) setTimeout("bbb('img2','phot_j.src')",10000) setTimeout("bbb('img2','phot_k.src')",11000) setTimeout("bbb('img2','phot_l.src')",12000) } } <!----> </SCRIPT> <IMG src=""2.jpg" name="img2">      <A href="javascript:ccc()" >スライドショー スタート</a> </html>

  • マウスオーバー

    マウスオーバーの制御で下記のソースなのですが、今まで、こちらを教えてもらってやっていました。 今のままだと、オーバーで画像が変わるだけでマウスが外れると、元の画像に戻ってしまいます。該当ページへジャンプしたときに画像が変わったままにするのにはどうしたらよいのでしょうか。 <script LANGUAGE="JavaScript"> <!-- if (document.images) { //if image object is available img1on = new Image(); // MouseOver Images img1on.src = "image/1.gif"; img2on = new Image(); img2on.src = "image/2.gif"; img1off = new Image(); // MouseOut Images img1off.src = "image/1_1.gif"; img2off = new Image(); img2off.src = "image/2_2.gif"; } function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); }} function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); }} //--> </script> ***HTML***** <a onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')" TARGET="_self" href="index.htm"> <img NAME="img1" image/1_1.gif" width="130" height="20"></a> <a onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')" href="next.htm"> <img NAME="img2" SRC="image/2_2.gif" width="130" height="20"></a>

  • 別フレームからの背景切り替え

    同一ページでの背景切り替えは (1)<SCRIPT LANGUAGE="JavaScript"> <!-- Begin if (navigator.appName == "Microsoft Internet Explorer") { image_directory = "http://members.tripod.co.jp/oka1/"; clear = new Image(); clear.src = image_directory + "clear.jpg"; pic1 = new Image(); pic1.src = image_directory + "bg_wahuu.gif"; pic2 = new Image(); pic2.src = image_directory + "bg4.gif"; pic3 = new Image(); pic3.src = image_directory + "bg6.gif"; pic4 = new Image(); pic4.src = image_directory + "pgwck.gif"; pic5 = new Image(); pic5.src = image_directory + "ngllgch.gif"; pic6 = new Image(); pic5.src = image_directory + "wpckp.gif"; } function imagechange(imgName) { if (navigator.appName == "Microsoft Internet Explorer") { document.body.background = eval(imgName + ".src"); } } // End --> </script> /////////////////////////////////////////////////////////// (2)<a href="#" onMouseOver="imagechange('pic1');" onMouseOut="imagechange('clear');"><img src="http://www001.upp.so-net.ne.jp/oka/bg_wahuu.gif" border="0" width="144" height="158"></a> /////////////////////////////////////////////////////////// 以上の操作でできたのですが、 背景素材のサムネイルを別フレームに配置したい場合の、 別フレームからの背景切り替えの方法をご存知の方は教えていただけないでしょうか?

    • ベストアンサー
    • HTML
  • ブラウザが判別出来ない。

    お世話になっております。 JavaScriptの本を購入しました。 その本にブラウザ判定のスクリプトが掲載されており、それをそのままアップしたところ、私はIE6なのにIE4と判別されてしまいました。 下記がそのスクリプトです。 ちなみに、私はXPのIE6です。 このスクリプトはこれで完璧なのでしょか? また、出来ましたら、このスクリプトを試していただけたらと思うのですが・・・よろしくお願い致します。 <script language="JavaScript"> <!-- if( navigator.appVersion.charAt(0)==4){window.location.href = "nn4.html"} // NN Ver4 の場合 if( navigator.appVersion.charAt(0)==5){window.location.href = "nn5.html"} // NN Ver5 の場合 if( navigator.appVersion.charAt(0)==6){window.location.href = "nn6.html"} // NN Ver6 の場合 } if( navigator.appName.charAt(0)=="M"){ if( navigator.appVersion.charAt(0)==2){window.location.href = "ie2.html"} // IE Ver2 の場合 if( navigator.appVersion.charAt(0)==3){window.location.href = "ie3.html"} // IE Ver3 の場合 if( navigator.appVersion.charAt(0)==4){window.location.href = "ie4.html"} // IE Ver4 の場合 if( navigator.appVersion.charAt(0)==5){window.location.href = "ie5.html"} // IE Ver5 の場合 if( navigator.appVersion.charAt(0)==6){window.location.href = "ie6.html"} // IE Ver6 の場合 } //--> </script> <noscript>JavaScript を使用しています。JavaScript を有効にしてください。</noscript>

専門家に質問してみよう