target image placement

[cway]

1) Script Title: CSS Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

3) Describe problem:

I'm having a hard time getting the target image placement correct.
The moon image needs to be on top of the alphabet image.
And when you mouse-over a thumbnail, for example the sun face, that's suppose to be on top of the alphabet image, as well.

Happy to pay for help!

Image and coding below.
http://www.trentstudios.com/target-image.jpg


/* Begin DynamicDrive Gallery
--------------------------------------------------------------------------------- */
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.navigation_container
{
/*position: relative;*/
/*Add a height attribute and set to largest image's height to prevent overlaying*/
height: 20px;
margin:0 auto;
text-align:center;
top: 0px;
border:0px solid #0f0;
font-weight:bold;
}
.navigation_container a{width:16px;height:20px;line-height:20px;text-decoration:none;color:#666;}
.navigation_container td{height:20px;line-height:20px;font-size:10px;color:#f00;}
.pageActive{
display:block;
width:16px;
height:20px;
background-image:url('graphics/yellow_dot.gif');
background-repeat:no-repeat;
background-position:center;
}

.product_description
{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
height: 0px;
width: 256px;
left: 158px;
text-align: center;
}

.gallerycontainer
{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
/*height: 0px;*/
height:auto;
width: 380px;
left: 480px;
text-align: center;
top: 0px;
border:0px solid #0f0;
}

.thumbnail img { margin: 0 2px 0px 0; }

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img { }

.thumbnail span
{
/*CSS for enlarged image*/
position: absolute;
padding: 2px;
left: -500px;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 0px;
}

.thumbnail:hover span
{
/*CSS for enlarged image*/
visibility: visible;
top: 53px;
left: -238px;
/*position where enlarged image should offset horizontally */
z-index: 50;
}

dl
{
text-align: center;
font-size: .95em;
margin-top: 25px;
}
dt,dd {
width:4.5em;
float:left;
}
dt
{
margin-bottom: 2.8em;
width: 70px;
text-align: center;
}
dd
{
margin: 57px 0 0 -5.5em;
text-align: center;
font-size: 8pt;
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
text-decoration: none;
line-height: 10pt;
}
img.tn
{
vertical-align: bottom;
padding: 2px;
border: 0em;
text-align: center;
}
em
{
display: block;
font-weight: bold;
margin-bottom: 5px;
}
dl a:hover img,dl a:active img,dl a:focus img
{
}

[Nile]

Please post a link to the page on your site that contains the problematic script so we can check it out.

[cway]

http://dev.shadowboxart.com/Merchant2/merchant.mvc?Screen=CTGY&Store_Code=shadowbox&Category_Code=shadowbitpins

[Nile]

Is it possible that we could just change the body bg with javascript?

[cway]

Is the CSS too far off to continue to work with? Is that why you're suggesting javascript? I can't put any javascript in the image tags. I'm trying to keep it so my customer can update her store without knowing any coding. They way I have it now, she can do that. I just need to fix the target or remote image positioning.
Thanks for the assistance, Nile!
Cway

[Nile]

Well - I'm really not that great at CSS, and it seems pretty hard to get it where you want it. That's why I'm suggesting javascript. You wouldnt need to put any javascript in the <img> tag, we could put it later in the code.

[cway]

Can you give me a javascript example?

Using CSS, I got it perfect in Firefox Mac and XP and Netscape 9 in XP:
http://dev.shadowboxart.com/Merchant2/merchant.mvc?Screen=CTGY&Store_Code=shadowbox&Category_Code=shadowbitpins

It's only a few pixels off in IE8 in XP and in Safari in XP and Mac.
A pixel off in Opera 10 and Google Chrome in XP.
I wonder if there's a CSS hack for these browsers.

[Nile]

You are pretty close but I wouldn't know how to fix it further than that. In javascript, first of all the main thing you might not be so happy with is that you have to change every image and make it the full thing (with the border and all).
Then, for each image, on it you would put:


onmouseover="document.body.style.background='URL OF IMAGE';" onmouseout="document.body.style.background='http://dev.shadowboxart.com/Merchant2/graphics/00000001/shadowbit/images/shadowbit_bkgd.jpg'"

Which sucks because you have something like that on every page. If that doesn't sound good to you, I would suggest waiting for someone else to reply, or making a new topic. xD

Sorry, good luck!

[cway]

Sounds like I better stick with what I've got.
Thanks for the ideas, Nile! It is very much appreciated!
Cway