Support » Themes and Templates » Rollover effect related to content

  • hello,

    What I’d like to achieve is this:

    in the top left content box would be a default for the content. On the right you see a menu rollover thingy. What I would like to do is rollover, say item two which might be home and then in the left hand box it would display an item which explains what the page contains then, if the user rollsover item three which is contact it again provides information on what the page contains on the left.

    How difficult would this be to implement, and would I need to load images for the content to be displayed?

    Thanks in advance

Viewing 15 replies - 1 through 15 (of 16 total)
  • 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:

    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

    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 {

    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.


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

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

    reviews – this would actually link to another site, but that’s not important

    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? 🙂


    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 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


    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.


    thanks Jeremy that would be interesting to view 🙂

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Rollover effect related to content’ is closed to new replies.