CSS help needed
#1
Scooby Regular
Thread Starter
Join Date: Mar 1999
Location: The Great White North
Posts: 25,080
Likes: 0
Received 0 Likes
on
0 Posts
CSS help needed
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.
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.
#2
Scooby Regular
Join Date: Apr 1999
Location: Bore Knee Muff
Posts: 3,666
Likes: 0
Received 0 Likes
on
0 Posts
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?
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?
#3
Scooby Regular
Join Date: Apr 1999
Location: Bore Knee Muff
Posts: 3,666
Likes: 0
Received 0 Likes
on
0 Posts
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.
getimagesize() in php - not sure what technology (if any) you have at your disposal.
#4
Scooby Regular
Thread Starter
Join Date: Mar 1999
Location: The Great White North
Posts: 25,080
Likes: 0
Received 0 Likes
on
0 Posts
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
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
Thread
Thread Starter
Forum
Replies
Last Post
MH-Racing
Subaru Parts
18
18 October 2015 04:49 PM
robbie1988
Wanted
2
13 September 2015 09:25 AM
Scooby-Doo 2
Wheels And Tyres For Sale
1
09 September 2015 06:51 PM