こちらのロールオーバーなのですが、Operaで作動しません。

http://web.paulownia.jp/script/sample/rollover.html

Opera、Java双方あまり詳しくないので原因がわかりません。
できないのであれば、できないで構わないのですが、理由が分かる方教えてください。

改良してもし、Operaでも動作できるのであれば教えていただければ有難いです。
(IE,NN,Firefoxは確認済み)

よろしくお願いします。

回答の条件
  • 1人5回まで
  • 登録:2006/05/16 00:03:09
  • 終了:2006/05/17 06:57:49

回答(3件)

id:kazu1107 No.1

kazu1107回答回数199ベストアンサー獲得回数142006/05/16 03:48:19

ポイント50pt

私も実際に動くスクリプトを作ったわけではないので参考程度に。。。

http://www.red.oit-net.jp/tatsuya/java/popmenu.htm

上記ページによると、Opera(OP)でイベントを得るには「document.onclick」などの変数に関数オブジェクトを代入することで、イベント発生時にその関数が呼び出されるという仕組みになっているようです。

ロールオーバーのソースをみると「window.addEventListener」と「window.attachEvent」による設定にしか対応してないため、そこにdocument.onclickに対応するソースを追加すれば動きます。

ただ、document.onclickは何処をクリックされてもイベントが発生するため、IDなら「window.event.srcElement.id」Classなら「window.event.srcElement.className」をしらべ、自分が欲しいイベントなのか判定する必要がありそうです。

余談ですが、IEはこれら二つの関数では設定できないようなので、なぜ動くかはわかりません。・・・ドキュメントが古いだけなのかもしれませんけど。

id:tenshiks

なるほど!

詳しい解説有難う御座いました。

ちょっと手直ししてみます。

2006/05/16 15:32:52
id:tanahata No.2

棚旗織回答回数42ベストアンサー獲得回数22006/05/16 17:20:27

ポイント50pt

http://www.stylesheet-stylebook.com/archives/000104.php

上記サイトでは、JavaScript ではなく、CSS でロールオーバをしています。

Javascript はソースも長いし、読み込み速度の問題からも、CSS で書くことをオススメします。

id:tenshiks

CSSでのロールオーバーを最初に試みたのですが、IEで表示させた場合にマウスを乗せた時に出る読み込みの砂時計が気になって仕方ありません。

幅の小さい画像で縦に複数個並べた場合などその上をマウスでなぞるとかなり気になるんですよね。

FlashはSEO的に論外だとして、javaに行き着いた次第なのです。

IE7から少しはまともになりそうですが何をするにもIEに腹が立つ今日この頃。

2006/05/16 18:40:17
id:kazu1107 No.3

kazu1107回答回数199ベストアンサー獲得回数142006/05/17 00:46:42

ポイント50pt

ダミーURL

http://www.tohoho-web.com/www.htm

CSSでもよかったんですか・・・実験とか、ほかの用途があるのかと思ってあえて書いてませんでした。

CSSで読み込みを行う場合、ON時とOFF時の画像を一つのファイルに並べ、カーソルが載ったときbottom、載ってないときtopなどという指定法を使うと、JavaScriptで言う「先読み」と同じ効果が得られます。

この方法はピクセルで座標を指定すれば、たとえば5つのメニューのON,OFF(10枚)を1枚の画像に納めてしまう・・・などといったことも出来るので大変便利です。

この方法はHTML側は<img>タグを使うのではなく、<a>タグを使用し以下のようなCSSを使います。(もしかしたら<img>でも出来たかもしれません。。。)

a{

  display:block;

  width:100px;

  height:100px;

  background-image:url("image.gif");

  background-position:0px 0px;

}

a:hover{

  background-position:0px 100px;

}

この場合image.gifは100×200ピクセルの画像で、なにもしていないときは左上座標(1,1)から右下座標(100,100)までの範囲を、カーソルがのったときは左上座標(1,101)から右下座標(100,200)ピクセルの位置を表示します。

display:block部分では<a>タグを<div>のような扱いにしています。

id:tenshiks

HTMLコーディングはいつも丸投げなのでクライアントサイドについては結構無知でして。

こんな方法があったのですね。

IE,NN,Opera,Firefox確認OKでした。

強引そうですが、W3Cも通過…すばらしい。

XHTML+CSSなかなか頭が痛いです。

かなり助かりました、有難う御座いました。

2006/05/17 06:56:05

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません