私はこれを何日も作成しようとしてきましたが、100% の結果は得られませんでした。ウェブサイト用に 5 つのアンカー画像ロールオーバー (ナビゲーション メニュー用) を作成したいと考えています。私は今までに十数回のチュートリアルを経験したに違いありません。js の使用を推奨する人もいれば、css を推奨する人もいます。そのすべてが主に問題を引き起こしました。最も一般的な問題は、機能的な画像のロールオーバーを作成し、css を使用して配置する場合です。ブラウザーのサイズを変更すると、残りの画像 (「背景に接着」効果があります) に比例してその位置が変換されません。窓。基本的に、すべての画像 (ロールオーバーを含む) に「背景に接着」効果を持たせたいと考えています。
私が今持っているものは、私が望む効果に最も近いものです. Firefox では、マウスが画像の上部 25% にホバーした場合にのみロールオーバーが機能し、「背景に接着」効果が機能しません。クロムでは、固定されたロールオーバー画像は正常に機能しますが、「背景に接着」効果も機能しません。コードは次のとおりです。
#news {
position:relative;
left:180px;
bottom:450px;
width:210px;
height:67px;
}
<div id="news" align="center">
<a href="news.html"
onmouseover="document.news.src='newsRO.png'"
onmouseout="document.news.src='news.png'">
<img src="news.png" name="news" width="210px" height="67"/>
</a>
</div>
ライブの例へのリンクは次のとおりです: http://www.scissormanmusic.com/index_new2.html 明らかに、多くのポジショニングとコンテンツ開発があり、サイトの他の要素のいくつかをまだ処理する必要があります。しかし、メニューが適切に機能するようになったら、それらを適切な場所に配置できるはずです...と思います
お願いします。どんな洞察も大歓迎です。ありがとうございました！！