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/illustration/indexCSS.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.

[BLiZZaRD]

The first was done in Windows XP, on a 1024x720 resolution. Pretty standard. Using Firefox3

This one was done with Windows Vista on a wide screen HD monitor using IE8. A little better, but not much.

Either way, properly coding your site will make the thing appear just fine on all monitors, browsers, and OSes.


<edit>
The problem with using large monitors to do design is that you forget to make it look good on the average size monitors and resolutions that your visitors will be using. If everyone only had 30" monitors and used the same OS and resolution none of this would be an issue. I run into this problem when developing my Flash applications. I code it to look good on my monitor, then I have to go back and make changes so it looks right to my visitors. This website: http://browsershots.org/ comes in real handy. You can choose the broswers, OSes, screen size, etc. then you get screen shots for each that you have selected.

[mcolton]

Thanks for your help. I've had a lot of trouble programming for different size monitors. I'm a self-taught programmer who writes in html. I don't use any other programs like Publisher (a holdover from my Progress database programming days). I do a LOT of trial and error.

What is the resolution for an "average" size monitor. Do you know about a program called Multi Browser Viewer. It looked like it would help me.

If you program a page for a width of 720px, how does it look on a wide screen. Again, thanks for your time.

[djr33]

Most websites are designed using percentages so that they scale to any size. This is the best way. If you have a lot of images or other content that cannot change size, then some sites will have pixel-based (unchanging) layouts. In that case, the normal idea used to be 800x600, but now some sites do 1024x768. Either of those, though, will look bad on another monitor. And remember, most people (like me, right now) do not use fullscreen windows, at least some of the time. If this is the only thing they are doing on the computer (for example, watching a video), then it might be ok to expect the user to maximize the window, but at other times, there's no reason they will. And some monitors are widescreen, some are 4:3 (almost 'square'/like a normal TV), and with lots of new devices like the iphone browsing the web, it's completely unpredictable. Some people even browse using the window split across a dual monitor setup.

[BLiZZaRD]

Some people even browse using the window split across a dual monitor setup.

Or a quad monitor set up like me! :)