- 締切済み
WEBに音を付けたい
サイドメニューをonmouseoverした時と、onclickした時に別々の音を付けたいです。 なかなかうまくいかないので、質問しました。 下記のコードをどうすればよいのでしょうか？ <?xml version="1.0" encoding="Shift_JIS"> <!DOCUTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml/DTD/xhtm1-strict.dtd"> <head> <meta http-equiv="Content-Type" content=text/css; charset="Shift_JIS" /> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="style.css" type="text/css" /> <script language="JavaScript" type="text/javascript"> function playSound(soundfile) { document.getElementById("img/shake.wav").innerHTML= "<embed src="img/shake.wav"+soundfile+"img/shake.wave" hidden="true" autostart="false" loop="false" />"; } </script> <title>2012 Backgammon Festival</title> </head> <body> <div class="main"> <a href="home.html"><img src="img/title.gif"></a> <h1> aaa</h1> <p>aaa</p> </div> <div class="menu"> <a href="greeting.html" onclick="sound(this)" title="img/roll.wav"><img src="img/greeting.gif" onmouseover="this.src='img/z_greeting.gif'" onmouseover="playSound('roll.wav')" onmouseout="this.src='img/greeting.gif'" alt="ご挨拶"></a><br> </div> </body> </html>
- leenami
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- Picosoft
- ベストアンサー率70% (274/391)
こんにちは。 ざっと見てみましたが、1点ほど気になる部分がありました。 <img src="img/greeting.gif" onmouseover="this.src='img/z_greeting.gif'" onmouseover="playSound('roll.wav')" onmouseout="this.src='img/greeting.gif'" alt="ご挨拶"> の部分ですが、 1つのタグ内にonmouseoverが2つあるので、 onmouseover="this.src='img/z_greeting.gif'; playSound('roll.wav');" とした方がよろしいかと思います。
関連するQ&A
- フレーム間のロールオーバーでエラーがでます。
いつも参考にさせてもらってます。 上下のフレームで、上のボタンから下の画像を変えるロールオーバーですが 画像まではどうにか変えられたのですが、リンクでスクリプトエラーが出てしまいます。 初心者でコピーして継ぎはぎしてるのでさっぱりです。 よろしくお願いします。 上のフレーム <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-language" content="ja"> <META http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows"> <title></title> <script type="text/javascript"> <!-- img_name=new Array(); img_name[0] = "bu05-12.gif"; img_name[1] = "bu05-13.gif"; img_name[2] = "bu05-14.gif"; img_name2 = "bu05-10.gif"; img1 = new Array(); img2 = new Image(); img2.src = img_name2; for(i=0; i<img_name.length; i++) { img1[i] = new Image(); img1[i].src = img_name[i]; } function mouse_over(which) { parent.bottom.document.images["swapImg"].src=img1[which].src; } function mouse_out(which) { parent.bottom.document.images["swapImg"].src=img2.src; } //--> </script> </head> <body> <DIV id="cont"> <div id="gnavi"> <A href="*"> <IMG src="bullet007.gif" onmouseover="this.src='b014lis.gif'" onmouseout="this.src='bullet007.gif'"></A> <A onmouseover="mouse_over(0)" onmouseout="mouse_out(0)" target="bottom" href="bottom-3.htm"> <IMG src="bullet008.gif" onmouseover="this.src='b014lis.gif'" onmouseout="this.src='bullet008.gif'"></A> <A onmouseover="mouse_over(1)" onmouseout="mouse_out(1)" target="bottom" href="bottom-3.htm"> <IMG src="bullet009.gif" onmouseover="this.src='b014lis.gif'" onmouseout="this.src='bullet009.gif'" ></A> <A onmouseover="mouse_over(2)" onmouseout="mouse_out(2)" target="bottom" href="bottom-3.htm"> <IMG src="bullet007.gif" onmouseover="this.src='b014lis.gif'" onmouseout="this.src='bullet007.gif'" ></A> </div> </DIV> </body> </html> 下のフレーム <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-language" content="ja"> <META http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows"> <title></title> </head> <body> <div id="visual"> <IMG src="bu05-10.gif" name="swapImg"> </div> </body> </html>
- ベストアンサー
- JavaScript
- javaもWEBも初心者もいいとこです。
よろしくおねがいいたします。 後任で一人でWEBをやることになってしまって、右も左もよくわかりません。 他の方が作成していましたjavaデータを試行錯誤したものが下記になります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>イベント情報</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="base.css" rel="stylesheet" type="text/css" media="all"> ～～中略～～ <div class="all-data"> <img src="22img/fg5000.JPG" width="300" height="300" border="0" name="IMG_5" alt="展示会"></div> <!-- コメント --> <div id="image-cap">5月29～30日 展示会１ </div> <!-- S画像 --> <div id="image-Sall"> <center> <img src="22img/fg5001s.JPG" width="45" height="45" border="0" onmouseover="if(document.images)IMG_5.src='22img/fg5001.JPG'"> ～～中略（以下5008まで続く）～～ <img src="22img/fg5008s.JPG" width="45" height="45" border="0" onmouseover="if(document.images)IMG_5.src='22img/fg5008.JPG'"> この後、～～中略～～から下をコピーして、 (1)fg5で始まる数字を、全てfg6に変更し、同じように8枚の画像を用意 (2)IMG_5.src=の部分を、IMG_6.src=に変更した。 これが、追加して変更した以下の文です。↓ <div class="all-data"> <img src="22img/fg6000.JPG" width="300" height="300" border="0" name="IMG_6" alt="展示会2"></div> <!-- コメント --> <div id="image-cap"> 6月1～10日 展示会2 </div> <!-- S画像 --> <div id="image-Sall"> <center> <img src="22img/fg6001s.JPG" width="45" height="45" border="0" onmouseover="if(document.images)IMG_6.src='22img/fg6001.JPG'"> （以下6008まで続く） <img src="22img/fg6008s.JPG" width="45" height="45" border="0" onmouseover="if(document.images)IMG_6.src='22img/fg6008.JPG'"> fg5で始まるデータの方は、問題なく、別画像が表示されたのですが、 fg6で始まる方のデータは、fg6001～fg6004までが表示されず、 fg6005～fg6008までは、ちゃんと表示されます。 こういう場合は何のミスが考えられるのでしょうか？
- ベストアンサー
- JavaScript
- JavaScriptにリンク設定は正しいですか
サイト作成中です。（アップはしていません） JavaScriptを使いギャラリーを設置しました。 （下記記述） これにサムネイルクリックでジャンプ出来るよう最初の一枚を <a href="index.html"></a>で囲んでみました。 <a href="index.html"><img src="gallery/cate/g (1)-s.jpg" title="eyes0271 梅" alt="梅" onmouseover="document.BigPhoto.src='gallery/cate/g (1).jpg';"></a> ジャンプは出来ましたが、この記述で問題ありませんか？ アップ後に JavaScriptに悪影響は及ぼしたりはしませんか？ ご教授ねがいます。 HTML ------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="stylesheet" href="css/gallery.css" type="text/css"> </head> <body> <div align="center"> <div id="gallery"> <div id="thumbs"> <a href="index.html"><img src="gallery/cate/g (1)-s.jpg" title="eyes0271 梅" alt="梅" onmouseover="document.BigPhoto.src='gallery/cate/g (1).jpg';"></a> <img src="gallery/cate/g (2)-s.jpg" title="eyes0272 桜" alt="桜" onmouseover="document.BigPhoto.src='gallery/cate/g (2).jpg';"> <img src="gallery/cate/g (3)-s.jpg" title="eyes0273 山" alt="山" onmouseover="document.BigPhoto.src='gallery/cate/g (3).jpg';"> <img src="gallery/cate/g (4)-s.jpg" title="eyes0274 川" alt="川" onmouseover="document.BigPhoto.src='gallery/cate/g (4).jpg';"> </div> <p><img src="gallery/cate/gallery.jpg" alt="表紙（デフォルト画像）" class="waku" name="BigPhoto"></p> </div> </div> </body> </html> ------------- CSS ------------- #gallery { width: 900px; height:280px; padding: 10px; background-color: #888888; } img.waku { display: block; width: auto; margin: 5px auto; } #thumbs { float: left; width: 270px; margin: 0; padding:0; } #thumbs img { width: 80px; height:60px; float: left; margin: 0 0 5px 5px; } よろしくお願いします。
- ベストアンサー
- JavaScript
- スタイルシートに関しての質問です。margin0 padding0と指定し居るのに、変なスペースが入ってしまいます。。。
スタイルシートで、 *｛ padding:0; margin:0; ｝ img{ padding:0; margin:0; } と指定しているのですが、なぜか画像でへんなスペースが入ってしまいます。どうしてでしょうか？ ソースは下記の通りです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <head> <META http-equiv=Content-Type content="text/html; charset=Shift_JIS"> <META content="新築マンション,賃貸,敷金ゼロ,礼金ゼロ,ペット可,内覧可能,水商売可,風俗可,東京,都内,マンション,アパート,一戸建, name=keywords> <title>株式会社</title> <link href="css/mainstyle.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wapper"> <div id="head"><img src="img/forward_rogo.gif" width="250" height="56" border="0" ></div> <div id="sidememu"> <table width="150" border="0" cellpadding="0" cellspacing="0" > <tr> <td><a href="#"><img src="img/menu1.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu13_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu5_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu4.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu11_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu10_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu3.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu9_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu6_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu8_h.gif" width="150" height="40" border="0"></a></td> </tr> </table> </div> <div id="main"> <div id="flash-a"> <img src="img/dammy.gif" width="650" height="150" border="0"> </div> <div id="main-1"> <img src="img/top_1.gif" width="650" height="40" border="0"> </div> </div> </div> </body> </html> cssは、 /* CSS Document */ *{ padding:0; margin:0; } img{ padding:0; margin:0; } body{ margin-left:auto; margin-right:auto; text-align:center; } #wapper{ width:820; } #head{ margin-top:20px; text-align:left; border-bottom:2px #000099 solid; } #sidememu{ margin-top:20px; background-color:#F00; float:left; } #main{ margin-left:10px; margin-top:20px; float:right; } です。すみません。教えてください！
- ベストアンサー
- その他([技術者向] コンピューター)
- ＨＴＭＬ、ＣＳＳ
ＦＣ２（無料サーバー）でホームページを作っているのですが、ＦＣ２の広告（Ｐｏｗｅｒｅｄ ｂｙ…という下に一行だけ出るもの）が私のホームページに表示されなくて困っています。テンプレートを借りて作成したページで、テンプレートのカスタマイズはしていません。広告が表示されないと規約違反になってしまうので、表示させたいのです。何が原因でしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="st.css" type="text/css"> <title>タイトル</title> </head> <body id="TOP"> <!-- ページ全体 --> <div id="page"> <!-- ヘッダー --> <div id="head"> <h1><a href="index.html">Your Sitename</a></h1> </div> <!-- メニュー --> <div id="menu"> <ul> <li><a href="sample.html">SAMPLE</a> <li><a href="link.html">LINK</a> <li class="on"><a href="text_menu.html">TEXT</a> <li><a href="index.html">INDEX</a> </ul> </div> <!-- コンテンツ --> <div id="contents"> <h2>MENU</h2> <div class="text"> <h3>SHORT STORY</h3> <ul class="sub01"> <li><a href="text.html">STORY01</a> </ul> </div> <div class="text"> <h3>LONG STORY</h3> <h4>TITLE01</h4> <ul class="sub02"> <li><a href="text.html">1</a> <li><a href="text.html">2</a> </ul> </div> <div class="text"> <h4>ILLUST01</h4> <ul class="sub02"> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> </ul> </div> <div class="pagetop"><a href="#TOP">▲Top</a></div> </div> <!-- フッター --> <div id="foot"> <ul> <li> </ul> </div> </div> </body> </html>
- ベストアンサー
- HTML
- マウスが離れたら元々表示されていた画像に戻したい
次のサンプルでは、 (1) 最初はimg0.gifが表示されています (2) 文字列「やまだ」のうえにマウスが乗るとimg1.gifが表示されます (3) 文字列「すずき」のうえにマウスが乗るとimg2.gifが表示されます (4) 文字列「さとう」のうえにマウスが乗るとimg3.gifが表示されます ここで、各文字列がらマウスが離れたときは表示する画像を最初の「img0.gif」に戻したいです。 素人なりの予想では、たとえば <div onmouseover="changImg1(0,1)">やまだ</div> を <div onmouseover="changImg1(0,1)" onmouseout="changImg1(0,0)">やまだ</div> のように 修正すればできそうな気がしましたが、試すとできませんでした。 具体的な記述をご教示いただきたく、よろしくお願い致します。 <html><head> <script language="javascript"> <!-- if(navigator.appVersion.charAt(0)>=3) { movimg=new Array() movimg[0] = new Image(); movimg[0].src='img0.gif'; movimg[1] = new Image(); movimg[1].src='img1.gif'; movimg[2] = new Image(); movimg[2].src='img2.gif'; movimg[3] = new Image(); movimg[3].src='img3.gif'; }; function changImg1(imgNoA,imgNoB) { if(navigator.appVersion.charAt(0)>=3) { document.images[imgNoA].src=movimg[imgNoB].src; }; }; //--> </SCRIPT> </head><body> <img src="img0.gif"> <div onmouseover="changImg1(0,1)">やまだ</div> <div onmouseover="changImg1(0,2)">すずき</div> <div onmouseover="changImg1(0,3)">さとう</div> </body></html>
- ベストアンサー
- JavaScript
- jqueryを使ったスクロール画面が正しく作動しません。
jqueryを使ったスクロール画面が正しく作動しません。 HTMLに関する質問コーナーにはふさわしくない質問かもしれませんが、jquery.jstocktickerを使ったスクロール画面に関して教えて欲しいことがあります。 以下のようなものを書いてみました。しかし、スクロールされるべき文字（この場合は「テスト」）が右からでてきません。左端に現われてすぐに消えてゆきます（一様左にスクロールされながら消えるのですが）。 どこが間違っているのかをご指摘していただければと思い、投稿させていただきました。 よろしくお願いいたします。 <!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-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>スクロール</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jstockticker-1.1.js"></script> <link href="jQuery/innerFade/css/reset.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/fonts.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/jq_fade.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function() {$("#ticker").jStockTicker({interval: 5});}); </script> <style type="text/css"> div#tickercontainer{width: 680px;margin-left:auto;margin-right:auto;position:relative} div#wrap{position:relative;padding:5px; overflow: hidden} div#ticker{position:relative} div#ticker span{padding-right:20px} </style> </head> <body> <div id="tickercontainer"> <div id="wrap"> <div id="ticker"> <span> テスト</span> </div> </div> </div> </body> </html>
- ベストアンサー
- HTML
- hoverとmouseoverを連動させるには？
お世話になります。 リンクテキストにはスタイルシートでhover設定を行い、gifにはonMouseOverで別の色のgifを読み込ませています。 onMouseOverイベント時にはリンクのhoverがちゃんと行われるのですが、テキスト側にマウスを当てた時、gifのonMouseOverが発生するように （連動してgifの色が変わるように）するにはどのようにしたらよろしいのでしょうか？ ソースの一部を乗せます <A HREF="help.html"><IMG SRC="img/bul1.gif" BORDER="0" onMouseOver="this .src='img/bul2.gif'"onMouseOut="this .src='img/bul1.gif'" ALIGN="LEFT"> リンクテキスト</A></FONT> よろしくお願いします。
- ベストアンサー
- HTML
- プルダウンメニューの表示
+のgifをクリックすると-のgifと詳しい表示が出る様にHTMLを書いたのですが、 表示された後で閉じると、その+のgifが再表示されません。 何が足りなくてそうなってしまうのでしょうか？ また、親メニューの+が-になっている時、gifの-を表示させる方法を教えてやって下さい…。 よろしくお願いします。 <body bgcolor="#000000" text="#ffffff" link="#000000" alink="#808080" vlink="#ff0000"> <div id='div1' style="position:absolute; left:10; top:100; width:250;"> <a id="menu1" href="#" onClick="onmenu(this,'menu11');return false" style="text-decoration:none;"> <img src="p.gif" alt="+" border="0"></a><font size="+2">BBS</font> <div id="menu11" style="position:absolute; left:-2; top:16; visibility:hidden;"> ├<a href="http://…" target="_top" style="text-decoration:none;"> <img src="m.gif" alt="-" border="0"></a> aBBS<br> ├<a href="http://…" target="_top" style="text-decoration:none;"> <img src="m.gif" alt="-" border="0"> </a> bBBS<br> └<a href="http://…" target="_top" style="text-decoration:none;"> <img src="m.gif" alt="-" border="0"></a> cBBS </div></div></div> </body>
- ベストアンサー
- HTML
- 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
お礼
ありがとうございます！ むー、なるほど・・です。