• 締切済み

タグ(要素)によってそれぞれに動作をさせることは可能でしょうか。

タグ(要素)によってそれぞれに動作をさせることは可能でしょうか。 どういうことをやりたいかというと、 ひとつひとつの要素で記述をするのではなく、 たとえば、ページ内のimg要素の部分、font要素の部分のどこを押しても、それぞれの要素 に対応した音を出す(文字を押せばある音、画像を押すとまた別の音がでる)ということを やりたいのですが、何か方法がありますでしょうか。 ブラウザはInternet Explorer7で動かそうと考えています。 よろしくお願いいたします。

  • HTML
  • 回答数2
  • ありがとう数10

みんなの回答

  • JaneDue
  • ベストアンサー率75% (263/350)
回答No.2

IEだけなら属性を付加してbgsoundのsrcを変えれば可かと。 BGM用のタグをどこかに入れる <bgsound id="mySound"> //以下<script>内 //自分の音を鳴らす function soundPlay(){   document.getElementById("mySound").src = this.sound; } //imgタグのすべてに音とonclick追加 var objs = document.getElementsByTagName("img"); var n = objs.length; for(var i=0; i<n; ++i) {  objs[i].sound = "○○○.wav";  objs[i].onclick = soundPlay; } タグ別に音を設定すれば鳴り分けできるはず。ちなみにonClick は×。小文字が正解らしい。

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

どこを押されたかは、javascriptでクリックイベントを監視すれば、 簡単に取得できますが、「ある音を出す」の部分が困難だと思います。  やはり、予め各々の音のサウンドファイルを準備しておいて、javascript でコントロールし、再生するしかないか...

関連するQ&A

  • 一つのタグ内での要素の優先順位?ってあるのでしょうか?

    こんにちは。よろしくお願いします。 自分が作成していたWebシステムのページをアクセシビリティチェックツール~にかけ出てきたエラーのことでちょっと疑問に思い質問させていただきます。 ・一つのタグ内の要素の優先順位は、厳密に言うとあるのだろうか? ということなんですがー。。。 チェックにかけた項目は <img>タグです。 ・<img src ="img.gif" alt ="イメージ画像" width ="100" height ="100"> と ・<img src ="img.gif" width ="100" height ="100" alt ="イメージ画像"> と、の違いなのですが、上記タグではOKが出るのですが、下記タグでは、間違い!!と表示されるようです。 この場合、<img>タグ内の要素について、src→alt→width→heightという優先順位がついているのか、それとも、ただ単にそのアクセシビリティチェックツールのバグなのか。 タグ内要素の優先順位~についてご存知の方がいましたら、ご教授願えませんでしょうか?よろしくお願いします。

    • ベストアンサー
    • HTML
  • XHTML1.0で空要素タグの「/」は省略可能か

    XHTML 1.0で、エンコードがUTF-8であるなど一定の条件を満たせばXML宣言の省略は可能と聞きましたが、 空要素タグの「/」についてはどうでしょうか。 あるサイトで、XHTML 1.0で書かれているはずのページで、空要素タグに「/」が入っていないので (つまり、<br>とか<img src="...">のようになっている) ちょっと気になりました。 ブラウザーでは一応ちゃんと表示されてはいるようですが。

    • ベストアンサー
    • HTML
  • タグが効きません

    最近パソコンを新しくしたら、文字の大きさを変えるタグが効かなくなりました。 <FONT size="●"></font> と打っても、タグで挟んでいない部分の文字と全て同じ大きさになってしまいます。 ●には、2~7まで入れているのですが、やはりどのサイズでも全て同じになってしまいます。 太字にする<b></b>、色を変える<FONT color="#○○○○○○"></font>などは効きます。 友人に確かめてもらったところ、そちらのパソコンからはちゃんと見れたそうで、また、以前私が使っていたパソコンからもちゃんと見れていました。 ブラウザの文字のサイズは小ですが、中にしても、どの大きさにしても文字全部が大きくなるだけで、解決できませんでした。 なぜでしょうか?誰か解決法を知っていたら、教えてください。

  • HTMLページ内のタグに対してのイベント

    HTMLページ内のタグに対してのイベント getElementsByTagNameで指定したタグの部分(画像やリンク)をクリックすると関数を呼び出すという動作をやりたいのですが、どうも上手くいきません。 試しに下記のようなプログラムを作ってみたのですが、ページを表示した後すぐにalert関数が呼び出されてしまいます。 あるタグの部分を押したときに関数を呼び出すというやり方を知っている方がおられましたら、ご教授願います。 ひとつひとつにIDを割り当てるというやり方でなくて、タグ別にイベントを判定するやり方を考えています。 <html xmlns="http://www.w3.org/1999/xhtml" > <head>   <title></title>   <script type="text/javascript">    window.onload = function ini(){     document.getElementsByTagName("img").onClick = alert("これは画像です");    }   </script> </head> <body>  <img src="..." />  <img src="..." />  <img src="..." />  <img src="..." /> </body> </html>

  • タグが正常に動作しません。

    以前質問したFTPは諦めて、メモ帳でタグを使って ホームページを作りました。 参考にしたのは以下のサイトなのですが、 http://village.infoweb.ne.jp/~hometown/index.htm のサイト内の「画像を貼る(基本)」に書いてあった タグがうまく動作しません。 <img src=*****.gif alt=&&& width=115 height=80> というタグなのですが、*****の部分に画像のファイル名をいれます。 この方法を使うと、画像をアップローダーでアップロードしなくてすむようです。 実際に正しく(半角英数)で入力してみると、 自分のパソコンの中では見れるのですが、 インターネットに接続して誰からでも見られるようにすると×印がでてきてしまいます。 なぜでしょうか?お願いします。

  • タグ切り替えのJavaScriptについて

    タグを切り替えるJavaScriptと http://archiva.jp/web/javascript/tab-menu.html (参考サイト) ロールオーバーのJavaScript http://css-happylife.com/template/14/ (参考サイト) この2つを組み合わせようと思ったのですが、どうにもうまくいきません。 今記述しているままではロールオーバーで画像が切り替わりますが、選択しているタグが元の画像に戻ってしまいます。 詳しく説明すると、タグ切り替えのサンプルページでは、Page3を押すとPage3のタグの部分が黒く切り替わっていると思います。しかし、今の記述ではロールオーバーの時しか画像が変わらずマウスを外すと元に戻ってしまいます。 サンプルページではフォントとbackgroud-colorを使用して #tab li a:hover, #tab li.present a { border-color: #333; color: #000; } ここで適用していると思います。 しかし、私は画像を使って切り替えたいのです。 色々試してみたのですが、どうにもうまくいかないため投稿しました。 お力添えよろしくお願いします。 ↓現在の記述↓ <!------------html------------> <ul id="tab"> <li><a href="#page1"><img src="img/about_gnavi_what_off.gif"></a></li> <li><a href="#page2"><img src="img/about_gnavi_type_off.gif"></a></li> <li><a href="#page3"><img src="img/about_gnavi_tellme_off.gif"></a></li> </ul> <!------------css------------> ul#tab{ margin:0; padding:0; } ul#tab li{ float:left; display:inline; margin:8px 0 0 10px; }

    • ベストアンサー
    • CSS
  • タグ付のブラウザから、古いタイプのブラウザへ戻す方法は?

    WindowsXPを使っております。 ずっと以前ですが、アップデートによって突然ブラウザ(internet Explorer)の上部分が変わり、タグを作る事によって別のページを同ウィンドウ内に開く事が出来るようになっていました。 この状態から、タグを作る機能のない、昔(?)のようなブラウザにする方法はありますか? わかりにくかったらスミマセン。名称が分からないので…。

  • JavaScriptでタグを含む要素が返ってくる

    const base = document.getElementById('parent'); const children = base.children; console.log(children[0]); console.log(children[1]); console.log(children[2]); 下に記述したHTMLの<ul>の子要素を取得するために上記のように記述しました。この場合添付画像のようなタグを含めた要素が返ってきます。タグの中に書かれた内容を取得するにはtextContentを使えば良いようです。 初心者なもので、 <タグを含めた要素を取得してどんな使い道があるのでしょうか? 意味がよくわかりません。  使い慣れた方、これの使い道を教えてください。宜しくお願いいたします。 <ul id="parent"> <li id="first">1番目</li> <li id="second">2番目</li> <li id="third">3番目</li> </ul>

  • createElementによる空要素の生成について

    こんにちは。 createElementで出来る要素の生成についての質問です。 createElementでbrやimgなどの空要素を生成したいのですが、できあがったもののソースを見ると、「<br>」や「<img>」など終了タグがついていないものが生成されてしまいました(Firefoxの「選択した部分のソースを表示」で確認)。 XHTML文書としてページ作成しているので、どうにも具合悪いです。 終了タグのついた空要素の生成方法など、対処法があれば教えていただけないでしょうか。

  • 要素の抽出と埋め込み

    PHP初心者です。 同一のファイル内で、特定のタグに囲われた箇所に、別のタグ内の要素を埋め込みたいと思っています。 具体的には、 <title>hoge ホゲ</title>のhogeの部分が、同ファイル内の <body id="hoge">のhogeの部分から持ってくるようにしたいのです。 なぜなら、複数のページで<head>内の記述をincludeで使いまわしていますが、<title>には、各ページで違う表記をしたいのです。 ここで、タイトルとして使えるユニークなIDは<body id="hoge">の部分となります。 http://oshiete1.goo.ne.jp/qa2481220.html に、似たような質問がありましたが、わたしには応用ができませんでした。 すいませんが分かる方、ヘルプよろしくお願い致します。

    • ベストアンサー
    • PHP

専門家に質問してみよう