http://jsfiddle.net/PaulNLondon/dG3Gb/
jsFiddle は、これまでに到達した場所を示しています (これを使用するのは初めてだと思います)。. . 画像ベースのメニューとテキストベースのロールオーバー メニューを連携させようとしています。
jsFiddle でこれを表示することはできませんでしたが、表示される区画の高さの 2 倍の画像を使用しており、ホバー時に位置をシフトして画像の代替バージョンを表示しています - jsfiddle で私が行ったことdiv の背景に色を付けて、位置を示すだけです。それらは、次から次へと連続して望ましい視覚効果を与えるために非常に特別に配置されています。(ページ タイトル テキストと jsFiddle の最初の画像ブロックの重なりは問題ではありません。)
私の目的は、画像にカーソルを合わせると、関連するテキストメニュー項目の太い下線がオンになり（下の境界線設定を使用しました）、画像シフトを使用して画像メニュー自体に代替画像を表示することです。. . そして、テキストメニューの項目にカーソルを合わせて、メニュー項目テキスト自体の下線をオンにし、画像メニューの関連する画像を代替画像に切り替えたいと考えています。
画像をホバリングして下線をオンにすることでほぼそこにいると思いましたが、私が解決した div ごとの div 配置は、Firefox を使用してのみ正しく表示されるようです (jsFiddle では配置が機能していないことがわかります)。
あなたの意見では私のアプローチがすべて間違っているとあなたが私に言うつもりであっても、あなたが持っているかもしれない提案をいただければ幸いです. ここで CSS と HTML の限界に達しています。私は実際には JavaScript をまったく知りません (Dynamicdrive で見つけたスライドショーに JavaScript と jQuery を使用したことを除いて)。