- 締切済み
Javaスクリプトについて
Javaを使ってやりたい事があります。 ページ内に自分で作った画像のボタンを設置して並べます。 そのボタンにマウスを乗せると、下のスペースに説明文が表示されるようにしたいのです。 例えば、ボタンが４つ並んでいて、左からstep1、step2・・となっています。 step1のボタンにマウスを乗せると、ボタンの下のスペースに文章が表示され step2のボタンにマウスを乗せると、step2の文章が表示されます。 ボタンからマウスを外しても文章は表示されたままです。 ソースを教えて頂けると助かります。 よろしくお願いします。
- hiro9559
- お礼率66% (2/3)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 動画というのはサンプルのことでしょうか。 それでしたらこの回答の為です。 ちょっと手が空いていましたので作ってみました。 (基本的に回答するとき、暇があればサンプルを作っています)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 jQueryを併用したものですが作ってみました。 ==== 動作サンプル http://hppg.moe.hm/okwave/qa/q7381444/ ==== ソース <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>【OKWave回答サンプル集】Javaスクリプトについて</title> <link rel="stylesheet" href="/okwave/qa/css/basic.css" type="text/css" /> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery','1');</script> <script type="text/javascript"> $().ready ( function() { $('div.box img').mouseover ( function() { $(this).next().show(); }); }); </script> <style type="text/css"> div.area { position: relative; height: 210px; } div.box { position: absolute; width: 200px; height: 200px; border:solid 1px #333; } div.box img { cursor: pointer; } div.box p { padding: 10px; font-size: 0.8em; display: none; } #step1 { top: 0; left: 0; } #step2 { top: 0; left: 210px; } #step3 { top: 0; left: 420px; } #step4 { top: 0; left: 630px; } </style> </head> <body> <h1>Javaスクリプトについて(q7381444)</h1> <h2>サンプル</h2> <div class="area"> <div id="step1" class="box"> <img src="images/step1.png" width="200" height="50" alt="step1" /> <p> step1の説明文がここに入るはずだよ。step1の説明文がここに入るはずだよ。 </p> </div> <div id="step2" class="box"> <img src="images/step2.png" width="200" height="50" alt="step2" /> <p> step2の説明文がここに入るはずだよ。step2の説明文がここに入るはずだよ。 </p> </div> <div id="step3" class="box"> <img src="images/step3.png" width="200" height="50" alt="step3" /> <p> step3の説明文がここに入るはずだよ。step3の説明文がここに入るはずだよ。 </p> </div> <div id="step4" class="box"> <img src="images/step4.png" width="200" height="50" alt="step4" /> <p> step4の説明文がここに入るはずだよ。step4の説明文がここに入るはずだよ。 </p> </div> </div> </body> </html> <!-- q7381444 -->
- DIooggooID
- ベストアンサー率27% (1730/6405)
下記の URL では、on Mouse over で画像を変更しています。 http://www.red.oit-net.jp/tatsuya/java/image3.htm
お礼
有難うございます。 参考になりました。 URLも今後の為にお気に入りに入れました。
お礼
めちゃくちゃ丁寧に教えて頂いてありがとうございます。 無事に出来ました！ ところで、この動画はこの為に作ってくれたんですか？ 以前、ヤフー知恵袋にも何度か質問を投稿した事がありますが こんなに丁寧にお答え頂いた方は初めてです。 本当にありがとうございました。