Rollover effect related to content

It can be implemented with pure CSS but it’s really hard to explain. I don’t even know if I get it myself. I am working on something like that for my own site and will send you the code/image when it’s done.

I implemented something very like what I think you are describing, based on Eric Meyer’s Rollover in pure CSS. I’ve removed it now. But this gives you an introduction to Eric’s method and some others.

It isn’t too difficult, though it is hard to get it to work equally well in all browsers.

hi jeremy – what i meant was this:

https://sekhu.net/wp

when you rollover the link on the menu where there is text in the left box, it will instead display an image or content that will replace the text. Whatever they rollover, will display something different in the content box on the left – the menu itself would remain the same.

With eric meyers i found the rollover thingy, but with an image in the background I believe. Hope that makes more snese, in theory it should work, but I can’t understand how I would make the rollover say:

“When I rollover this button, the image will display here, otherwise it will be default”

can you just make it a background image on hover with some negative margins to position it exactly in place?

I imagine it is a bit harder without using an image file for each item…

Just an unproven theory

<li><a href>Item One <span class="description">It's about item one</span></a></li>

Hide .description when not hovered on; display it when hovered on and displace and resize that it will cover the default.

<joking>just don’t let google know you are hiding content :O</joking>

That seems like it should work. Keep us posted…this is a neat idea…

I’ve been meaning to “steal” this particular technique from this site
https://www.adaptivepath.com/

On the left hand side where you see the pictures of people. You could probably apply it with some modification.

Hmm I was looking at the css and noted this:

html>body #teampics li a span {width:150px;}
#teampics li a:hover span {
color:#c00;
cursor:pointer;
background-image:url("/images/new/bullet_red.gif");
}

Where it says html> body #templatepics li a span

Could I use this, to say, have the hover menu display as a colour, at the same time to display an image where the text is in the float to the left of x size – so on hover it displays an image, without it it remains the same.

The problem as I said is, how do I tell the css to position the image in the left container instead of displaying it in the right (menu) container? That’s what I think I’m stuck on, I think the theory is sound.

`li: hover {
background: url(images/about.jpg)
html> body #box1
}

or something like that?

The css code that will make it happen is relatively complicated and a lot. Before we move on, what is Item One, Item Two, etc eventually? Because if it’s a list generated by wp-template-tag, then you may have to redesign the html markup, or hack the wp source code for that template tag to get the markup that you want.

From the Codex, step by step instructions:

Creating Horizontal Menus
Dynamic Menu Highlighting
Styling Lists with CSS

@lorelle

That wasn’t the question really, but I know of the links already

@alphaoide
I haven’t decided yet in all honesty here’s a guess at what the items might end up being:

home
about
archives
themes
contact
reviews – this would actually link to another site, but that’s not important
credits

Now the default content would probably be a brief extract of the about content for the front page, with a more link – for single.php and archives.php and the others the default would be a plugin tag for related posts within the left content box, the left menu in these cases would be just basic rollovers and that side I don’t believe is a big issue.

I have a couple of other ideas I want to implement, which is why I’m building this one first as a test bed for further, ahem, ambitions ??

EDIT: I forgot the gallery – how the bugger am I gonna do that one eh? ??

Jinsan

I took a look at the site, and the advice here is sound. If you want to display different text, use the Eric Meyer technique. If you want to display an image, then I think it would be easier and you would toggle display: none off for the link and on for the image using the hover selector.

Does that make sense?

Jeremy

Jeremy it doesn’t make sense to me, no.

I’m not using any images for the menu itself – I just want an image to display which links from menu link to the left float box. Either I’m not explaining it well, or I’m not understanding – both are very probable

Jinsan

You can have an image as the background of the left float box, and set display: none for the normal state. Then set display: block for the hover.

I don’t have time, but I may try and create a working example over the weekend.

Jeremy

thanks Jeremy that would be interesting to view ??