• 締切済み
  • すぐに回答を!

document.writeln内でマウスオーバー

現在、HPを制作中なんですがページ数が増えサイドメニューを javascriptで一括管理するようになりました。(SEO的に不利なのを承知の上) しかし、ナビゲーションの画像を↓ <img src='/img/sonota-1.png' hspace='0' vspace='0' onmouseover='this.src='/img/sonota-2.png'' onmouseout='this.src='/img/sonota-1.png'' width='240' height='65' alt='その他'> のように記述していたのですがdocument.writelnで、これを表示させるとマウスオーバー時の 画像がマウスを重ねても表示されません。 要は、「document.writeln」内で「onmouseover='this.src='/img/sonota-2.png'」使うにはどうしたらいいのでしょうか。

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数91
  • ありがとう数0

みんなの回答

  • 回答No.1
  • fujillin
  • ベストアンサー率61% (1594/2576)

回答がないみたいなので… このあたり(↓)が原因ではないでしょうか? 確認してみてください。 http://okwave.jp/qa/q1501048.html http://fstyle.ddo.jp/archives/2006/04/javascript_5.html http://bowz.info/1361

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • 離れた場所にマウスオーバーで画像を変えたい。

    宜しくお願いします。 色々と調べて試してみるのですが解決できず、こちらでご相談させ頂こうと思います・・・。 サイト内にあるボタン自体をマウスオーバーで変化させ、かつそのボタンを選択している時には、別の離れた場所にも指定した画像を表示させたいと考えております。 1つやっかいなのが、今回.3つ画像があるのですが、3つとも微妙に異なる場所へ表示させなければなりません。一応、簡単な資料を作成しましたので添付のデータをご確認頂きたいのですが・・・。 配置はそれぞれ記載されている感じで、#A、#B、#Cというコンテナ内に入っているボタン画像にマウスが行くと、ボタン自体もマウスオーバーで変化し、かつ、#container内の赤い画像の場所にも別のsampleA.pngを表示させたいと考えています。 BとCに関しても同様で、それぞれ個別の位置に画像を表示させたいと思います。 ボタン側のマウスオーバーは出来たのですが、更に加えて離れた場所に画像を表示させる方法が分かりません。 <div id="container">ここに画像を表示させたいです!</div> <div id="A"><a href="***"><img src="images/1.png" onmouseover="this.src='images/over1.png'" onmouseout="this.src='images/1.png'"></a></div> <div id="B"><a href="***"><img src="images/2.png" onmouseover="this.src='images/over2.png'" onmouseout="this.src='images/2.png'"></a></div> <div id="C"><a href="***"><img src="images/3.png" onmouseover="this.src='images/over3.png'" onmouseout="this.src='images/3.png'"></a></div> どなたか、こういった方法でサイトを作成させた方いらっしゃいましたらアドバイスいただけますと助かります。 どうぞ、宜しくお願いいたします。m(_ _)m

    • ベストアンサー
    • CSS
  • マウスオーバーの合体

    マウスオーバーのプルダウンメニューと マウスオーバー画像変更スクリプトを組み合わせることは可能なのでしょうか? イメージとしては所期画面に画像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'"> ↑↑↑↑↑↑マウスオーバー画像変更スクリプト↑↑↑↑↑↑

  • リンクをマウスオーバーでフェードイン・アウトがしたです。

    リンクをマウスオーバーでフェードイン・アウトがしたです。 以下のようなソースを書いたのですが、ページを開いた1回目のみ、画像と文字がフェードインして、以下のリンクをマウスオーバーした時には、普通に画像と文字が入れ替わります。リンクをマウスオーバーした時にもフェードイン・アウトさせるには、どのように変更すればいいのでしょうか? <html> <head> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('div').fadeIn("slow"); }); </script> <head> <body> <div style="display:none;"> <img src="img/1.png" name="foo"> <br> <span id="buntate">眺める</span> </div> <a href="javascript:void(0)" onmouseover="document.foo.src='img/2.png';document.all.buntate.innerText='サーファー';" onmouseout="document.foo.src='img/1.png';document.all.buntate.innerText='眺める';"> hoge1</a> <br> <a href="javascript:void(0)" onmouseover="document.foo.src='img/3.png';document.all.buntate.innerText='海';" onmouseout="document.foo.src='img/1.png';document.all.buntate.innerText='眺める';"> hoge2</a> </body> </html> 沢山いろいろと試したのですが、自分で解決出来ず・・・ ごご教授、よろしくお願いいたします。

  • this.src等のthisについて

    <img src="a.jpg" onmouseover="this.src='b.jpg'" onmouseout="this.src='a.jpg'"> こんなかんじで、マウスオーバーでjavascriptが作動するソースがあった場合 ここでの”this”は、”自分自身”を指してる事になると思うのですが thisを使わず、絶対的に書こうとした場合なんと書くのでしょうか?

  • マウスオーバー

    マウスオーバーの制御で下記のソースなのですが、今まで、こちらを教えてもらってやっていました。 今のままだと、オーバーで画像が変わるだけでマウスが外れると、元の画像に戻ってしまいます。該当ページへジャンプしたときに画像が変わったままにするのにはどうしたらよいのでしょうか。 <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>

  • cssヘッダー画像の下に配置したい画像が重なります

    css勉強し始めた初心者なので、説明やソースなどめちゃくちゃだと思いますが、教えてください。 固定ヘッダー(常に画面の上にヘッダーがあるように)を作成し、その下に画像を配置したのですが、ヘッダーの下にその画像が入り込んでしまいました。ヘッダーの下に重ならず配置するにはどうすればよいでしょうか? よろしく御願いいたします。 body内に <div id="header"> <h1><a href="/" title="website"></a></h1> <img src="img/b01.gif" width="108" height="68" border="0" onmouseover="this.src='../ao/img/b01-.gif" onmouseout="this.src='../ao/img/b01.gif"> <img src="img/b02.gif" width="88" height="68" border="0" onmouseover="this.src='../ao/img/b02-.gif'" onmouseout="this.src='../ao/img/b02.gif'"> <img src="img/b03.gif" width="59" height="61" border="0" onmouseover="this.src='../ao/img/b03-.gif'" onmouseout="this.src='../ao/img/b03.gif'"> <img src="img/b04.gif" width="50" height="68" border="0" onmouseover="this.src='../ao/img/b04-.gif'" onmouseout="this.src='../ao/img/b04.gif'"> <img src="img/b05.gif" width="39" height="68" border="0" onmouseover="this.src='../ao/img/b05-.gif'" onmouseout="this.src='../ao/img/b05.gif'"> <img src="img/b06.gif" width="80" height="68" border="0" onmouseover="this.src='../ao/img/b06-.gif'" onmouseout="this.src='../ao/img/b06.gif'"> <img src="img/b07.gif" width="51" height="68" border="0" onmouseover="this.src='../ao/img/b07-.gif'" onmouseout="this.src='../ao/img/b07.gif'"> <img src="img/b08.gif" width="47" height="68" border="0" onmouseover="this.src='../ao/img/b08-.gif'" onmouseout="this.src='../ao/img/b08.gif'"> <img src="img/b09.gif" width="54" height="68" border="0" onmouseover="this.src='../ao/img/b09-.gif'" onmouseout="this.src='../ao/img/b09.gif'"> <img src="img/b10.gif" width="125" height="68" border="0" onmouseover="this.src='../ao/img/b10-.gif'" onmouseout="this.src='../ao/img/b10.gif'"> </div> <h2><img src="img/panichi.gif" alt="TOP" width="700" height="450" class="centering" /></h2>

    • ベストアンサー
    • HTML
  • こんにちは、javascriptにてボタンを押すと画像が透明度が下がる

    こんにちは、javascriptにてボタンを押すと画像が透明度が下がる動きを作っています。 ボタンを押すとフェードアウトはできるのですが、フェードアウトした画像を 元の透明度にフェードインすることが出来ません。 if文のclassに書かれている変数の扱いがよくわからないので、質問させて頂きました。 forで回してカウントから取得してみようかと,すべての画像に<p class="fade1">のような タグをすべての画像に付けて、javascript記述できればと思っていましたが、classの指定が $(".fade+i img")等と指定してみましたが、動きませんでした。 適切な方法がありましたら、教えてください。よろしくお願いします。 【html】 <div class="thumbnail"> <img src="g_images/IMG_1470.jpg" alt="画像1" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02564.JPG" alt="画像2" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02227.JPG" alt="画像3" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02555.JPG" alt="画像4" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02558.JPG" alt="画像5" class="item-image" hspace="5" vspace="3" /> </div> 【javascript】 $(document).ready( function(){ $(".thumbnail img").click(function(){ if($(".thumbnail img").css("opacity")!=1.0){ $(".thumbnail img").fadeTo("normal", 1.0); // マウスオーバーで透明度を60%にする } $(this).fadeTo("normal", 0.4); // マウスオーバーで透明度を60%にする }); });

  • NETSCAPEで表示がうまくいかない

    折りたたみメニューのようなのを作成してます。 IEだと問題なく動くのですが、 NETSCAPEになると、マウスオーバー・オフで ロールオーバーの画像が変わらなかったり 表示が消えるはずの箇所が残ったりします。 NETSCAPEでも、ちゃんと動く用にしたいです。 どなたかご助言を頂けないでしょうか? ソースの中を抜粋しました <A href ="BOOK.html" onMouseOver="On('img10');" onMouseOut="Off('img10');"> <IMG src ="10-1.png" border="0" NAME = "img10" alt = ""> </A></DIV> <DIV class="Lmenu_Rmenu"> <A href ="CD.html" onMouseOver="On('img11');" onMouseOut="Off('img11');"> <IMG src ="11-1.png" border="0" NAME = "img11" alt = ""> </A></DIV> <DIV class="Lmenu_Rmenu"> <A href ="DVD.html" onMouseOver="On('img12');" onMouseOut="Off('img12');"> <IMG src ="12-1.png" border="0" NAME = "img12" alt = ""> </A></DIV> </DIV></div> <SCRIPT type="text/javascript" src="java.js"></SCRIPT> var img1on = new Image(); var img1off = new Image();  ・  ・ var img12on = new Image(); var img12off = new Image(); img1off.src = "1-1.png"; // 普段の画像 img1on.src = "1-2.png"; // ポイント時の画像  ・  ・ img12off.src = "12-1.png"; img12on.src = "12-2.png"; // ポイント時の処理 function On(name) { if (document.images) { document.images[name].src = eval(name + 'on.src'); } } // 放した時の処理 function Off(name) { if (document.images) { document.images[name].src = eval(name + 'off.src'); } }

  • マウスオーバーで画像変更で

    以下のような方法で画像変換を行っています。 <script language="JavaScript"> function imageChange(imageName,imageURL){ document.images[imageName].src = imageURL; } </script> <TR><TD><IMG SRC="./img/01.gif" NAME="image01" style="position:absolute;top:20;left:10;" onMouseOver="imageChange('image01','sub01_01b');"> </TD></TR> <IMG SRC="./img/01_01b.gif" name="sub01_01b"> 実際にマウスオーバーさせると×印が出てしまいます。 onMouseOver="this.src='./img/01_01b.gif'" とするとできるのですが。 どこかに間違いがあるのだと思うのですが、自分で発見できません(><) 間違いを訂正してください!

  • cssファイルへリンクできないです。

    今回からCSSファイルでホームページを作り出している超初心者なので、 専門用語の使い方など間違っているかも分かりませんが知恵を貸してください。 Dreamweaverを使用して、上部に固定ヘッダーのソースをhtmlファイル内に打ち込んで作業をしてます。ヘッダーの下部分の作業をし始めてDreamweaverのデザイン部分の画面で、ヘッダー画像の下に載せる画像や文字が入り込んで隠れてしまうので、作業がしにくいです。 そのため固定ヘッダーデータをcssファイルにした方がいいのかなと思い、 リンクさせようとしたのですが反映されないです。リンクした方がいいのか、その他より効率がいい方法があるのか分からないのでよろしく御願いいたします。 htmlファイルには <body> <link rel="stylesheet" type="text/css" href="banner.css"> と入力してます。 cssファイルには <div id="header"> <img src="img/b01.gif" width="108" height="68" border="0" onmouseover="this.src='../house/img/b01-.gif" onmouseout="this.src='../house/img/b01.gif"> <img src="img/b02.gif" width="88" height="68" border="0" onmouseover="this.src='../house/img/b02-.gif'" onmouseout="this.src='../house/img/b02.gif'"> <img src="img/b03.gif" width="59" height="61" border="0" onmouseover="this.src='../house/img/b03-.gif'" onmouseout="this.src='../house/img/b03.gif'"> <img src="img/b04.gif" width="50" height="68" border="0" onmouseover="this.src='../house/img/b04-.gif'" onmouseout="this.src='../house/img/b04.gif'"> <img src="img/b05.gif" width="39" height="68" border="0" onmouseover="this.src='../house/img/b05-.gif'" onmouseout="this.src='../house/img/b05.gif'"> <img src="img/b06.gif" width="80" height="68" border="0" onmouseover="this.src='../house/img/b06-.gif'" onmouseout="this.src='../house/img/b06.gif'"> <img src="img/b07.gif" width="51" height="68" border="0" onmouseover="this.src='../house/img/b07-.gif'" onmouseout="this.src='../house/img/b07.gif'"> <img src="img/b08.gif" width="47" height="68" border="0" onmouseover="this.src='../house/img/b08-.gif'" onmouseout="this.src='../house/img/b08.gif'"> <img src="img/b09.gif" width="54" height="68" border="0" onmouseover="this.src='../house/img/b09-.gif'" onmouseout="this.src='../house/img/b09.gif'"> <img src="img/b10.gif" width="125" height="68" border="0" onmouseover="this.src='../house/img/b10-.gif'" onmouseout="this.src='../house/img/b10.gif'"> </div> と入力してます。 よろしく御願いいたします。

    • ベストアンサー
    • HTML