Help needed: CSS Rollovers, with a twist

[amosharper]

Hi all,

I have a page with various images positioned absolutely within a relative background <div>. A slightly old version of this can be found at www.freewebs.com/amosharper/rsom

What I want to reach with this is:
- When a user hovers over any one of the images I am going to put in (currently marked by 'Link'), text, probably underneath but definetly in a different place to the image concerned, appears. The text position would be the same for each link, and no text would appear if no image is hovered over.
- Clicking the image will open a small popup, or perhaps an iFrame - either way, I can do this part happily myself :)

I imagine it would be done one of two ways: either hovering over the link actually links the user to a new page - an iframe within the docuement, with a transparent document - that contains the text, or through a more clever way that does not require more pages than the central page and stylesheet.

Any ideas how I could achieve this?

Thanks,

- Amos

[WebJoel]

Something like this?

http://meyerweb.com/eric/css/edge/popups/demo.html

[scragar]

<a id="hover" href="#"><img src="test.gif" alt="my alt..."><span>some invisible text...</span></a>and CSS:
#hover span{
display: none;
}
#hover img{
display: block;
}
#hover:hover span{
display: block;
position: absolute; /* break it free of the box. */
margin-top: -20px; /* locate it 20px above it's default... */
margin-left: 30px; /* locate it 30 right of it's default. */
/* margin-right and margin-bottom do nothing on most browsers,
best to ignore them */
}

hadn't noticed the post above when submitted. very similar solutions though :P(only one I can see is that mine is based on the idea of relative positioning using absolute positioning to break the box model and that link uses absolute position for just that).

[amosharper]

Thanks, scragar and WebJoel - I'll play around and come back if I hit a stumbling block.

[amosharper]

Ok, I'm a little stuck. I used the link WebJoel linked me to, as it had a fairly step-by-step walkthrough, but I have a problem.

I've reuploaded my page at http://www.freewebs.com/amosharper/rsom/

As you can see, it works perfectly except the positioning - despite me defining an absolute position within div#bodypic, both links I've given rollover test to (the one labelled 'profile' and the 'Link' on the road) display their <span> relative to the picture's position. Any ideas how I get around this?

Thanks in advance,

- Amos

[WebJoel]

Missing !doctype would be my first guess. Until a proper, full !doctype (with valid URL) is added, this probably will not work in any version of IE.. :)

This does hover, currently work in Firefox (that's a big clue right there).. :D

Also, -get rid of of those "</img>" tags. No such tag exists for "<img>"

A properly-closed image is like:

<img src="#" />

(note the white-space before the slash. -This is important. It tells older browsers to not interpret the "/" as a "shell command" which, if you later on add something-javascript, could become an issue).

[amosharper]

I'm glad it works for you in Firefox - it doesn't for me!

I will, none-the-less, put in a !doctype and everything else the validator asks for.

Thanks again.

Amos.

[WebJoel]

I can swipe your code and test it, fix as needed. :)

I keep seeing little things that aren't right...

div#loading {
position: absolute;
left: 512px;
z-order: 0;
} No such. z-index:0. And "z-index:0;" is the default. No need to state it.

Get rid of the "<center></center>" for id="loading" in your HTML, and use "text-align:center;" instead, in "#loading {...}"

The "<center>" tag is deprecated.
---
<LINK rel="stylesheet" type="text/css" name="style1" href="style_main.css">

huh? A "link" doesn't have a name=""

[amosharper]

I'll have to revalidate quite often as the site is not quite in its final stage yet.

Ignoring the rollovers and lack of validation, do you have any [constructive] criticism of www.richardssom.com/index.htm?

Tried to keep the background download speed to a minimum, but quality has suffered as a result.

Thanks again,

Amos