兩套翻車的共同努力

http://jsfiddle.net/PaulNLondon/dG3Gb/兩套翻車的共同努力

的的jsfiddle節目（我希望，它是用它我的第一次），我得這麼遠。。。我正嘗試使用基於圖像的菜單和基於文本的翻轉菜單一起工作。

我無法在jsFiddle中顯示此圖像，但我使用的圖像是顯示它們的分割高度的兩倍，並將鼠標懸停的位置移動以顯示圖像的替代版本 - 在jsfiddle我所做的只是將div的背景顏色化以顯示其定位。它們被定位得非常特別，以提供所期望的視覺效果，並且具有連續性。（頁面標題的文本，並在的jsfiddle第一影像區塊的重疊是不是一個問題。）

我的目標是已經徘徊於對相關文本菜單項的下劃線厚厚的圖像轉（I」已經使用了底部邊框設置），並且將圖像轉換爲在圖像菜單中顯示替代圖像。。。 AND我想將鼠標懸停在文本菜單中的項目上以打開菜單項文本本身的下劃線和使圖像菜單中的關聯圖像切換到備用圖像。

我以爲我幾乎在那裏得到懸停的圖像打開下劃線，但似乎div div定位我工作只顯示正確使用Firefox（因爲你可以看到對齊方式沒有工作的jsfiddle）。

我會很感激你的任何建議 - 即使你打算告訴我，你認爲我的做法是錯誤的。我在這裏的CSS和HTML的極限。我真的不知道任何JavaScript（除了我在Dynamicdrive上使用它和用於幻燈片的jQuery）。

來源

2012-03-11 PaulNLondon

我現在在想，如果我讓文本菜單成爲圖形，那麼我可以在非下劃線和下劃線之間翻頁。我發現這個http://www.yourhtmlsource.com/images/rollovers.html#multiplerollovers，它顯示瞭如何用一些JavaScript，我可以在多個位置的圖像之間翻轉 - 所以我可以在懸停時翻轉圖像和文本菜單通過圖像或文本菜單的圖像。這有意義嗎？ – PaulNLondon 2012-03-14 16:23:38

我到達那裏，並在評論中鏈接到的網站的幫助。。。也許它有點像形象？我已經發布在http://doublerollover.moyni.co.uk - 但我仍然對鏈接看起來延伸到菜單下面感到困惑。

我很感激任何有關該解決方案的意見以及我如何更有效地完成它。

來源

2012-03-16 15:24:52 PaulNLondon

啊，只是看着IE瀏覽器，它將圖片與鏈接放在邊界的事實讓我看到，我已經從圖像部分被div複製，並似乎從文本菜單下拉。。。我將在今天晚些時候回到這裏工作。 – PaulNLondon 2012-03-16 15:39:43

小學生錯誤 - 沒有創建空圖像以放置在背景圖像中包含的菜單文本上 - 已經從圖形部分複製了一組空白圖像而沒有意識到。。。因此具有不同深度的空盒子，充當鏈接並沿頁面向下延伸。 – PaulNLondon 2012-03-16 18:59:24

兩套翻車的共同努力

回答

相關問題