0

http://jsfiddle.net/PaulNLondon/dG3Gb/

The jsFiddle shows (I hope, it is my first time using it) where I've got to so far . . . I'm trying to use an image-based menu and a text-based rollover menu working together.

I wasn't able to show this in the jsFiddle but I am using images that are twice the height of the divisions where they are displayed and shift the position on hover to show the alternate version of the image - in the jsfiddle what I have done is simply colour the backgrounds of the divs to show their positioning. They are positioned very particularly to give a desired visual effect with continuity of one to the next. (The overlapping of the page title text and the first image block in the jsFiddle isn't an issue.)

My aim is to have hovering on an image turn on the thick underlining of the associated text menu item (I've used bottom border setting) as well as having the image shift to show the alternate image in the image menu itself . . . AND I want to have hovering over an item in text menu to turn on the underlining of the menu item text itself AND make the associated image in the image menu to switch to the alternate image.

I thought I was nearly there with getting the hovering on an image turning on the underlining but it seems that the div by div positioning I worked out only displays correctly using Firefox (as you can see the alignment hasn't worked in jsFiddle).

I'd appreciate any suggestions you might have - even if you are going to tell me that in your opinion my approach is all wrong. I'm at the limit of my CSS and HTML here. I don't really know any JavaScript (other than I have used it and jQuery for a slideshow I found at Dynamicdrive).

PaulNLondon
  • 1
  • 1
  • I'm now thinking that if I make the text menus to be graphics that I could flip between non-underlined and underlined versions. I found this http://www.yourhtmlsource.com/images/rollovers.html#multiplerollovers which shows how with a bit of JavaScript that I could flip between images in multiple locations - so I could flip both the image and text menus when hovering over either the image or the image of the text menu. Does this make any sense? – PaulNLondon Mar 14 '12 at 16:23

1 Answers1

0

I got there in the end with help from the site I linked to in the comment . . . perhaps it is a bit image-heavy? I've published it at http://doublerollover.moyni.co.uk - I am, though, still puzzling about the links seeming to extend way below the menu.

I'd appreciate any comments about the solution and how I might have done it more efficiently.

PaulNLondon
  • 1
  • 1
  • Ah, just looked with IE and the fact that it is putting borders around images with links allowed me to see that I have got divs from the images section being duplicated and seeming to drop down from the text menu . . . will be working on that when I get back to working on this later today. – PaulNLondon Mar 16 '12 at 15:39
  • Schoolboy error - hadn't created empty images to sit in place over the menu text that was contained in the background image - had copied the set of empty images from the graphical section without realising . . . hence had empty boxes of varying depths acting as links and extending down the page. – PaulNLondon Mar 16 '12 at 18:59