Forum Moderators: not2easy
Is there any way to do this with CSS? This is the code that I'm currently using which is attached to each thumbnail:
<td width="150" height="179" align="center" valign="top"><span id="toolTipBox"></span><a href="wallpaper/ip_wp_1/ip_wp_1_php.php"><img src="wallpaper/thumbs/ip_wp_1.jpg" name="thumb_1" width="119" height="179" border="2" class="border" id="thumb_1" onmouseover="toolTip('Drepung Monestary, Tibet',this);MM_swapImage('iphone_full','','wallpaper/rollover_images/ip_wp1_rollover.png',1)" onmouseout="MM_swapImgRestore()" alt" /></a></td>Many thanks in advance for your help.
Using js is the right way to go, but I would simplify your code as follow:
blank iphone image:
<img src="/path-to-your-blank-iphone-img.jpg" name="mainpic" alt="" />
and on your rollover links
<a href="#" onmouseover="document.mainpic.src='/path-to-your-first-iphone-img.jpg'" onmouseout="document.mainpic.src='/path-to-your-blank-iphone-img.jpg'"><img src="/iphone-thumb1.jpg" alt="" /></a>
<a href="#" onmouseover="document.mainpic.src='/path-to-your-second-iphone-img.jpg'" onmouseout="document.mainpic.src='/path-to-your-blank-iphone-img.jpg'"><img src="/iphone-thumb2.jpg" alt="" /></a>
what's in bold should be the same name :)
Will it be possible to incorporate the tooltip on mouseover into the revised code, or would you advise against it?
Many thanks again.
Is there any way to do this with CSS?
Yes, this is easily done with CSS only. There's no need for JS for hovering effects.
(Usual exception for IE6: we might need to fix IE6's broken by design nature).
Basically you have a list of images? -> <ul> containing <img>
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]But where is my blank phone ?
Well add it as background on the <ul>, and position it as you like
and use padding to make sure the list itself stays away from the backgroundNo 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:
[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>
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.
#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;
}
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:
#phone {
background: white url('phone.jpg') no-repeat top center;
padding-top: 600px; /* arbitrary value */
}
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>:
#phone {
position: relative;
}
#phone img+img {
position: absolute;
left: 50%;
margin-left: -160px; /* half the width */
top: 30px;
}
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:
#phone img+img {
display:none;
}
#phone a:hover img+img {
display:block;
}
let's finish it off by styling the thumbs a bit as well, otherwise it looks so untidy:
#phone {
text-align: center;
}
#phone li {
display: inline;
}
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:
<!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;
}
#phone img:first-child {
height: 179px;
width: 119px;
border: 2px solid black;
}
#phone img+img {
height: 480px;
width: 320px;
border: none;
position: absolute;
left: 50%;
margin-left: -160px;
top: 30px;
display:none;
}
#phone a:hover img+img {
display:block;
}
#phone {
position: relative;
background: white url('phone.jpg') no-repeat top center;
padding-top: 600px;
text-align: center;
}
#phone li {
display: inline;
}
</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>
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.
I have managed to get the site working with JS for now but am keen to use CSS so will be using your post to redesign the page shortly. I will post back if I have any porblems.
In the meantime thank you once again, I really appreciate it.
