問題タブ [rollover]

マウスオーバー時にメインロゴを変更したい。

これを実現するにはいくつかの方法があることを理解しており、安定性、ブラウザーの互換性、効率性、およびセットアップの容易さのための最良の方法は何であるか疑問に思っていました。

私が見つけたいくつかの方法は次のとおりです。

• 「src」属性のJavascript（jQuery）置換。
• 背景と「ホバー」を使用したCSS

もう？何が一番？

jquery メニューは、マウスオーバーでアニメートし、マウスアウトで折りたたむようにプログラムされています。ただし、これは、ユーザーがボックスの 1 つの端に到達すると、マウスがメニュー全体の上にあると見なされなくなるため、ユーザーがアイテムの上にカーソルを置いている間は問題になります。どの画像にもパディング/マージンまたは境界線はありません。2 x 3 の正方形のグリッドなので、すべてがうまく収まります。これは、各リスト要素に関連する jquery コードです。

$("li.menu3").mouseover(関数(){

$("ul.inactive3").stop().animate({幅: "500px", 高さ: "150px"}, "高速", 関数(){ $("ul.inactive3").stop(). animate({width: "500px", height: "300px"}, "速い");

});

});

$("li.menu3").mouseout(関数(){

$("ul.inactive3").stop().animate({幅: "500px", 高さ: "150px"}, "高速", 関数(){ $("ul.inactive3").stop(). animate({width: "0px", height: "0px"}, "fast");

});

単純に 1 つの画像を使用してその上に複数の画像マップを配置することでこれを克服しようとしましたが、これにより、chrome でマウスオーバーが機能しないという新しい問題が発生しました。

どんな助けでも大歓迎です.,

ありがとう、マイク

こんにちは、Wordpressのメニューの後ろにロールオーバーの背景色を挿入するのに苦労しています。このサイトhttp://alecsoth.com/photography/でこの黄色い帯のようなものを達成しようとしています

これはメニューの私のCSSです（現在、灰色のボックスを取得して背景色のa：hoverリンクを試しましたが、機能しないようです）-

幅：80; マージン：0自動; }

幅：10em; マージン：-2.8em 0 0 0; フロート：左; 表示：インライン; 位置：固定; 幅：170px; 高さ：100％; パディング：-18.0em 4.3em 9.1em 5.5em; 背景：＃f5f5f5

幅：80em; マージン：1.7em 0 0 0; フロート：右; 表示：インライン; 最小-高さ：30em; }

幅：60em; マージン：0 2.5em 0 4.5em; フロート：左; 表示：インライン; }

jQuery ドロップダウンを作成することはできましたが、子リンクの 1 つがロールオーバーされたときに展開したままにすることはできません。

コード：

画像 (左上にホーム リンクとして) があり、CSS :hover を使用して、ロールオーバー時に画像を変更します。

問題は、最初にロールオーバーしたときに画像の読み込みに時間がかかることです。一時的な空白スペースがあり、イメージが段階的に読み込まれます。1秒くらいかかりますが、めんどくさいです。

ロールオーバーがシームレスになるようにこれを修正するにはどうすればよいですか? 画像をプリロードする方法はありますか?

イメージのロールオーバー状態を作成するためにグローバルに使用できる関数を作成しようとしています。基本的に、画像にクラスを追加できるようにしたいのですが、それをロールオーバーすると、jquery は同じ画像名と同じ拡張子を使用しますが、ファイル名に「-over」を追加します。(-over を除いて、ロールオーバーされていない状態と同じ名前のロールオーバー状態のイメージがあります。これを思いつきましたが、機能していません。それを行うより良い方法は？

画像：

ありがとう！

編集:ファイル時間に固有でなく、jpgだけでなく任意のファイルタイプを把握できるようにする方法はありますか?

私は使用しています：

そしてそれはうまくいっています

編集 2: アクティブな状態 (ボタンがクリックされているとき) を追加することはできますか?

WordpressのヘッダーロゴにCSS画像のロールオーバーを適用しようとしています。これは皆さんにとって本当に簡単な解決策になることは知っていますが、Stackoverflowのどこにも答えが見つからないようです。位置と関係があると思いますが、：relativeまたは：absoluteのどちらを追加しても違いはないようです。

以下は私のCSSです

＆PHP

私は現在、jsの本でJSを学んでいます。ロールオーバー効果の例で私は得られたので、助けが必要です。

Flickr.comにスナップショットをアップロードします。URLは次のとおりです：http ：//www.flickr.com/photos/58745632@N05/5389380030/

スナップショットの左側はページで、スナップショットの右側はjavascriptコードです。私の質問は、赤いボックスのコンテンツを緑のボックスのコードに変更できますか？可能であれば、なぜ作成者はこの行「thisLink.imgToChange = thisImage」をわざわざ追加するのですか？そして、 「thisLink.imgToChange」と 「thisImage」 の関係は何ですか？ それらは同じものですか、それとも同じものですか？誰かが私にそれを説明してもらえますか？どうもありがとうございます。

そのため、jQuery Captify (画像ロールオーバーのキャプション) と Quicksand (画像フィルタリング システム) がうまく連携していないことに少し問題があります。ページが読み込まれると、画像の上にマウスを移動すると Captify が正常に機能しますが、リンクをクリックしてサムネイルをフィルタリングするとすぐに、captify スクリプトが機能しなくなります。

x 秒ごとに captify スクリプトを呼び出そうとしましたが、正しく実行していないか、正しい解決策ではありません。誰でも私を助けることができますか？サイトはhttp://www.galaxyturbo.net/new/index.phpにあります。

Firebug または Google Chrome のような同様の開発者ツールをお持ちの場合は、そこから私のコードを確認できます。このページにスパムを送信したくありませんでした。ここで私を助けていただければ、とても感謝しています。私は本当に必死です。

この問題をよりよく説明するために私がまとめた例を次に示します。

http://www.saeidmohadjer.com/users/saeid/sandbox/javascript/image_map_rollover/test3/test3.html

画像A領域から画像B領域へ、またはその逆に移動すると、下の画像マップがロールオーバー画像の透明な領域で覆われているため、ロールオーバーが表示されない場所があります。ロールオーバー画像をマウスから隠す方法はありますか？ActionScriptでは、オブジェクトのmouseEnableプロパティをfalseに設定して邪魔にならないようにすることでこれを行うことができますが、HTML/JavaScriptでこれを行う方法がわかりません。

ロールオーバー画像（ピンク）は、白黒画像の上に高いz-indexで絶対位置に配置されます。実際の使用法は、マウスがフロアプラン上を転がるたびに、建物のフロアプレート上のフロアプランを強調表示することです。

ありがとう、

Saeid