- 締切済み
Javaスクリプトについて
Javaを使ってやりたい事があります。 ページ内に自分で作った画像のボタンを設置して並べます。 そのボタンにマウスを乗せると、下のスペースに説明文が表示されるようにしたいのです。 例えば、ボタンが4つ並んでいて、左から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も今後の為にお気に入りに入れました。
関連するQ&A
- Javaスクリプトが分からないので困っています
悩んでいるので、お分かりの方がいれば教えていただきたいです。 下記サイトのように、画像の上にマウスを乗せると、コメント(説明文)が表示されるのには、どのような記述をすればよいのですか?? http://bitway.bb.goo.ne.jp/miyazawa-idol たぶん、Javaスクリプトかな?と勝手に思っておりますが・・・ もちろんJavaではなくてもいいのですが・・・ よろしくお願いします。
- 締切済み
- ネットトラブル
- JAVAスクリプト
現在ホームページ作成中です。 そこでページ内の一部分がJAVAスクリプトで写真が自動で切り替わり 切り替わるときにフェードアウト、フェードインし、かつ、ループしないで、6枚の写真表示を した後、6枚目で写真が止まり、フェードアウトし写真表示部分が白一色になったときに 下の重なってるバックグラウンド画像が出てこないようにしたいです。 また、対応するのもIEだけでなくファイヤーフォックス等にも全て対応している JAVAスクリプトソースを教えてください。 面倒な質問ですが、お助けください。よろしくお願いします。
- 締切済み
- JavaScript
- JAVAスクリプトについて
JAVAスクリプトで作られたこのページなんですが↓ http://www.arch-holesale.co.jp/faq/faq.html 下の方のQボタンを押したらJAVAスクリプトで別メニューが出てきます このシステムを自分のHPに使いたいです。 どうすればいいでしょうか?
- ベストアンサー
- JavaScript
- java script で画像を降らせる
私は、今年やっと念願のHPを立ち上げる事が出来ました。ホームページビルダーでHPを作っています。 その中で、花びら等が上から舞って来るものとか 泡ぶくが下から上にあがって行く。などを設置したいのですが、またいろいろ設置方法が説明したページもあって、ソースをコピー&ペーストして貼って、何回もやってみるのですが、プレビューでみると四角の中が×になったものが舞い上がっています。(画像)花びら等になりません。 HTMLソースが用意されていて・・ (画像も保存してあります) それをどのようにしたら良いのかが全く分かりません。出来れば詳しく教えていただけたら嬉しく思います。どうぞよろしくお願いします。
- ベストアンサー
- その他(インターネット・Webサービス)
- ジャバスクリプト機能の繰り返し表示の仕方を教えて!
ジャバスクリプトについてはまったくの素人です。 ジャバスクリプトを使って ラジオボタンで表示する画像をかえる機能を下記サイトから見つけました。 http://www.sky.sannet.ne.jp/masapine/java_gazou.html この機能を添付ファイルのように、同一Webページ内で繰り返して表示し使いたく、プログラムのソースをHTMLのbodyの中に繰り返しコピペしてみたのですが、機能しなくなってしまいます。 同一Webページ内に当該スクリプト1つであれば機能するのですが、2つ以上になると、すべて機能しません。表示するのには方法があるのでしょうか?それともこのようなことは不可能なことなのでしょうか? どなたかこの疑問にお答え頂ければ幸いです。宜しくお願いします。
- ベストアンサー
- JavaScript
- JAVA SCRIPT
外国語の会話の文章と訳の表を作って会話のところにマウスが触れたら読み方を表示できるようなページを作りたいのですが、どのようにしたらいいでしょうか? HPなどでタグを調べたのですが、うまくいきません。 ちなみに初心者なのでわかりやすく、簡単に説明していただけるとありがたいです。
- ベストアンサー
- ブログ
- jQuery、移動中に他スクリプトを無視したい
マウスオーバーで変化する画像が多数あるページに、jQueryを使ったTopへゆっくりスクロールしながら戻るボタンを設置しています。 ボタンを押してスクロール中、マウスカーソルの下に、マウスオーバーで変化する画像がたまたま差しかかると、マウスオーバー動作が起きてしまい、一瞬、スクロールがひっかかるような、ぎこちない感じになります。 キレイにスクロールさせたいのですが、スクロール中にマウスオーバーを無視するようなスクリプトってありますか? tooltipみたいな動作も無視できたらうれしけれど。 よろしくお願いいたします。 (ボタンを画面の端に設置するのが安全策なんですが、デザイン上、使いたくないので、その方向は無視して下さい)
- 締切済み
- JavaScript
- JAVA SCRIPTの縦スクロールについて教えて下さい
JAVA SCRIPTについての質問です。 初心者なもので、よくわからないので教えていただきたいです。 縦に長いHTMLページの場合に、ページ内の特定の場所にリンクさせて(マウスでクリックした際に)スクロールしてその場所まで移動させたいのですが・・・ ページの一番上までスクロールして移動させる方法はわかったのですが、ページの途中の特定の場所でとめる方法がわかりません。 Y軸の値を指定すればできると思ったのですが、なかなかうまくいきません。 どなたか心優しい方、ソースをご教授いただけないでしょうか? お願いいたします。
- ベストアンサー
- その他(インターネット・Webサービス)
- ジャバスクリプト
お世話になります。 今、私はジャバスクリプトに挑戦しています。 不明な点が発生しました、よろしくご指導ください。 本文 このプログラムは、Webページの閲覧をパスワードによって制限するというものらしいのですが、 私は、htmlソースの<body></body>内に次のようなjavascriptプログラムを入力しました。 <SCRIPT LANGUAGE="JavaScript"> <!-- function passWordCheck(){ pass=prompt("パスワードを入力してください。",""); if (pass !="") { location.href = pass + ".htm"; }else if(pass == null){ passWordCheck(); } } //--> </SCRIPT> <P ALIGN="center"><STRONG>パスワードを入力して入室してください。</STRONG></P> <P ALIGN="center"> <INPUT TYPE="button" VALUE="入室する" onclick="passWordCheck()"> </P></TD> </TR> そこで私は、結果を確認するためブラウザを表示させ、ブラウザ上で表示された(入室する)というボタンをクリックしました。すると(Explorerユーザープロンプト)という小さな画面がでてその中には、(パスワードを入力してください)とあるのです。 私は、パスワードとして表示させたいWEBページのURLを入力しました。 すると、ERRORとして(指定されたファイルは見つかりません)として、 表示を希望するページが表示されません。 何とかしてこのプログラムを活用させたいのですが、よろしくご指導くださいますようお願いします。
- ベストアンサー
- JavaScript
- javaスクリプトが反映されない
簡単なJAVAスクリプトを一部分に使用したサイトをサーバーにアップしたのですが、反映されず困っています。 具体的には、マウスがとあるテキストの上に乗ると、吹き出しのように画像が表示されるとう仕組みの物です。 不思議なのは、仮アップの為の無料のサーバー(FC2)にアップをすると反映されるのですが、本番のサーバー(さくら)にアップされると反映されません。 JAVAスクリプトはいくつか使用しているのですが、「マウスがとあるテキストの上に乗ると、吹き出しのように画像が表示される」所のみ反映されません。 それ以外のスクリプトは反映されているのですが・・・ 何かアドバイスがありましたらよろしくお願い致します。
- ベストアンサー
- HTML
お礼
めちゃくちゃ丁寧に教えて頂いてありがとうございます。 無事に出来ました! ところで、この動画はこの為に作ってくれたんですか? 以前、ヤフー知恵袋にも何度か質問を投稿した事がありますが こんなに丁寧にお答え頂いた方は初めてです。 本当にありがとうございました。