How to Restore Image on Set Text Container Behavior

E

etangins

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

ronaldroe

Super Moderator
Staff member
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.
 
E

etangins

Member
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?
 
ronaldroe

ronaldroe

Super Moderator
Staff member
etangins said:
How can I adjust the code to accommodate that?
Click to expand...

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

etangins

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

chrishirst

Well-Known Member
Staff member
because it was an apdiv, it wasn't positioned correct,
Click to expand...
Not because it was absolutely positioned, but because you do not fully understand how to use absolute positioning and the stacking order correctly.


It also might be that my computer is too slow. Why do you thinkg this happened.
Click to expand...
No it's because that is A FOUR Megabyte image WTF??????????????????????


The ENTIRE WEBSITE shouldn't need to be that big!!!!!!!!!!!!!!!!!!!
 
E

etangins

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

chrishirst

Well-Known Member
Staff member
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.
 
chrishirst

chrishirst

Well-Known Member
Staff member
when the pointer is over the image it ALSO makes the image topmost in the stacking order
Click to expand...

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

chrishirst

Well-Known Member
Staff member
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.
 
E

etangins

Member
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:
E

etangins

Member
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?
 
You must log in or register to reply here.
Top