Rollover Image from CSS Menu

[swanriver]

Hello,

I've spent more than eight hours on this and still haven't reached a solution. I've searched the forum many times, but to no avail. If anyone could point me in the right direction, I would be very grateful.

I have a CSS menu set-up in menu manager and attached the proper CSS. That part is running great.

Now here is where the problem starts: My customer would like a mouseover on top level li's only. The mouseover, when activated, would cover part of the main content box below the menu. I have modified the template in menu manager so that li's id is the alias, by using id="{$node->alias}".

Then I set-up a CSS using these:

Code: Select all

li#alias {
left: 0;
}

li#alias a:hover {
background: transparent url(/uploads/images/home/newhomepagepic.jpg)  top left no-repeat;
width: 558px;
height: 309px;
margin-top: 20px;
top: 150px;
}

The result is that the mouseover appears only inside the menu. I would like it to appear below the menu. Any suggestions would be great as my brain is fried and I'm in overload.

Thanks!

[Dr.CSS]

Would have to see the site and an image of what the effect is you strive for...

[swanriver]

So sorry. Here is link: http://somedomain.com/index.php?page=roll-shutters

When you mouseover the "Home" button, the link dances around a bit and then part of the image appears, but in the wrong place.

What I would like to happen on mouseover is to have the image appear in the Beige box below the main menu in brown, on top of the menu on the left column and the slide show in the center column.

(Sorry, can't attach screen grab. Get error message that board attachment quota has been reached. Will check back and see if I can attach then.)

I have attached a screen grab showing mouseover on "Roll Shutters" button. It changes what looks like two photos in the main box, but it is actually one photo.

I'm pretty sure that this is a CSS issue, but not sure where to start. Thank you for your time.

[Dr.CSS]

I use my server to put images up, then link to them in the post, I would really need an imager of the effect you are looking for as I can't figure it out from your description...

[swanriver]

By all means, here you go:

I hope this image, along with the previous description, helps, and again, thank you for your time.

[swanriver]

Maybe this an easier explanation of what I'm trying to do.

How can I get an <li> from the menu to show up in a <div> other than the <div> for the menu using CSS?

Example: .com/index.php?page=roll-shutters
When you mouseover "HOME" in the above link, the photo shows up behind the menu text.

The HTML looks like this:

Code: Select all

<ul id="navmenu>
  <li id="home">
    <a href="h.com/"><span>Home</span></a>
       <span>Home</span>
    </a>
  </li>

I would like the photo to show up in a <div> called "side-menu", which is below the menu. Is this possible in CSS?

[Dr.CSS]

Sorry, the image you linked to is very small for these old eyes and I still don't see what it should look like...

[swanriver]

Thats just it! You nailed it! That is not the actual image. The image I want to show is 500 px wide by 300 px tall, approximately. But it is showing up in the menu, when I would like for it to show up in another <div> at full size.

Is this possible in CSS, or do I have to do some javascript programming for that?

[Dr.CSS]

I was speaking of this image...

http://d380711.u36.swanriverweb.com/sss ... n-grab.jpg

[swanriver]

Again, my apologies. I've uploaded larger images and here is a better explanation:

This is what the Home page would look like before mouseover: .com/sssi-screen-grab-home.jpg

This is what the Home page would look like on mouseover of the "Roll Shutters" link in the menu: .com/sssi-screen-grab-rollover.jpg

The previous designer made the photos below the blue bar change when you mouseover a link in the brown menu with javascript in a plain HTML site. My client would like to duplicate this, but I'm not sure if this is possible with CSS. What is your opinion?

[Dr.CSS]

You can use the JS from before or use CSS if you know how...