How to Restore Image on Set Text Container Behavior

Discussion in 'Web Design' started by etangins, Jul 16, 2013.

to remove all ads.
  1. etangins

    etangins Member

    Messages:
    81
    I'm using dreamweaver's set text container behavior on mouseover trigger for an image to simulate a rollover going from image to text. You can see this at http://ninjawarrior.info/gyms.html when you mouse over one of the images.

    I want the image to reappear when the user removes his/her mouse from the image. I tried using the mouseout trigger and set text container to the image with the previous parameters, but that didn't work. I also tried using mousefocus trigger instead of mouseover which also didn't work. How can I get the image to restore over the text when the user removes the mouse from the area where the image is?

    Thanks for your time
     
  2. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Can I impress upon you that there is a much easier, more performant way to do this? In fact, you'd have no need to use javascript at all. All the magic happens using the CSS :hover pseudo class.

    All you'd have to do is this in your HTML:
    HTML:
    <div class="hover_thing">
      <p>The text you want the user to reveal</p>
      <img src="path/to/image.png" alt="whatever" />
    </div>
    
    Then, in your CSS:
    Code:
    .hover_thing{
      height:100px; /*Whatever the height of the image is*/
      width:100px; /*Whatever the width of the image is*/
      position:relative;
    }
    .hover_thing p{
      height:100%;
      width:100%;
      position:relative;
      z-index:-1;
    }
    .hover_thing img{
      min-width:100%; /*If you want the image to be responsive*/
      position:absolute;
      top:0;
      left:0;
      z-index:10;
    }
    
    /*Here's where the magic happens*/
    .hover_thing:hover img{
      display:none;
      transition: all 0.5s; /*If you want it to fade out - will require vendor prefixed versions*/
    }
    
    And that, my friend is all you need to make this happen. No JS, no onmouseover stuff. Continues to work even if JS is turned off.
     
  3. etangins

    etangins Member

    Messages:
    81
    I'm all for easier solutions. Problem is, my "reveal content" is more than just text. I also have the pinnacle parkour and warrior lab images that reveal, so it seems it is throwing off the css because I have multiple images in that div. How can I adjust the code to accomodate that?
     
  4. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    And ????


    THAT is EXACTLY what positioning is FOR.
     
  5. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    BLUF: Select only the image you want to hide in your CSS.

    Selectors, and understanding how they work is the crux of CSS. If you need to target something differently, use a class or child selector or any of a ridiculously large number of possibilities.

    When someone writes code for you without regard for your particular set of circumstances, you'll need to adjust it. Most of the time, it's as simple as changing the selectors. Many times, it means changing values. Sometimes, it means understanding the basic idea of what they wrote and retooling it for your specific needs.

    The main thing to take away is not the code specifically, but the concept itself. What I was trying to show you is that you need to position the image on top of the other content and use the CSS :hover pseudo-class to hide the image.

    In your case, I think a child selector on the last CSS statement I wrote above is all you would need. However, without spending way more time tooling through your code than I'm willing to for free, I can't say for sure.
     
    Last edited: Jul 21, 2013
  6. etangins

    etangins Member

    Messages:
    81
    I used your concept of the CSS :hover pseudo-class to hide the image, and to solve my problem, put an apdiv with a z-index of 1 with the content I wanted to reveal. I still kept the <p></p> code with a value of "-" to ensure it didn't mess up the code.

    However, because it was an apdiv, it wasn't positioned correct, so I surrounded both the hover_thing div and the apdiv with my content with a <div style="float:left; position: relative;"> and I specified the apdiv to be position: absolute. It worked and positioned the apdiv correctly, but the hover function doesn't seem to work anymore. It worked before I changed the position but still used the apdiv. It also might be that my computer is too slow. Why do you thinkg this happened. You can what I did at http://www.ninjawarrior.info/gymstest.html on the image with the people swinging on bars.
     
  7. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    Not because it was absolutely positioned, but because you do not fully understand how to use absolute positioning and the stacking order correctly.


    No it's because that is A FOUR Megabyte image WTF??????????????????????


    The ENTIRE WEBSITE shouldn't need to be that big!!!!!!!!!!!!!!!!!!!
     
  8. etangins

    etangins Member

    Messages:
    81
    So your saying that everything is working correctly, except that the image is too large, so it is glitching a bit. I noticed when viewing on internet explorer that hovering works, but only when you keep the mouse aboslutely still. If you move it, the image flashes. On chrome, hover does absolutely nothing. The problem occurs for both images.
     
  9. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    You need to also set it so when the pointer is over the image it ALSO makes the image topmost in the stacking order and then has to move out of the container to drop the image back to the bottom of the stack.
     
  10. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    Actually I should reword that to make it clearer.

    It is NOT when the cursor is over the image ... but when the image is brought up and put UNDER the mouse pointer.
     
  11. etangins

    etangins Member

    Messages:
    81
    How would I do that? Change the z-index in the css?
     
  12. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    I rather assumed you are already doing just that to bring the image to the top of the stacking order when it is made visible. (Which is why it flickers)


    The explanation of that is when the image is topmost it obscures the lower element and therefore 'breaks' the :hover, the image then drops out of focus and the :hover is retriggered, thus creating an infinite loop.
     
  13. etangins

    etangins Member

    Messages:
    81
    Would changing display:none to visibility:hidden to the trick or would I need to add :hover to the css of the apdiv (the one with my content that I want to reveal) where I change the z-index?

    I tried both, but neither worked.
     
    Last edited: Jul 24, 2013
  14. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
  15. etangins

    etangins Member

    Messages:
    81
    Thank you, that helped a lot. I have gotten to the point where there is no glitching when I rollover the image, but I still cannot add a second image that doesn't behave like the rollover image (I want this image to appear along with the text when you rollover the image). I tried adding a class to it, and also tried changing the id of the rollover image as well as all #img to #imroll (my new id) but it didn't work. How can I code it so a second image does not behave like the first image?
     
  16. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    Second image to where?


    Give it a specific ID or class.
     

Share This Page