CGI-BBS > JAVA/JavaScript > JavaScript > onMouseOver<テキストにカーソルを乗せると画像が変わる>


カレッヂ
カレッヂ


質問者 蒼の砦  投稿日 2/22(金) 14:02:55
画像にカーソルをあわせると別画像が表示されるのではなく、
たとえばテーブルで2列に分割し、左側のテキスト文にカーソルをあわせると
右側で画像が変わるようにしたいのです。

voidを使ってみたのですが、イマイチでした。
画像の出し方がわかりません。

#-----------------------------------------------------
<TITLE></TITLE>
<SCRIPT language="JavaScript">
function image(num){
switch(num){
case 0:text="たとえばこんな感じ";break;
case 1:text="本当は画像を出したいのよ";break;
case 2:text="どうにかして";break;
}
document.form1.text1.value=text;
}
</SCRIPT>
</HEAD>
<BODY>
<P>テストマッチメンバー</P>
<TABLE border="1" cellspacing="0">
  <TBODY>
    <TR>
      <TD><A href="javaScript:void(0)"onmouseover="image(0)">ここにマウスを乗せると</A></TD>
      <TD rowspan="3" valign="top">
      <FORM name="form1"><input type="text"name="text1"size="30"></FORM>
      </TD>
    </TR>
    <TR>
      <TD><A href="javaScript:void(0)"onmouseover="image(1)">右に画像を出したい</A></TD>
    </TR>
    <TR>
      <TD><A href="javaScript:void(0)"onmouseover="image(2)">なんか違う・・・っ。</A></TD>
    </TR>
  </TBODY>
</TABLE>
</BODY>

#-------------------------------------------------------------------
目標に近い動作のサイトはここです。
→ http://www.okashi-net.com/mall/index.html

よろしくお願いします。
回答者 しあわせのツボ  [削除]  投稿日 2/25(月) 21:30:13
http://www.kinet.or.jp/h_ijuin/warehouse/test.html
急ぎで書いたのでソースは汚いですが、何をしているかはわかると思います。
functionにまとめるなりして、適当にどうぞ。
質問者 蒼の砦  [削除]  投稿日 2/26(火) 09:57:49
しあわせのつぼさんありがとうございました。
早速見せていただきました。

しかしながら「'document.picture1'はオブジェクトではありません」と
エラーで帰ってきてしまい、画像自体の変化は見られませんでした。

picture1=new Image();
をスクリプトで設定しても同じエラーがでてしまいます。

お時間がございましたら再度ご指導下さい。
回答者 いのちゃん  [削除]  投稿日 2/26(火) 12:25:26
http://www.kcb-net.ne.jp/ki-net/page143.html

テキストにカーソルを載せると文字が表示するように設定してありますので
この文字の所を画像に置き換えると“テキストにカーソルを載せると画像に
変わる”事が可能かも?
質問者 蒼の砦  [削除]  投稿日 2/26(火) 18:20:50
いのちゃんさんありがとうございました。
テキスト部分を画像に変えて早速トライしたところうまく表示されました!

ただ、画像処理数が多いので画像が増えると表示速度に支障が・・・。

そこでしあわせのつぼさんといのちゃんに頂いたソースをふまえ、
目標サイトの配列を使って今日一日改造してみたところ
見事めざしていた動きをすることができました。

http://www.nexte.co.jp/flatout/test.htm

ほんとにありがとうございました。

>しあわせのつぼさん
newでできなかったのは私の設定がおかしかったようです・・・。
ありがとうございました。
回答者 いのちゃん  [削除]  投稿日 2/26(火) 20:15:34
http://www.kcb-net.ne.jp/ki-net/page143.html
下方の画像表示で一部書き損じがありましたので正しく“hide”の値を
修正した結果、上方の例のように“hide”機能が有効になりました。

しかし乍ら既に所期の目的を達成されたようですのでよかったですねぇ。
おめでとうございました。(^_^)
回答者 ぴりり  [削除]  投稿日 2011/4/4(月) 10:46:14
いろいろ検索してここに辿り着きました。。

便乗質問させて下さい。


私のサイト環境なのですがCMSを利用しており、
<body>〜</body>の間でしかタグが利用できません。

画像単体でのロールオーバーは出来たのですが、
こちらの様なテキストにカーソルを合わせて、画像の変更の仕方が分かりませんでした。

まず、上記環境で出来るかどうかもわからないのですが、どなたかご教示お願いいたします。

返信(回答)する


Web裏技