Position: absolute when location is dynamic

I have a page that shows a dynamic number of small images (19x19px).
I'm trying to write a script so that when you mouse over each image,
it will be replaced with a larger copy (giving a "zoomed in" effect).

This has gotten more complicated than intended, though, because I
don't want the program to shift the surrounding images to make room
for the larger copy; instead, I want it layered on top of the
original.

What I have so far works fine in IE, but in FF it replaces at 0px left
instead of the location of the original image. And Chrome sort of
works, but then when I mouse out the original image is no longer
inline.

Any advice on how to code this correctly this would be very much
appreciated! Here's a quick sample of the code:

// Javascript
function showEnlarged(key, toggle) {
var show_zoom;

if (toggle == "in") show_zoom = "<div style='position: relative;
top: -30px; left: -10px'><div style='position: absolute'><img
src='http://beta.gowilkes.com/images/emoticons/large/" + key + ".gif'
width='30' height='30' border='0' onMouseOver=\"this.style.cursor=
'pointer';\" onMouseOut=\"showEnlarged('" + key + "', 'out')\"></div></
div>";

else show_zoom = "<img src='http://beta.gowilkes.com/images/
emoticons/" + key + ".gif' width='19' height='19' border='0'
align='absmiddle' onMouseOver=\"this.style.cursor= 'pointer';
showEnlarged('" + key + "', 'in')\" onMouseOut=\"showEnlarged('" + key
+ "', 'out')\">";

if (document.getElementById) document.getElementById(key).innerHTML
= show_zoom;
}

// HTML
<div id="AddEmoticons08011" style="width: 19px; display: inline"><img
src="http://beta.gowilkes.com/images/emoticons/AddEmoticons08011.gif"
width="19" height="19" border="0" align="absmiddle"
onMouseOver="this.style.cursor= 'pointer'; showEnlarged
('AddEmoticons08011', 'in')" onMouseOut="showEnlarged
('AddEmoticons08011', 'out')"></div>


Here's a test page so that you can see the intent. Open it in IE to
see what I was expecting it to do:

http://beta.gowilkes.com/voice/view/test.php


Please note that the "real" page has a preload function in a separate
JS file, so for the sake of simplicity for this test page I loaded the
large copies in a <div style="display: none"></div>. Also, I'm using a
table as a container instead of a DIV because, with a DIV, the large
copy came up below the border instead of layered on top of it.

TIA,

Jason

PS, I had originally posted this question in comp.lang.javascript, but
there weren't any replies. In retrospect, this is more of a CSS
question than Javascript, anyway.

In article
<93d412da-4257-4952-b007-64671ff8b0af (AT) 33g2000vbe (DOT) googlegroups.com>,
Jason Carlton <jwcarlton (AT) gmail (DOT) com> wrote:

I have a page that shows a dynamic number of small images (19x19px).
I'm trying to write a script so that when you mouse over each image,
it will be replaced with a larger copy (giving a "zoomed in" effect).

....

Here's a test page so that you can see the intent. Open it in IE to
see what I was expecting it to do:

http://beta.gowilkes.com/voice/view/test.php

....

PS, I had originally posted this question in comp.lang.javascript, but
there weren't any replies. In retrospect, this is more of a CSS
question than Javascript, anyway.

That's a funny thing to say after quoting so much javascript!

If you can actually read Eric Meyer with his stupid styling of white or
dirty yellow on darkish grey (why do people do these things?), you might
get some tips from such as:

<http://meyerweb.com/eric/css/edge/popups/demo2.html>

Or better, ping Neredbojias, he has a set of thumnails somewhere with
pop ups done in CSS I think.

--
dorayme

That's a funny thing to say after quoting so much javascript!

No doubt! LOL Sometimes, though, it's tough to decide the appropriate
NG when the language used is Javascript, but the problem is the
relation of CSS to the Javascript. I've had similar issues when
creating a Perl script that uses Javascript on the output.

If you can actually read Eric Meyer with his stupid styling of white or
dirty yellow on darkish grey (why do people do these things?), you might
get some tips from such as:

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

Or better, ping Neredbojias, he has a set of thumnails somewhere with
pop ups done in CSS I think.

That's extremely helpful, thanks!

Jason

On Sep 23, 7:55*pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

In article
93d412da-4257-4952-b007-64671ff8b... (AT) 33g2000vbe (DOT) googlegroups.com>,
*Jason Carlton <jwcarl... (AT) gmail (DOT) com> wrote:



I have a page that shows a dynamic number of small images (19x19px).
I'm trying to write a script so that when you mouse over each image,
it will be replaced with a larger copy (giving a "zoomed in" effect).

...

Here's a test page so that you can see the intent. Open it in IE to
see what I was expecting it to do:

http://beta.gowilkes.com/voice/view/test.php

...

PS, I had originally posted this question in comp.lang.javascript, but
there weren't any replies. In retrospect, this is more of a CSS
question than Javascript, anyway.

That's a funny thing to say after quoting so much javascript!

If you can actually read Eric Meyer with his stupid styling of white or
dirty yellow on darkish grey (why do people do these things?), you might
get some tips from such as:

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

Or better, ping Neredbojias, he has a set of thumnails somewhere with
pop ups done in CSS I think.

--
dorayme

I've gotten this to work using :hover, but I have what I hope is a
minor issue. When I hover, the larger image is layered behind the next
smaller image; obviously, the layout needs for it to be on top.

I tried using z-index, but it had no impact. Which makes sense, of
course; you'll see in the source that I'm manipulating a background
image, so naturally a background image is... well, it's in the
background!

Is there a way to force the entire block to the front?

You can see it in action here:

http://beta.gowilkes.com/voice/view/test2.php

But for your convenience, as well as for future readers, here is the
source itself. I'm only showing the source for 2 images, but the live
page will have around 50:

// CSS Code
..roll { position: relative; }

..roll img {
visibility: hidden;
border: 0px;
}

..emoticon {
position: absolute;
width: 19px;
height: 19px;
}

..emoticon:hover {
width: 40px;
height: 40px;
}

..AddEmoticons08011 {
z-index: 1;
background-image:url('emoticons/AddEmoticons08011.gif');
}

..AddEmoticons08011:hover {
z-index: 2;
background-image:url('emoticons/large/AddEmoticons08011.gif');
}

..AddEmoticons08013 {
z-index: 1;
background-image:url('emoticons/AddEmoticons08013.gif');
}

..AddEmoticons08013:hover {
z-index: 3;
background-image:url('emoticons/large/AddEmoticons08013.gif');
}


// HTML
<span class="roll" onMouseOver="this.style.cursor= 'pointer';"><a
href="#" onClick="return false;" class="emoticon
AddEmoticons08011"><img src="emoticons/AddEmoticons08011.gif"></a><img
src="emoticons/AddEmoticons08011.gif"></span>

<span class="roll" onMouseOver="this.style.cursor= 'pointer';"><a
href="#" onClick="return false;" class="emoticon
AddEmoticons08013"><img src="emoticons/AddEmoticons08013.gif"></a><img
src="emoticons/AddEmoticons08013.gif"></span>

In article
<60ea6eea-ec61-4d1d-a52a-3194205add1f (AT) s6g2000vbp (DOT) googlegroups.com>,
Jason Carlton <jwcarlton (AT) gmail (DOT) com> wrote:

On Sep 23, 7:55Â*pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:
In article
93d412da-4257-4952-b007-64671ff8b... (AT) 33g2000vbe (DOT) googlegroups.com>,
Â*Jason Carlton <jwcarl... (AT) gmail (DOT) com> wrote:

.....
PS, I had originally posted this question in comp.lang.javascript, but
there weren't any replies. In retrospect, this is more of a CSS
question than Javascript, anyway.

That's a funny thing to say after quoting so much javascript!

If you can actually read Eric Meyer with his stupid styling of white or
dirty yellow on darkish grey (why do people do these things?), you might
get some tips from such as:

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

....
I've gotten this to work using :hover, but I have what I hope is a
minor issue. When I hover, the larger image is layered behind the next
smaller image; obviously, the layout needs for it to be on top.

I tried using...

Look at what happens when you add to your CSS:

span {padding-right: 50px;}

Everything is different in small spaces, in physics the laws of quantum
mechanics start to operate, in Being John Malkovich,

<http://www.imdb.com/media/rm479959296/tt0120601>

and in HTML... well, it is morning and I better desist...

--
dorayme

Look at what happens when you add to your CSS:

span {padding-right: 50px;}

Touche! :-) But that just puts a huge white chunk between each image,
and if I was going to do that then I wouldn't be worrying about
positioning at all; I could just make the original block 40px wide,
then toggle the entire block between small and big.

With 50 images in a 400px container, this option just isn't practical.
Any other ideas?

On 2009-09-24, Jason Carlton <jwcarlton (AT) gmail (DOT) com> wrote:
[...]

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

Or better, ping Neredbojias, he has a set of thumnails somewhere with
pop ups done in CSS I think.

--
dorayme


I've gotten this to work using :hover, but I have what I hope is a
minor issue. When I hover, the larger image is layered behind the next
smaller image; obviously, the layout needs for it to be on top.

I tried using z-index, but it had no impact. Which makes sense, of
course; you'll see in the source that I'm manipulating a background
image, so naturally a background image is... well, it's in the
background!

It's in the background of the element it's the background of. You can
still restack that element with z-index and bring the whole lot forward,
background, image and all.

Maybe you overlooked that z-index only applies to positioned things (so
set position: relative on the things you want to restack since that's
the most like position: static in all other respects).

Is there a way to force the entire block to the front?

You can see it in action here:

http://beta.gowilkes.com/voice/view/test2.php

Well, it looks like it's working now anyway, so maybe you already fixed
it.

In article <slrnhbsl25.31r.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2009-09-24, Jason Carlton <jwcarlton (AT) gmail (DOT) com> wrote:
[...]
....
Is there a way to force the entire block to the front?

....

You can see it in action here:

http://beta.gowilkes.com/voice/view/test2.php

Well, it looks like it's working now anyway, so maybe you already fixed
it.

It looks like it looked to me from the very beginning... maybe it was
just a couple of browsers of mine? I thought he did not want the
enlarged pop up to blot out the other icons so much...

His

<http://beta.gowilkes.com/voice/view/test.php>

looks like fun!

--
dorayme