html内でのマウスオーバー時に、他の場所でswfを表示させたい

2023/10/14 17:25

このQ&Aのポイント

htmlで作成したページ内でマウスオーバー時に、別の箇所でswfを表示させる方法についてわからない
h1タグの箇所に配置されたimgタグをswfに変更する方法についても教えてください
マウスオーバーするメニューごとに表示させるswfを変更したい

ベストアンサー

html内でのマウスオーバー時に、他の場所でswfを表示させたい

2007/06/15 19:10

htmlでページを作成しています。そのなかで、マウスオーバーの際に、マウスオーバーした箇所（liタグの箇所）ではなく、別の箇所（h1タグの箇所）でswfを表示させたいのですが、方法がわかりません。 h1タグの箇所は、今imgタグを入れていますが、最初からswfをいれておいて、別のswfに変更というものでもいいのですが。マウスオーバーするメニューごとに表示させるswfは変更したいです。ソースは以下の通りです。 <html> <head> <body> <h1> <img src="img/logo.gif" alt="" width="252" height="125"> </h1> <ul> <li id="menu1"><a href="about">about</a></li> <li id="menu2"><a href="archive.html">archive</a></li> </ul> </body> </html> どなたか、ご存知の方、いらっしゃいませんか？よろしくお願いします。

goodneco2005
お礼率33% (2/6)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

mahny
ベストアンサー率74% (57/77)

2007/06/16 00:57 回答No.1

単純にh1タグにid属性を付けてinnerHTML()で差し替えるのが簡単かも。もっと良いやり方があるかもしれないけどとりあえずIE7で動いたので投下してみます。 (注意：全角空白でインデントしています) <html> <head> 　<script language="javascript" type="text/javascript"> 　 　</script> 　<title>フラッシュ差し替え</title> </head> <body> 　<h1 id="swf_screen" style="border: solid 1px #ff0000; width: 260px; height: 130px;"> 　　<img src="img/logo.gif" alt="" width="252" height="125"> 　</h1> 　<ui> 　　<li id="menu1"> 　　　<a href="about.html" onMouseOver="flipSwf(about.swf', 252, 125);" onMouseOut="flipSwf(null, 0, 0);">about</a> 　　</li> 　　<li id="menu2"> 　　　<a href="archive.html" onMouseOver="flipSwf('archive.swf', 252, 125);" onMouseOut="flipSwf(null, 0, 0);">archive</a> 　　</li> 　</ui> </body> </html> もし、ちらつきや読み込み時間が気になるなら最初にスタイルシートで visibility: hidden; で非表示状態にしておいて、マウスが乗ったときだけスクリプトで visibility: visible; にする方法でもいけそうですね。

質問者

お礼 2007/06/16 01:34

ありがとうございます！早速試してみたところ、まさに、求めていたものが可能になりました。こんなに素晴らしいコード記入いただきまして、本当にありがとうございます！感謝感謝です。

関連するQ&A

初心者です　jQueryのマウスオーバーについて
jQueryを使った画像を使ったメニューを作成しています。 <ul class="drop2">をマウスオーバーしたときに親の位置にある画像１.gifが画像１_o.gifに切り替わるようにしたいと思っています。調べながら作ってみたのですが、画像の切替がうまくいきません。 parentを使わずに画像1.gifをdivで囲って指定すれば切り替わったのですが、2つ以上メニューを作ると、他のulにマウスオーバーしたときも切り替わってしまいます。ご教授して頂けると嬉しいです。よろしくお願いいたします。 ■スクリプト部分 jQuery(function ($) { $('ul.drop2').mouseover(function () { // console.log('mouseover'); デバック用 var onSrc = $（this).parent('ul.drop1 a img').attr('src').replace('.gif', '_o.gif'); $（this).parent('ul.drop1 a img').attr('src', onSrc); }); $('ul.drop2').mouseout(function () { var onSrc =$（this).parent('ul.drop1 a img').attr('src').replace('_o.gif', '.gif'); $（this).parent('ul.drop1 a img').attr('src', onSrc); }); }); ■html部分 <ul class="drop1"> <li><a href="/"><img src="画像1.gif" alt="HOME" /></a> <ul class="drop2"> <li><a href="#"><img src="画像1-1.gif" alt="HOME" /></a></li> <li><a href="#"><img src="画像1-2.gif" alt="HOME" /></a></li> </ul> </li> </ul>
- ベストアンサー
- JavaScript
jqueryアコーディオンのマウスオーバー、マウスアウトでの開閉
お世話になります。js初心者の者です。 jqueryのアコーディオンメニューを設置したいのですが、親<li>へのマウスオーバーで開く、子<li><ul><li>からのマウスアウトで閉じるという動作がうまくいきません。また、オープン時はすべて閉じた状態にもしたいのですが。現状クリックでの開閉です。 htmlのソースです。 <ul class="acc"> <li><a href="1">category1</a> <ul class="fxmn"> <li><a href="11">menu 1-1</a></li> <li><a href="12">menu 1-2</a></li> <li><a href="13">menu 1-3</a></li> </ul> </li> <li><a href="2">category2</a> <ul class="fxmn"> <li><a href="21">menu 2-1</a></li> <li><a href="22">menu 2-2</a></li> <li><a href="23">menu 2-3</a></li> <li><a href="24">menu 2-4</a></li> </ul> </li> <li><a href="3">category3</a> <ul class="fxmn"> <li><a href="31">menu 3-1</a></li> <li><a href="32">menu 3-2</a></li> <li><a href="33">menu 3-3</a></li> <li><a href="34">menu 3-4</a></li> <li><a href="35">menu 3-5</a></li> </ul> </li> </ul> jqueryのソースです。 var j$ = jQuery; j$(function(){ j$(".acc").each(function(){ j$("li > a", this).each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); $this.click(function(){ var params = {height:"toggle", opacity:"toggle"}; j$(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); マウスオーバーのみでの開閉は$this.click(function()をmouseoverに書き換えればできるのですが。また、どのサンプルを見ても必ず初期段階が１項目開いた状態になっているのも、閉じて表示させたいのです。よろしくご指導お願いします。
- ベストアンサー
- JavaScript
タグ切り替えのJavaScriptについて
タグを切り替えるJavaScriptと http://archiva.jp/web/javascript/tab-menu.html （参考サイト）ロールオーバーのJavaScript http://css-happylife.com/template/14/ (参考サイト) この２つを組み合わせようと思ったのですが、どうにもうまくいきません。今記述しているままではロールオーバーで画像が切り替わりますが、選択しているタグが元の画像に戻ってしまいます。詳しく説明すると、タグ切り替えのサンプルページでは、Page３を押すとPage3のタグの部分が黒く切り替わっていると思います。しかし、今の記述ではロールオーバーの時しか画像が変わらずマウスを外すと元に戻ってしまいます。サンプルページではフォントとbackgroud-colorを使用して #tab li a:hover, #tab li.present a { border-color: #333; color: #000; } ここで適用していると思います。しかし、私は画像を使って切り替えたいのです。色々試してみたのですが、どうにもうまくいかないため投稿しました。お力添えよろしくお願いします。 ↓現在の記述↓  <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>  ul#tab{ margin:0; padding:0; } ul#tab li{ float:left; display:inline; margin:8px 0 0 10px; }
- ベストアンサー
- CSS
マウスオーバーの合体
マウスオーバーのプルダウンメニューとマウスオーバー画像変更スクリプトを組み合わせることは可能なのでしょうか？イメージとしては所期画面に画像Ａがあり、マウスを載せると画像Ａが画像Ｂになり、更に画像Ｂの下にプルダウンメニューが表示されるイメージです。尚、現在は以下の組み合わせがうまくいかない為（不可能？）個々にスクリプトを記載しておきます。 ↓↓↓↓↓↓マウスオーバーのプルダウンメニュー↓↓↓↓↓↓ <html> <head> <script language="JavaScript"></script> </head> <body> <img src="main.png" onMouseover="pdMenu('Menu')"><br> <div id="Menu" style="visibility:hidden" onMouseout="pdMenu('Menu')"> <a href="http://www.yahoo.co.jp/" ><img src="sub01.png" border="0"></a><br> <a href="http://www.google.co.jp/"><img src="sub02.png" border="0"></a><br> </div> </body> </html> ↑↑↑↑↑↑マウスオーバーのプルダウンメニュー↑↑↑↑↑↑ ↓↓↓↓↓↓マウスオーバー画像変更スクリプト↓↓↓↓↓↓ <img border="0" src="main.png" onmouseover="this.src='main2.png'" onmouseout="this.src='main.png'"> ↑↑↑↑↑↑マウスオーバー画像変更スクリプト↑↑↑↑↑↑
- 締切済み
- JavaScript
マウスオーバーで画像を変更する方法について
下記のソースでマウスオーバー時に文字の後ろの画像を変更したいと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。なお、文字の長さは可変のため、何文字になるかはわかりません。 <!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" /> <title>title</title> <style type="text/css">  </style> </head> <body> <ul class="category"> <li><a href="http://oshiete.goo.ne.jp/category/214/">ライフ<img src="http://oshiete.goo.ne.jp//images/2010renew/folder_s.png" alt="" width="15" height="13" /></a></li> <li><a href="http://oshiete.goo.ne.jp/category/207/">デジタルライフ<img src="http://oshiete.goo.ne.jp//images/2010renew/folder_s.png" alt="" width="15" height="13" /></a></li> <li><a href="http://oshiete.goo.ne.jp/category/212/">趣味<img src="http://oshiete.goo.ne.jp//images/2010renew/folder_s.png" alt="" width="15" height="13" /></a></li> </ul> </body> </html> 以上、宜しくお願いします。
- ベストアンサー
- HTML
CSSのロールオーバーがIEで崩れます
CSSのロールオーバーでメニューを制作しています。背景画像のポジションを変えて、1枚の画像でロールオーバーさせるというよくあるものです。 Mac+Safari、Firefoxではきちんと表示されるのですが、 Win+IE7だと1枚の画像がそのまま表示されてしまい、ロールオーバーになりません。（IE7しか自宅にないので他のバージョンのIEではどうなるかわかりません。）しかもline-height: 140%;という一行を削除したら1枚べろんと表示されていたところが半分程かくれました。ロールオーバー自体でなく、他の部分がおかしいのでしょうか？ちなみに元の画像の高さは20pxで、10pxの画像を上下につなげています。タイトル画像が120x26で、その横に絶対配置で並べています。ど素人が手打ちで書いた文章なのでお恥ずかしいのですが、問題の部分のCSSとhtml、全体のCSS、を以下に載せておきますのでどうぞご教授ください。（メニュー項目の数等一部省略しているところがあります。）よろしくお願い致します。 /*CSSの記述*/ body{ margin: 0px; text-align: center; } table,tr,td,p,ul,li,h1,h2,h3,h4,h5,h6,input,textarea { line-height; 140%; color: #696969; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 10pt; } div#wrapper{ width: 500px; margin: 40px auto; text-align: left; } div#header{ width: 100%; position: relative; margin-bottom: 30px; } ul#menu{ position: absolute; left: 150px; top: 10px; width: 350px; height: 10px; } ul#menu li{ float: left; height: 10px; margin-right: 15px; } ul#menu li a{ margin: 0; padding: 0; height: 10px; display: block; text-indent: -9999px; outline: none; background-repeat: no-repeat; } ul#menu li a:link, ul#menu li a:visited{ background-position: left top; } ul#menu li a:hover, ul#menu li a:active{ background-position: left bottom; } ul#menu li#top a{ background-image: url(../img/top.gif); width: 32px; } ul#menu li#about a{ background-image: url(../img/about.gif); width: 48px; } ul#menu li#pict a{ background-image: url(../img/pict.gif); width: 37px; } /*HTMLの記述*/ <div id="wrapper"> <div id="header"> <h1><IMG SRC = "タイトル画像" ALT = "" border="0"></h1> <ul id="menu"> <li id="top"><a href="top.html">top</a></li> <li id="about"><a href="about.html">about</a></li> <li id="pict"><a href="pict.html">pict</a></li> </ul> </div> 　～略～ </div>
- ベストアンサー
- CSS
jQuery マウスオーバーのたびに処理を繰り返す
よろしくお願いします。 jQueryを使用して、「サムネイルにマウスを乗せると別のDiv内に大きい画像とtitle属性のテキストを表示させる」というものを作ろうとしています。別のDiv要素には上下左右中央に画像を表示させたいと思い、見よう見まねで下記のようなコードを作成したのですが、表示される画像がサムネイル時の大きさに縮小されてしまい、元の大きさの画像として表示されません。（サムネイルには元画像をcssで縮小して表示しています）やりたいことは以下の２つです。・Div要素には元画像の大きさで表示させたい。・できれば、フェードイン・アウトで画像を切り替えたい。色々調べてみたのですが行き詰ってしまい、こちらに質問させて頂きました。お分かりになる方がいらっしゃいましたら、お知恵をお貸し頂けませんでしょうか。 ////スクリプト//// $(function(){ $('#contents li a').click(function(){ return false; }); $('#contents li a').mouseover(function(){ var $title = $(this).children('img').attr('title'); var w = $(this).children('img').width(); var h = $(this).children('img').height(); $('#photo img').attr('src',$(this).attr("href")); $('#photo span').text($title); var mtop = (h/2)*(-1); var mleft = (w/2)*(-1); $('#photo img').css({"width": + w + "px" ,"height": + h + "px" , "top": "50%" , "left": "50%" , "margin-top": + mtop + "px" , "margin-left": + mleft+ "px"}); }); }); ////HTML//// <div id="contents"> <ul> <li><a href="1.jpg"><img src="1.jpg" title="あああああああああああああああ" /></a></li> <li><a href="2.jpg"><img src="2.jpg" title="いいいいいいいいいいいいいいい" /></a></li> <li><a href="3.jpg"><img src="3.jpg" title="ううううううううううううううう" /></a></li> </ul> </div> <div id="photo"> <img src="1.jpg" /> <span>テキストテキスト</span> </div>
- ベストアンサー
- JavaScript
[JS or CSS]マウスオーバーで画像切り替え
初めまして。ホームページを作成中なのですが、メインビジュアル部分の画像表示で悩んでおります。求めている動作としては以下の通りです。・グローバルナビにマウスオーバーすると、　すぐ下のボックス（どこでも）に画像が表示される。・マウスが離れると画像が消える。・画像の表示（切り替え）はフェードで行う。簡単なソースを書くとこんな感じです。 <ul class="global_navi">/* グローバルナビ */ 　<li><a href="a.html"><img src="hoge01.png" /></a></li> 　<li><a href="b.html"><img src="hoge02.png" /></a></li> 　<li><a href="c.html"><img src="hoge03.png" /></a></li> </ul> <div class="main_graphic"> 　/* ここに画像がフェードイン＆フェードアウトする */ </div> 近い動作をするjsを見つけたのですが、下記2点のjsを足して2で割った様なイメージです。 ■画像のマウスオーバーで、離れた位置に拡大画像を表示する http://css-eblog.com/csstechnique/css-remote-rollover.html ■メニューにマウスオーバーするとメイン画像が切り替わるナビゲーションjQueryプラグイン「ImageNavigation」 http://blog.net-king.com/2010/10/06/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AB%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%99%E3%82%8B%E3%81%A8%E3%83%A1%E3%82%A4%E3%83%B3%E7%94%BB%E5%83%8F%E3%81%8C%E5%88%87/ 動作イメージでは前者ですが、フェードができません。ビジュアルイメージでは後者ですが、マウスを離しても画像が消えません。近い動作をするjs、もしくはcssテクニックをご存知であればご教授頂けないでしょうか。お手数ですが、よろしくお願い申し上げます。
- ベストアンサー
- CSS
マウスオーバーで開閉できるアコーディオンメニューの方法を教えて下さい。
初めまして。 JSはプログラムを組んだことがなく、悩んでおります。一応、アコーディオンメニューは設置しておりますが、クリックで開閉するアコーディオンメニューなので、困っております。 htmlのソースです。 <ul class="acc"> <li><a href="1">category1</a> <ul class="fxmn"> <li><a href="11">menu 1-1</a></li> <li><a href="12">menu 1-2</a></li> <li><a href="13">menu 1-3</a></li> </ul> ～以下省略します～そしてjavascriptのソースです。 var j$ = jQuery; j$(function(){ j$(".acc").each(function(){ j$("li > a", this).each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); $this.click(function(){ j$(this).next().toggle().parent().siblings() .children("ul:visible").hide(); return false; }); }); }); }); すみませんが、よろしくお願いいたします。
- ベストアンサー
- JavaScript
CSSでマウスオーバーを作成しています。
CSSでマウスオーバーを作成しています。 /**CSS内**/ #test { margin: 0; padding: 0; list-style-type: none; } #test li { text-indent: -9999px; width: 200px; height: 400px; margin: 0; padding: 0; background: url(aaa_ov.bmp) no-repeat -200px 0; ----- マウスオーバー時 } #test a { text-decoration: none; display: block; width: 200px; height: 400px; margin: 0; background: url(aaa.bmp) no-repeat 0 0; ----- 最初 } #test a:hover { text-decoration: none; background-color: transparent; background-image: none; } /**HTML内**/ <link rel="stylesheet" href="style.css" type="text/css" /> </HEAD> <BODY> <div align="center"> <ul id="test"> <li><a href="***.html">Home</a></li> </ul> </div> </BODY> としているのですが最初の画像も出ずうまくいきません。画像パスも間違っていませんでした。どのようにすればいいんでしょうか。よろしくお願いします。
- ベストアンサー
- HTML