Page is a not externally linkable
swa66 - 6:28 pm on May 8, 2009 (gmt 0)
Yes, this is easily done with CSS only. There's no need for JS for hovering effects. Basically you have a list of images? -> <ul> containing <img> But where is my blank phone ? Well add it as background on the <ul>, and position it as you like No ID's, no spans, how to select the second image? Well there's a selector called adjacent sibling selector that will select the second image easily enough. Like all these step-by-step examples: ditch IE, yes don't even look at it in IE, it'll set you on the wrong foot. At the end: fix any remaining IE issues. So let's assume we start from this: since my test images are way oversized, let's first give them a size, it'll also show how to select the first and second image without havinh an id or class on them. I also added a border on the thumb and removed the blue one on the larger one. Next let's add the blank phone, center it to up the challenge a bit and make sure the thumbnail don't go over it: Now let's position the larger images to fit on their designated place. Since I don;t have your image it'll be something on the one I used (and mine wasn;t the right size so it'll be off for you ... First we give the <ul> position:relative so it is used as a reference (the closest parent having gained "position" to the image, next we absolutely position the large image on it's centered spot some pixels from the top of the <ul>: Centering: set the left side in the middle, next move it back by half the width. Ok, now they all end up on their spot, but we only want them to show when their thumb is hovered: let's finish it off by styling the thumbs a bit as well, otherwise it looks so untidy: There, works in FF, Safari and chrome. Leaving IE as an exercise for the reader (yell if you need help), it's not going to be easy in IE6 as I've used stuff IE6 doesn't support. Tips:
Is there any way to do this with CSS?
(Usual exception for IE6: we might need to fix IE6's broken by design nature).
They are linked to another page? -> <a> around the images
Well here goes in html:
<ul id="phone">
<li>
<a href="#">
<img src="1t.jpg" alt="thumb1 description" />
<img src="1.jpg" alt="full1 description" />
</a>
</li>
...
</ul>
[/quote][/pre]
and use padding to make sure the list itself stays away from the background
[quote][pre]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
</style>
</head>
<body>
<ul id="phone">
<li>
<a href="#">
<img src="1t.jpg" alt="red background" />
<img src="1.jpg" alt="red background" />
</a>
</li>
<li>
<a href="#">
<img src="2t.jpg" alt="orange background" />
<img src="2.jpg" alt="orange background" />
</a>
</li>
<li>
<a href="#">
<img src="3t.jpg" alt="yellow background" />
<img src="3.jpg" alt="yellow background" />
</a>
</li>
<li>
<a href="#">
<img src="4t.jpg" alt="green background" />
<img src="4.jpg" alt="green background" />
</a>
</li>
</ul>
</body>
</html>
#phone img:first-child {
height: 179px;
width: 119px;
border: 2px solid black;
}
#phone img+img {
height: 480px; /* or what their size is */
width: 320px;
border: none;
}
#phone {
background: white url('phone.jpg') no-repeat top center;
padding-top: 600px; /* arbitrary value */
}
#phone {
position: relative;
}
#phone img+img {
position: absolute;
left: 50%;
margin-left: -160px; /* half the width */
top: 30px;
}
#phone img+img {
display:none;
}
#phone a:hover img+img {
display:block;
}
#phone {
text-align: center;
}
#phone li {
display: inline;
}
|
If you want you can add a <span> in the <a> and threat it much like we did the second image to form a text block that appears when you hover.