Can someone help me with the following:

I want to display an image and when the image is moused over I want to display, over the bottom right hand corner of the image a 50% opacity box (made as a CSS style with width, height, color and bgcolor values to give the illusion that it's a box) which has the text "close window" in it, and when it's clicked it'll close the window (that I know how to do, bit of javascript in an ref tag) an when you move the mouse off the image the "close window" text disappears.

I'm pretty sure it can be done, just not too sure how to.

Help greatly appreciated.

 

Presumably this needs to be dynamic as the image could be any from a DB or folder list?

The stumbling block would be the opacity part. I doubt all browsers would support it.

Could you not have a .gif that is the X in a box with transparent background and another that is perhaps filled in?

<style>
#test{background:url(test.jpg) no-repeat;width:397px;height:261px;display:block;}
a{background:url(test1.gif) no-repeat bottom right;display:block;height:50px;width:50px;padding-left:347px;padding-top:211px;}
a:hover{background:url(test2.gif) no-repeat bottom right;}
</style>

<div id="test">
<a href="javascript:top.window.close();"></a>
</div>

test.jpg is the main image
test1.gif is my X with transparent background
test2.gif is my rollover with filled in background

Any good?

 

In order to do this you'd need to get the main image size first to calculate the paddings on the href...

getimagesize() in php - not sure what technology (if any) you have at your disposal.

 

Rich,
Thanks for the code. Gives me some good ideas. Plus I had a look at Pistonheads and saw they have a little box in the corner that allows you to cycle through images, but someone could "modify" that to display a close window "box"

thanks for the help