マウスを載せると画像が変わるロールオーバを使ったページを作成しています。Dreamweaverを使ってロールオーバーやプリロードを指定しているので、マウスを載せるとすぐさま画像スワップが起きるはずなのですが、何と2・3秒もかかってしまいます。

ネットワークがプア、ブラウザの仕様、ソースが複雑、Javascriptの仕様、など考えられるのですが、

どこに原因があるのでしょうか?ご存知の方、是非教えて下さい。

特に、.jsファイルを外部化して読み込ませているのですが、このあたりで注意するところがあれば併せて、宜しくお願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

無駄です。

ロールオーバーで(普通にジャバスクリプトを使用すると)

「マウスがボタンに乗ってから、画像を要求するので、ロスタイムが出ます。」

(javascriptでpreloadで画像を読みこむの記述をしていても大抵は無駄です)

一番確実なのは、

(1)ロールオーバー画像で(デフォルトで出ない方の画像)を1pix*1pix(要するに人の目で見えにくいように)HTML上に(こっそりと目立ちにくいところに)配置しておく
 (これが一番確実な方法。今後どれほどブラウザのレンダリングエンジンが最適化されようとも、この方法なら確実)

(2)ロールオーバー画像で(デフォルトで出ない方の画像)を適当に新規に作成したレイヤー上に配置しておいて、このレイヤーのX座標(もしくはY座標)をマイナスにして隠しておく。
 (この方法は、現在のところ有効。しかし、将来非常にブラウザのレンダリングエンジンが非常に賢くなると、「見えないので読みこまない」となってしまうかもしれない)

いずれにしても、HTMLが読まれる段階で、画面上には見えない
(もしくは見えにくい)けれども「絶対」に
画像がロードされるように上記のような方法で工夫するしかありません。
    • good
    • 0
この回答へのお礼

ありがとうございます。

すごく納得しました。でも、すごく面倒な作業ですね。ブロードバンド時代に突入などと言われますが、ブラウザが時代について来ていないという事でしょうか。

本当にありがとうございました。

お礼日時:2001/09/13 18:23

「ネットワークがプア」という文章があるということは、完成したHTMLをサーバーへアップロードして動かして、遅いということでしょうか?



質問を読んで真っ先に思ったのは、画像が重いのではないかということですが、そういうことではありませんか?
的をはずしていたらすみません。念のため確認してみてください。

この回答への補足

お返事ありがとうございます。

おっしゃる通りです。
画像はページ全体では、比較的重くなっています。が、ロールオーバの部分は、一般的なボタン画像程度です。画像単体が原因というような感じではないです。画像トータルで影響がでるといったことがあるのでしょうか?

また、複雑なDHTMLでレイヤーを扱ったメニューナビがあるので、ブラウザのレンダリング性能が適応していない、というような気もするのですが、そういう問題はご存知ないでしょうか?

補足日時:2001/09/12 22:25
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでのtableの複雑なborder指定の仕様について

CSSでのtableの複雑なborder指定の仕様について

現在、以下のようなborder設定を持つtableを作りたいと考えています。
線の太さが違っているのは、border-colorの指定を表しています。
┏┯┯┳┯┯┳┯┯┓
┠┼┼╂┼┼╂┼┼┨
┠┼┼╂┼┼╂┼┼┨
┣┿┿╋┿┿╋┿┿┫
┠┼┼╂┼┼╂┼┼┨
┠┼┼╂┼┼╂┼┼┨
┗┷┷┻┷┷┻┷┷┛

データ量削減のため、colgroupとtrへのCSS指定だけで、
tdにはCSSを指定しない、という実現方法が理想的です。
ですが、自分で色々と試したものの、どうもうまくいきません。
やむを得ず、tdにCSSクラスを直接指定するにしても、
ある線の色を変えるには、どのtdにどんなCSSを指定すればいいのか、法則が掴めません。
一体どのような仕様になっているのでしょうか。

なお、対応ブラウザはIE6~8のみで構いません。

Aベストアンサー

ソースに自信はありませんが。。。それらしい見栄えにはなりました。

<html>
<head>
<style>
.table1{
border : solid 2px red;
border-collapse: collapse;
}
.td1{
border-left : solid 2px brown;
}
.td2{
border-top : solid 2px pink;
}
.td3{
border-left : solid 2px brown;
border-top : solid 2px pink;
}
.table1 td{
border-bottom : solid 1px orange;
border-right : solid 1px orange;
padding : 10px;
}
</style>
</head>
<body>
<table class="table1">
<tr>
<td>あ</td>
<td>い</td>
<td>う</td>
<td class="td1">え</td>
<td>お</td>
<td>か</td>
<td class="td1">き</td>
<td>く</td>
<td>け</td>
</tr>
<tr>
<td>さ</td>
<td>し</td>
<td>す</td>
<td class="td1">せ</td>
<td>そ</td>
<td>た</td>
<td class="td1">ち</td>
<td>つ</td>
<td>て</td>
</tr>
<tr>
<td>な</td>
<td>に</td>
<td>ぬ</td>
<td class="td1">ね</td>
<td>の</td>
<td>は</td>
<td class="td1">ひ</td>
<td>ふ</td>
<td>へ</td>
</tr>
<tr>
<td class="td2">ま</td>
<td class="td2">み</td>
<td class="td2">む</td>
<td class="td3">め</td>
<td class="td2">も</td>
<td class="td2">や</td>
<td class="td3">い</td>
<td class="td2">ゆ</td>
<td class="td2">え</td>
</tr>
<tr>
<td>わ</td>
<td>ゐ</td>
<td>う</td>
<td class="td1">ゑ</td>
<td>を</td>
<td>ん</td>
<td class="td1">ら</td>
<td>り</td>
<td>る</td>
</tr>
<tr>
<td>が</td>
<td>ぎ</td>
<td>ぐ</td>
<td class="td1">げ</td>
<td>ご</td>
<td>ざ</td>
<td class="td1">じ</td>
<td>ず</td>
<td>ぜ</td>
</tr>
</table>
</body>
</html>

ソースに自信はありませんが。。。それらしい見栄えにはなりました。

<html>
<head>
<style>
.table1{
border : solid 2px red;
border-collapse: collapse;
}
.td1{
border-left : solid 2px brown;
}
.td2{
border-top : solid 2px pink;
}
.td3{
border-left : solid 2px brown;
border-top : solid 2px pink;
}
.table1 td{
border-bottom : solid 1px orange;
border-right : solid 1px orange;
padding : 10px;
}
</st...続きを読む

Q[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テクニックをご存知であればご教授頂けないでしょうか。
お手数ですが、よろしくお願い申し上げます。

初めまして。

ホームページを作成中なのですが、
メインビジュアル部分の画像表示で悩んでおります。

求めている動作としては以下の通りです。
・グローバルナビにマウスオーバーすると、
 すぐ下のボックス(どこでも)に画像が表示される。
・マウスが離れると画像が消える。
・画像の表示(切り替え)はフェードで行う。


簡単なソースを書くとこんな感じです。
<ul class="global_navi">/* グローバルナビ */
 <li><a href="a.html"><img src="hoge01.png" /></a></li>
 <li><a href="b.html"><img src=...続きを読む

Aベストアンサー

CSSでの対策はNo.1さんがお答え済みだったので、JSの場合。

http://tenderfeel.xsrv.jp/javascript/271/
こちらの下のほうにある
複数設置+クロスフェード版
jQuery版
MooTools版
はフェード効果ありですね。

ライブラリの好みもあるでしょうから、お好きなものをどうぞ。

ところで、質問のサンプルコードでPNGを使っておいでですが、IEのバージョンによってはPNGにフェード効果をかけると黒っぽいジャギーが出る場合があります。
できればPNG以外の形式にしたほうがおすすめですよ。

Q画像のキャッシュとプリロード

かねがね疑問に思っていたのですが、ロールオーバーの画像とかはonLoadでプリロードされるので、マウスをのせればすぐにOver画像が表示されると思っていたのですが、現実はその時にネットからくるとしか思えない動きをしている。
またキャッシュされたものはその後の表示がキャッシュされているので速いので、共通に表示されるフレームとかは、別からまた呼び出してもそんなにレスポンスは落ちないと僕は考えているのですが。
これって勘違いでしょうか、それともやり方があるのでしょうか。プリロードとロールオーバーはDreamweaverのFunctionです。
よろしくお願いします。

Aベストアンサー

その通りです。
私が思う洗練された解決法(レイヤーを使用している場合の)としては、以下のものです。
解説のため、以下、メニューデフォルト画像A1,B1,C1、そして、ロールオーバー画像をA2、B2,C2とします。そして、それぞれの画像にレイヤーを割り当てます。

初めの表示の際に、A1レイヤー、B1レイヤー、C1レイヤーの真下(z-indexを少なくしてそれぞれ同じ位置)に、A2レイヤー、B2レイヤー、C2レイヤーを置き、マウスオーバーとマウスアウトを契機として、レイヤーのz-indexをうまく切りかえるようにしてやれば、美しくいくと思います。

Qサイドメニューのロールオーバーにマウスを合わせるとメニューがガクガク動いてしてしまう

サイドメニューのロールオーバーにマウスを合わせるとメニューがガクガク動いてしてしまい困っています。ブラウザはIE8です。firefoxは問題ありませんでした。

具体的に言うと、
CSSでサイドメニューのロールオーバーを作成したのですが、IE8上で表示し、実際マウスを合わせると、ガクガクメニュー項目が動いていまうのです。

考えられる、原因を教えていただけないでしょうか?
以下は実際の問題のコードです。

HTML

<div id="box-ml">
<ul id="ul-ml">
<li id="li-ml-kg"><strong>生命保険のカテゴリー</strong></li>
<li id="li-ml-kg"><strong>個人の生命保険</strong></li>
<li id="li-ml"><a href="../seiho/kojin/goriteki_kanyunosikata/gouriteki_kanyu.html">合理的な加入の仕方</a></li>
<li id="li-ml"><a href="../seiho/kojin/syohin/shohin_shikumi.html">生命保険商品一覧</a></li>
<li id="li-ml"><a href="../seiho/kojin/nendaibetsu/life_stage.html">カテゴリー別加入方法</a></li>
<li id="li-ml"><a href="../seiho/kojin/mangaichi/mangaiti_okita.html">万が一が起きてしまったら</a></li>
<li id="li-ml"><a href="../seiho/kojin/hoken_sisanunyo.html">生命保険で資産運用</a></li>
<li id="li-ml"><a href="../seiho/kojin/goriteki_kanyunosikata/syohinbetsu.html">生命保険の得する情報</a></li>
<li id="li-ml-kg"><strong>法人の生命保険</strong></li>
<li id="li-ml"><a href="../seiho/hojin/index_seiho_hojin.html">法人の生命保険商品一覧</a></li>
<li id="li-ml"><a href="../seiho/hojin/iryo_hojin.html">効果的な保険利用方法</a></li>
<li id="li-ml-kg"><strong>損害保険のカテゴリー</strong></li>
<li id="li-ml-kg"><strong>個人の損害保険</strong></li>
<li id="li-ml"><a href="../sonpo/kojin/index_sonpo_kojin.html">個人の損害保険商品一覧</a></li>
<li id="li-ml-kg"><strong>法人の損害保険</strong></li>
<li id="li-ml"><a href="../sonpo/hojin/index_sonpo_hojin.html">法人の損害保険商品一覧</a></li>
<li id="li-ml-kg"><strong>社会保険のカテゴリー</strong></li>
<li id="li-ml"><a href="../syakaihosyo/syakaihosyo_katsuyo.html">使える社会保障制度</a></li>
<li id="li-ml-kg"><strong>保険と税金</strong></li>
<li id="li-ml"><a href="../zei/index_zei.html">保険と税金</a></li>
<li id="li-ml-kg"><strong>保険Q&A</strong></li>
<li id="li-ml"><a href="../qa/index_qa.html">保険にまつわるQ&A</a></li>
<li id="li-ml-kg"><strong>保険の裏技・落とし穴</strong></li>
<li id="li-ml"><a href="../urawaza/urawaza.html">保険の裏話・落とし穴</a></li>
</ul>
</div>

CSS

#box-ml {
padding: 0px 0px 10px;
width: 200px;
float: left;
background-image: url(img/li-a-bg.jpg);
}

#ul-ml {
margin: 0px;
padding: 0px;
display: inline;
text-indent: 0px;
list-style-type: none;
text-align: left;
}

#li-ml-kg {
margin: 0px;
list-style-type: none;
padding: 0px;
display: block;
line-height: 26px;
background-image: none;
text-indent: 20px;
background-color: #66CC00;
border: 1px solid #CCCCCC;
color: #FFFFFF;
}

#li-ml {
margin: 0px;
list-style-type: none;
padding: 0px;
display: block;
line-height: 26px;
background-image: url(buttons/li-bg.gif);
text-indent: 20px;
}

#li-ml a:hover {
margin: 0px;
list-style-type: none;
padding: 0px;
display: block;
line-height: 25px;
background-image: url(buttons/li-bg-m.gif);
text-indent: 20px;
color: #FF0000;
}

宜しくお願いいたします!

サイドメニューのロールオーバーにマウスを合わせるとメニューがガクガク動いてしてしまい困っています。ブラウザはIE8です。firefoxは問題ありませんでした。

具体的に言うと、
CSSでサイドメニューのロールオーバーを作成したのですが、IE8上で表示し、実際マウスを合わせると、ガクガクメニュー項目が動いていまうのです。

考えられる、原因を教えていただけないでしょうか?
以下は実際の問題のコードです。

HTML

<div id="box-ml">
<ul id="ul-ml">
<li id="li-ml-kg"><strong>生命保険のカ...続きを読む

Aベストアンサー

がくがくするってことは
つまりどこかでサイズがずれる様な現象が起こってるってことでしょ。
それもマウスオーバーとマウスが居ない時のスタイルシートの設定を見比べて、その二つのどこかにサイズがずれる様な要素が紛れ込んでいるという事です。

line-height: 26px;
line-height: 25px;
と一カ所だけ25pxになっている所があったんで、
この数値だけを直してあげれば、FirefoxだろうとIE7だろうと、がくがくしませんよ♪

Qcssを使ったロールオーバについて どちらの記述が良いでしょうか?

cssを使ったロールオーバについて どちらの記述が良いでしょうか?

cssでのロールオーバを使いたく、以下のようなタグに辿りつきました。
----------------------------------------------------------------------
ul.menu { margin:0px 0px 25px 0px;
padding:0px;
clear:both;
float:left;
width:200px;}

ul.menu li {float:left;
width:100px;
display:inline;
text-indent:-9999px;
overflow:hidden;
ist-style:none;}

ul.menu li a {display:block;
width:100px;
height:50px;}

li.menu1 a {background:url(image/menu.gif) 0 0 no-repeat;}
li.menu1 a:hover {background:url(image/menu.gif) 0 -50px no-repeat;}
li.menu2 a {background:url(image/menu.gif) -100px 0 no-repeat;}
li.menu2 a:hover {background:url(image/menu.gif) -100px -50px no-repeat;}

<ul class="menu">
<li class="menu1"><a href="a.html" title="a">a</a></li>
<li class="menu2"><a href="b.html" title="b">b</a></li>
</ul>
----------------------------------------------------------------------
表示はそれで上手く行ったのですが、overflow:hidden;を使うとIE7でスクロールバーが出ないんじゃないか?と言われ、下記のように書き直しました。
----------------------------------------------------------------------
#menu { width:200px;
height:50px;
margin : 0px 0px 25px 0px ; }

#menu h2 {width:100px;
height:50px;
margin:0;
float:left;}

#menu h2 a {display:block;
width:100px;
height:50px;
background-image:url(image/menu.gif) ;}

a.menu1 { background-position: 0 0 ;}
a:hover.menu1 { background-position: 0 -50px ;}
a.menu2 { background-position: -100px 0 ;}
a:hover.menu2 { background-position: -100px -50px;}

<div id="navi">
<h2><a href="a.html" class="menu1" title="a"></a></h2>
<h2><a href="b.html" class="menu2" title="b"></a></h2>
</div>
--------------------------------------------------------
こちらでも表示は出来たのですが、後からIE7で確認した所初めのタグでもスクロールバーは表示出来ました。
とはいえやはり不安ですし後者で行こうかと思ったのですが、後者の場合も<a></a>の間に何もないことが気にかかり決めかねています。詳しい方がいらっしゃいましたら、どっちの方がいいかのアドバイス等頂けないでしょうか。よろしくお願いします。

cssを使ったロールオーバについて どちらの記述が良いでしょうか?

cssでのロールオーバを使いたく、以下のようなタグに辿りつきました。
----------------------------------------------------------------------
ul.menu { margin:0px 0px 25px 0px;
padding:0px;
clear:both;
float:left;
width:200px;}

ul.menu li {float:left;
width:100px;
display:inline;
text-indent:-9999px;
overflow:hidden;
...続きを読む

Aベストアンサー

<a>タグの中身は、SEO的にもアクセシビリティ的にもリンク先の内容を説明するテキストが入って然るべきなので、前者で宜しいと思います。

IE7(他ブラウザも)でスクロールバーが消すには以下のように記述します。
html{overflow:hidden;}


人気Q&Aランキング

おすすめ情報