• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:テキストにマウスオーバーで画像表示(続き))

テキストにマウスオーバーで画像表示の方法

このQ&Aのポイント
  • テキストにマウスオーバーすると画像が表示される方法を教えてください。
  • 初心者ですが、テキストにマウスオーバーすると画像が表示される方法について教えてください。
  • テキストにマウスオーバーした際に、画像が表示される方法を教えてください。

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

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

前回回答者です。 >"defalt"の画像が「×」表示になっており そのままのHTMLソースだとdefaultに対応する画像がないので、×表示がされているだけです。 ><img src="defalt" alt=""> の部分は初期状態で表示する画像アドレスを、仮にdefaultとして作成してあります。 他の画像と同じように、src部分は利用する人が設定することを期待してダミーで入れてあるものです。 それなので、<img src="A.jpg" alt="">でも<img src="X.jpg" alt="">でもなんでもかまいません。 >最初の状態で何も見えない状態か、枠線のみにしたいのですが? 最終的にどのようなCSSで利用されるのか不明なので(スクリプト内からは変更していません)、どのような方法が良いのか判断がつきません。 単純な方法としては 1)初期画像を透明画像にしておく( =枠線のみ表示) 2)対象divを初期はdisplay:noneにしておき、マウスオーバーのスクリプト内で表示に変更(=何も表示されない)  CSSのdiv.screenにdisplay:nonde; を追加  scriptの「if (p.className != "screen") return;」の後に「p.style.display = "block";」の1行を追加 (*同じ要領でimg部分を表示/非表示にすれば、初期に枠線のみ表示になります。) 3)HTMLソースでは空の( などを入れた)divのみにしておいて、script内からimg要素を追加(=枠線のみ表示)  「if ((t = getImg(t)) && (p = getImg(p)))~~」の1行を以下の2行で置き換える  while (p.firstChild) p.removeChild(p.firstChild);  if (t = getImg(t)) p.appendChild(t.cloneNode(true)); などが考えられます。(ほかにもいろいろあると思います) ただし、javascriptが無効の場合を考慮すると、いずれの方法でも( )内の初期状態のままで何も変化しないことになります。 (枠線のみとか、何も表示されない状態とか) それなので、現状でdefault部分に「初期状態で表示する画像」を指定しておくのも一法ではないかと。 2)の方法で、HTMLソースにはdefaultの画像を表示しておいて、CSSで非表示にするかわりにscriptで非表示にすれば、無効時にはデフォルトの画像が表示され(オンマウスのスクリプトも無効)、有効時には何も表示されない状態からマウスに応じて画像を表示ということが実現できます。 その場合は、CSSで非表示指定せずにスクリプトの最後( (function(id) { 内の最後)に、  document.getElementById(nid).getElementsByTagName("DIV")[1].style.display = "none"; の1行を追加することで可能です(ちょっと手抜きだけど)

kohakura
質問者

お礼

再度ご回答頂きまして誠にありがとうございます。 あなたのような人に出会えて、ネットの利便性に驚愕してます。 また機会があったら教えて下さい。 ホットラインでダイレクトに連絡出来ると、最高なんですけど。 迷惑でしょうが。 謝謝

その他の回答 (1)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

とりあえず、 <img src="defalt" alt=""> を <img src="defalt" alt="" style="display:none;" onload="this.style.display='block';" onunload="this.style.display='none';"> とか

関連するQ&A