"Popup"-Captions for images

Forum Moderators: not2easy

Message Too Old, No Replies

"Popup"-Captions for images

How to position captions relative to their image

waldemar

1:02 pm on Jul 6, 2003 (gmt 0)

The situation:

An image with three captions, by default visibility:hidden; An imagemap is attached and Scripting to set the caption's visibility:visible when the mouse moves over a certain area. Kind of "popup-captions" :-)

The problem:

The captions should appear close to that mapped onmouseover-area, but I don't know how to position them. position:absolute (which is what I am using right now) works on the whole page, but them image could be -floatingwise- anywhere. position:relative doesn't allow me to display the images on top of the main document layer.

Has anybody worked on something similar? I guess I'm looking for "a way to depend the captions' positions on the image's position without them being inline"...

killroy

2:13 pm on Jul 6, 2003 (gmt 0)

hmm place the image inside a div with the captions and pos:rel teh catpions?

like:

<div>
<img>
<div id="caption1">Caption 1</div>
<div id="caption2">Caption 2</div>
<div id="caption3">Caption 3</div>
</div>

Just an idea...

waldemar

2:27 pm on Jul 6, 2003 (gmt 0)

Well the position:relative; is a problem...
this way the captions stay inline in the document. Even though their "visibility" is set to "hidden", they take up virtual space in the flow...

waldemar

3:38 pm on Jul 6, 2003 (gmt 0)

Let me try to describe in a different way:

It comes to down to finding a way to place several divisions at the same left:/top: position as a document-inline (not position:absolute) image is.
These division should not render into the body but float ontop (I tried z-index without success). This way I could place captions (they could appear right next the image detail they belong to) and/or parts of the image (for example as a rollover using an imagemap) anywhere I want. Does that make any sense?

DrDoc

4:44 pm on Jul 6, 2003 (gmt 0)

Make them all the same size as the image, float the image and the captions left, but let the captions have a negative margin equal to the image width.

#theimg {
float: left;
}
#caption1, #caption2, #caption3 {
display: none;
float: left;
margin-left: -250px;
width: 250px;
height: 100px;
}

<div>
<img id="theimg" width="250" height="100">
<div id="caption1">Caption 1</div>
<div id="caption2">Caption 2</div>
<div id="caption3">Caption 3</div>
</div>

Now, use JavaScript to toggle the display property: none vs. block

DrDoc

4:47 pm on Jul 6, 2003 (gmt 0)

If you don't want the caption on top of the image, just skip the negative margin.

waldemar

5:07 pm on Jul 6, 2003 (gmt 0)

Great DrDoc!
Okay now have all elements perfectly aligned to the top left corner - where the image starts.

How do I get to move them to a desired position now?
Using this technique for captions only I can simply position the text with Paddings.
It would be *brilliant* now to attach a background-image that works as the rollover. But modifying Left: and Top: doesn't have any effect...

<added:>I inserted "position:relative;" to the #captions and it's starting to work...</added

waldemar

5:41 pm on Jul 7, 2003 (gmt 0)

The idea was to create a hover/rollover effect using css' layers and minimal client side scripting (no photoshop/imageready replace image-in-DOM-script): "Popping up" captions or hovered parts of the image on top of an <IMG>.

The current status:

It looks like using floats for the image and the captions, and forcing the captions' margins to (negative) match the width of the image, places them right on top - this is done without z-index'ing (anybody expierenced with z-index?).

Ok, we wrap the whole image plus captions into an 'imagebox' that contains some cosmetics...

.imagebox{ width: 400px; height:250px; float:right; margin-left:30px; }

The #mainimage's width and height are defined, and (very important) it's set to float left;

#mainimage{ float: left; width: 400px; height:250px; }

The three captions are also set to float left; margin-left is set to the image's width. Now their left/top position *should* equal the image. The rest is mostly cosmetics:

#caption1, #caption2, #caption3 {
display: none;
float: left;
margin: 0px;
margin-left: -400px;
width:200px;
text-align:justify;
text-indent:0px;
font-weight:bold; color:#000000; padding:8px; font-size:0.8em;
position: relative;
background-color: #FFFFFF;
border: 1px solid #000000;
}

I chose a fixed width so the captions get some sort of "shape". The actual left/top positioning I kept in the html document (style="") for the time being - since it depends on the individual html pages' image's details.
To include a "rollover" effect one just adds

background-image: url(images/rollover-effect-1/2/3.gif);

to that inline style while the image can contain anything from highlighted parts of the image to marking (transparent) circles or rectangles.
Now just place a client side image map on top of that image:

Well this all works fine in theory; I got one problem though:

While Netscape renders fine; IE 6 will not place "some" captions to the given left:/top: attributes, but instead seems to take other objects into rendering account.

DrDoc

4:19 pm on Jul 8, 2003 (gmt 0)

Just a little question... Why not just use the alt or title attribute to provide the caption?

waldemar

8:15 am on Jul 9, 2003 (gmt 0)

Because the client wants to put some emphasize on the captions... larger (and non-tooltip design) and longer displayed. (The three alt-seconds are actually not enough to read the whole sentence comfortably.)