人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

こちらのロールオーバーなのですが、Operaで作動しません。
http://web.paulownia.jp/script/sample/rollover.html

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

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

よろしくお願いします。

●質問者: tenshiks
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:firefox IE Java opera ロールオーバー
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● kazu1107
●50ポイント

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

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はこれら二つの関数では設定できないようなので、なぜ動くかはわかりません。・・・ドキュメントが古いだけなのかもしれませんけど。

◎質問者からの返答

なるほど!

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

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


2 ● 棚旗織
●50ポイント

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

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

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

◎質問者からの返答

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

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

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

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


3 ● kazu1107
●50ポイント

ダミー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>のような扱いにしています。

◎質問者からの返答

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

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

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ