- ベストアンサー
onMouseOver,onMouseOutを使用すると
<img>のところに onMouseOver="this.src='○○.gif'" onMouseOut="this.src='○○.gif" として、マウスを乗せたら画像が変わるようにしているのですが、ブラウザで見ると、 「セキュリティ保護のため、コンピューターにアクセスできるアクティブコンテンツは表示されないようInternet Explorerで制限されています。オプションを表示するにはここをクリックしてください」 という情報バーが出てしまいます。 これを出ないようにするにはどうしたらいいのでしょうか？
- 52966925
- お礼率68% (34/50)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ちがう方法になってしまいますが・・・ 画像の切替えだけなら、スタイルシートの擬似クラスを利用しても可能です。 こちらの方法なら、ユーザーがJavascriptを無効にしていても、機能してくれます。
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
#2です。 ＞マウスを乗せたら画像が変わるものを数種類おきたいのですが・・・。 スクリプトを見る限り、1枚の画像に対しては決った画像ですよね？ 同じ仕組の画像を複数おきたいのなら、それぞれの画像に違うスタイルシートを適応すれば良いだけです。 idをふるとか、クラスを利用するとかの方法で可能です。
補足
idやクラスを利用すればできるのですね！ ありがとうございます。 参考にさせていただきます。
詳しくは分からないのですが、javascript、flashを使っている場合はほとんど警告が出てきますね。 <!-- saved from url=(0013)about:internet --> このコメントを入れることで回避できるようです。
お礼
できました！ありがとうございます。 なぜ警告が出るんでしょうね？
関連するQ&A
- IE6でのonMouseover、onMouseoutによる画像切り替え
いつもお世話になっています。 JavaScriptでonMouseover、onMouseoutによる画像の切り替えを行っています。 Internet Explorer 7.0 Internet Explorer 6.0 Opera 10.00 safari 4.0 以上のブラウザーで確認をとっているのですが、Internet Explorer 6.0だけ上手く動きません。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーHTML <IMG src="../img/map/1f/map.jpg" width="433" height="469" border="0" name="myIMG1"usemap="#tizu"> <p id="7" onMouseover="Swap('myIMG1', '../img/map/1f/7.jpg'); " onMouseout="Swap('myIMG1', '../img/map/1f/map.jpg');">テスト</p> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー JavaScript function Swap(iName, img_url){ myobj = document.images[iName]; myobj.src = img_url; } ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 文字にマウスを持っていくと、地図の画像が変わる。 というのをしたいのです。 どなたか助言をよろしくお願いいたします。
- 締切済み
- JavaScript
- 情報バーが表示されてしまいます
マウスオーバー、マウスアウトで画像が切り替わるように、次のように記述しています。 <img src="a.jpg" onmouseover="this.src='b.jpg'" onmouseout="this.src='a.jpg'" /> するとブラウザで開いた際に 「セキュリティ保護のため、コンピュータにアクセスできるアクティブコンテンツは表示されないよう、Internet Explorerで制限されています。オプションを表示するには、ここをクリックしてください」 という情報バーが表示され、「ブロックされているコンテンツを許可」を選択しなければ画像切り替えが有効になりません。 でも、この記述はあるサイトのサンプルを参考にしており、そのサイトでは情報バーは表示されません。 他にも画像切り替えが実装されているサイトをいくつか表示してみましたが、やっぱり情報バーは表示されません。 情報バーが表示されてしまう自分のページと情報バーが表示されないページのソースを見比べてみましたが、原因がさっぱり分かりません。 何故なんでしょうか？
- ベストアンサー
- JavaScript
- onmouseover、onmouseoutの仲間でonmouseclickみたいな
GIFボタン三枚をあらかじめ用意し、 (1) 通常の状態から(btn0.gif)、 (2) マウスが乗るとボタンがテカり(btn1.gif)、 (3) クリックするとボタンがヘコむ(btn2.gif)、 (4) マウスが離れると通常の状態に戻る(btn0.gif)、 のような効果をつけたいと思うのですが (2) ができません。どう書いたらよいでしょうか。 <img src="./btn0.gif" onmouseover="this.src='btn1.gif'" onmouseout="this.src='btn.gif'"> CSSではhoverに相当するものだと思いますが、 思いつきでonmouseclickというのは違うようで。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- onMouseOverがうまくいきません
JavaScriptで、プルダウンメニュー及びマウスで触れたときのメニューの画像変更を行っていますがうまくいきません。プルダウンはうまくいきますが、画像変更しないのです。 どうやらプルダウンメニューの表示・非表示に使っているonMouseOverとonMouseOutが、画像変更のそれらとダブっているためだと思うのですが…。Macでは動作するのですが、Winでは動作しないのです。 <div id="xx" class="yy" onMouseOver="show('xx');" onMouseOut="hide('xx');"> <a href="xx.html" onMouseOver='xxxx' onMouseOut='yyyy'><img src="photo.gif" name="aa"></a> </div> うまく両方機能させるいい方法はないでしょうか？
- ベストアンサー
- JavaScript
- cssヘッダー画像の下に配置したい画像が重なります
css勉強し始めた初心者なので、説明やソースなどめちゃくちゃだと思いますが、教えてください。 固定ヘッダー（常に画面の上にヘッダーがあるように）を作成し、その下に画像を配置したのですが、ヘッダーの下にその画像が入り込んでしまいました。ヘッダーの下に重ならず配置するにはどうすればよいでしょうか？ よろしく御願いいたします。 body内に <div id="header"> <h1><a href="/" title="website"></a></h1> <img src="img/b01.gif" width="108" height="68" border="0" onmouseover="this.src='../ao/img/b01-.gif" onmouseout="this.src='../ao/img/b01.gif"> <img src="img/b02.gif" width="88" height="68" border="0" onmouseover="this.src='../ao/img/b02-.gif'" onmouseout="this.src='../ao/img/b02.gif'"> <img src="img/b03.gif" width="59" height="61" border="0" onmouseover="this.src='../ao/img/b03-.gif'" onmouseout="this.src='../ao/img/b03.gif'"> <img src="img/b04.gif" width="50" height="68" border="0" onmouseover="this.src='../ao/img/b04-.gif'" onmouseout="this.src='../ao/img/b04.gif'"> <img src="img/b05.gif" width="39" height="68" border="0" onmouseover="this.src='../ao/img/b05-.gif'" onmouseout="this.src='../ao/img/b05.gif'"> <img src="img/b06.gif" width="80" height="68" border="0" onmouseover="this.src='../ao/img/b06-.gif'" onmouseout="this.src='../ao/img/b06.gif'"> <img src="img/b07.gif" width="51" height="68" border="0" onmouseover="this.src='../ao/img/b07-.gif'" onmouseout="this.src='../ao/img/b07.gif'"> <img src="img/b08.gif" width="47" height="68" border="0" onmouseover="this.src='../ao/img/b08-.gif'" onmouseout="this.src='../ao/img/b08.gif'"> <img src="img/b09.gif" width="54" height="68" border="0" onmouseover="this.src='../ao/img/b09-.gif'" onmouseout="this.src='../ao/img/b09.gif'"> <img src="img/b10.gif" width="125" height="68" border="0" onmouseover="this.src='../ao/img/b10-.gif'" onmouseout="this.src='../ao/img/b10.gif'"> </div> <h2><img src="img/panichi.gif" alt="TOP" width="700" height="450" class="centering" /></h2>
- ベストアンサー
- 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
- 外部ファイルの記述の仕方
HTMLにリンクを指定している画像にマウスが重なったときに画像を変化するようにHTML文法にJavaScriptを指定しているのですが、外部ファイル化したいのですがどのように記述すればよいでしょうか？ <a href="1.html"> <img src="menu01.gif" onMouseOver="this.src=\'menu11.gif\'" onMouseOut="this.src=\'menu01.gif\'" height="30" width="138" > </a> <a href="2.html"> <img src="menu02.gif" onMouseOver="this.src=\'menu12.gif\'" onMouseOut="this.src=\'menu02.gif\'" height="30" width="138" > </a>
- ベストアンサー
- JavaScript
- 画像 表示について質問です。
画像 表示について質問です。 <?php echo '<a href="A.php"><img src="img/advance.gif" wwidth="80" height="80" style="border-style:none;" onmouseover="this.src="img/returen2.gif";" onmouseout="this.src="img/returen.gif";" /></a>'; ?> と考えたのですが、画像は表示されるもののONマウスの時に画像が変化しません。 どうしてなのでしょうか。
- ベストアンサー
- PHP
- よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたい
よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたいと考えております。そこで以下のような記述をしたいと考えているのですがうまく行かず、また原因もわからずに困っておます。どなた様かご指導のほどよろしくお願いいたします。 まず以下の記述をしました。 ［html］ <div id="menu"> <ul> <li id="menu1"><a href="a/index.html" title="HOME" ><img src="img/1.gif" alt="HOME" onmouseover="this.src='img/11.gif' onmouseout="this.src='img/1.gif'" /></a></li> <li id="menu2"><a href="b/index.html" title="ホームページ製作"><img src="img/3.gif" alt="HOME" onmouseover="this.src='img/33.gif' onmouseout="this.src='img/3.gif'" /></a></li> <li id="menu3"><a href="c/index.html" title="ネットショツプ製作"><img src="img/4.gif" alt="HOME" onmouseover="this.src='img/44.gif' onmouseout="this.src='img/4.gif'" /></a></li> <li id="menu4"><a href="d/index.html" title="SNSサイト製作"><img src="img/6.gif" alt="HOME" onmouseover="this.src='img/66.gif' onmouseout="this.src='img/6.gif'" /></a></li> <li id="menu5"><a href="e/index.html" title="SEOプロモーション"><img src="img/7.gif" alt="HOME" onmouseover="this.src='img/77.gif' onmouseout="this.src='img/7.gif'" /></a></li> <li id="menu6"><a href="f/index.html" title="出版・印刷・その他"><img src="img/8.gif" alt="HOME" onmouseover="this.src='img/88.gif' onmouseout="this.src='img/8.gif'" /></a></li> <li id="menu7"><a href="g/index.html" title="お問合せ・御注文"><img src="img/5.gif" alt="HOME" onmouseover="this.src='img/55.gif' onmouseout="this.src='img/5.gif'" /></a></li> </ul></div> ［css］ #menu ul{ list-style-type:none; } #menu ul li{ display:inline; } http://desktop10.web.fc2.com/test.html 上記URLにアップしています。よろしければ見てみてください。 画像も、横並びにならず、マウスを合わせたときの画像も変化しません。また、ブラウザ上の左下に ページでエラーが発生しました。と出てしまいます。 お手数では御座いますがどなた様かご教示をお願いできませんでしょうか？ わたしとしては、以下のような感じにしたいと考えております。 http://desktop10.web.fc2.com/test1.html なお、一応記載させて頂きますが画像の中に「ホームページ製作」や「SNS」等と・・・ありますが、私は 現在cssの学習をしており、特別パソコン関係の商売をしているわけでもありません。ただ、今後の自分のために色々と出来ればよいと考えているところであります。 初心者では御座いますが、どなた様かご指導のほどよろしくお願いいたします。
- ベストアンサー
- HTML
- イメージをあらかじめ読み込むには？
マウスカーソルが重なったとき、イメージを切り替える処理を 行おうと思っています。 <img src="top_01.gif" onMouseOver="this.src='top_02.gif'" onMouseOut="this.src='top_01.gif'"> このようなソースでイメージを切り替えているのですが、 マウスカーソルが重なったときに初めて新しいイメージ (この場合は'top_02.gif')を読み込むようです。 これだとタイムラグができてしまうので、最初にhtmlファイルを読み込む際、 あらかじめ新しい画像を読み込むにはどうすればよいのでしょうか？
- ベストアンサー
- JavaScript
お礼
ありがとうございます。擬似クラス調べてみました！ しかし、擬似クラスでは画像を複数指定できないのではないでしょうか？マウスを乗せたら画像が変わるものを数種類おきたいのですが・・・。