WordPress.org

Ready to get started?Download WordPress

Forums

Rollover effect related to content (17 posts)

  1. Jinsan
    Member
    Posted 9 years ago #

    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

  2. fuzzy_logic
    Member
    Posted 9 years ago #

    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.

  3. jeremycherfas
    Member
    Posted 9 years ago #

    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.

  4. Jinsan
    Member
    Posted 9 years ago #

    hi jeremy - what i meant was this:

    http://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"

  5. philpeeps
    Member
    Posted 9 years ago #

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

  6. Joshua Sigar
    Member
    Posted 9 years ago #

    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.

  7. philpeeps
    Member
    Posted 9 years ago #

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

  8. Joshua Sigar
    Member
    Posted 9 years ago #

    I've been meaning to "steal" this particular technique from this site
    http://www.adaptivepath.com/

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

  9. Jinsan
    Member
    Posted 9 years ago #

    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?

  10. Joshua Sigar
    Member
    Posted 9 years ago #

    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.

  11. Lorelle
    Member
    Posted 9 years ago #

  12. Jinsan
    Member
    Posted 9 years ago #

    @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? :)

  13. jeremycherfas
    Member
    Posted 9 years ago #

    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

  14. Jinsan
    Member
    Posted 9 years ago #

    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

  15. jeremycherfas
    Member
    Posted 9 years ago #

    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

  16. Jinsan
    Member
    Posted 9 years ago #

    thanks Jeremy that would be interesting to view :)

  17. fuzzy_logic
    Member
    Posted 9 years ago #

    Have you read this before? Might be helpful.

    http://veerle.duoh.com/index.php?id=C0_15_2

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.