Mouseover image not covering text

[mcolton]

Could someone please go to http://www.orhspets.org and mouse over the picture of the cat or dog. Is it possible to have it cover the writing next to it while it is moused over?

Thanks for any help

[djr33]

You could use Javascript to trigger the event, but there's a pure CSS way that would be simpler. The only problem is that it won't work in Internet Explorer.

Give the img a class, let's say "pet":
<img class="pet" ....>

In your CSS:
img.pet { z-index:0; /*normal style here*/ }
img.pet:hover { z-index:10; }

(The z-index is the image's depth compared to the other items on the page. If nothing else has this set, then just 1 or 2 should move it above the rest. If several things have it set, then it's best to guess a high number like 10.)


This is untested, but I think it should work. To make it fully compatible you might have to set the z-index of the text as well, but I don't think that's necessary.

Again, the only real problem with this is that it won't work in IE and that it requires CSS (but that's much more common than Javascript, so there's no better solution).
Since this is not a required effect, I think that should be fine. If this was crucial to the content of the site it might make sense to have a Javascript backup.

If you do want a javascript backup, then it's basically the same as a rollover image, but instead of changing the image's source, you'd change it's z-index: onmouseover to 10 (or another high number), and onmouseout to the default (0?).



Note: the reason this will not work in IE is that IE only allows the :hover pseudo-class for <a> tags, so you could, if you want, make this image linked, then I think it would work, but then the problem is that it would be a link and could get confusing. You could always use "#" as the href, though, to disable loading a new page. [In this case, though, you'd be setting the class 'pet' for the <a> tag, so your CSS would reflect that as well-- a.pet, a.pet:hover, etc.]

[BLiZZaRD]

I would suggest a simple image "swap" use 2 images, one small for on the page and one larger for the"zoom" effect. It can be done in CSS only and only requires one little hack for IE to function properly...

<div class="nav">
<a href="#">
<img src="cat_small.gif" width="200" height="150" alt="" />
</a>
</div>

And the CSS to go along with it:

div.cat {
height: 400px;  //set to height and width of larger image
width: 250px;
margin:0;
padding:0;
background-image:url("cat_large.gif");
}

div.cat a, div.cat a:link, div.cat a:visited {
display:block;
}

div.cat img {
width:100%;
height:100%;
border:0;
}

div.cat a:hover img {
visibility:hidden;
}

Then, in the head section of your page (or strip the comment and style tags and add it to the separate CSS file:

<!--[if lte IE 6]>
<style type=text/css">
div.cat {background-repeat:no-repeat;}
div.cat a:hover {visibility:visible;}
</style>
<![endif]-->

[mcolton]

Thanks. That's all above my head.

How about if when you mouseover, the text moves over to the right so you can still see it

[djr33]

That's not going to be any simpler. What we said isn't that complex, just a lot of explanation for fairly simple results. You could of course use Javascript to do similar things, but that would need the CSS anyway to change the positioning.

[BLiZZaRD]

It would help to have a properly coded and functioning page first. But then again, I am a stickler for wanting good code everywhere. (Crazy, I know!)

What you are asking for (originally and lately) are both simple to do. However, my main problem (aside from that navigation menu) is that the text is over the images, dark images, and is a dark color. I don't see a need to "enlarge" the image to see it when no one can see the page correctly anyway.

[mcolton]

I'm sorry but I don't understand when you say the page isn't working properly. Everything looks fine on my end.
And is there something wrong with the navigation menu

[BLiZZaRD]

Have a look for yourself....

[auntnini]

I used the CSS display:none <span></span> trick here http://www.chanit.com/gallery/floral.htm and
http://artdemo.tripod.com/sketch/tableTestCSS.html#top and
http://artdemo.tripod.com/illustrati...exCSS.html#top .

If you align="left" the images, the text will flow around them. Yes, I know ALIGN is deprecated, but FLOAT is a pain in the ___.

[mcolton]

Blizzard, can I ask what browser are you looking at and how wide is your monitor. I use IE7 and have a large monitor. When I compress my screen width, I don't see what you see. The menu tabs are wrapped onto the next line.