homepage Welcome to WebmasterWorld Guest from 54.161.246.212
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Rollover - Help Needed
irthom

5+ Year Member



 
Msg#: 3909285 posted 10:11 am on May 8, 2009 (gmt 0)

I am designing a webpage to showcase iPhone wallpaper. The central image in the page is a blank iphone. There are thumbnails either side of it. When I rollover a thumbnail I want a rollover image to appear where the blank iphone image is, then restore on mouseout. I am currently using javascript to do this but it is proving to be a bit clunky (I added a DW CS4 behaviour to each thumbnail).

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.

 

le_gber

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3909285 posted 3:45 pm on May 8, 2009 (gmt 0)

Hi irthom,

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 :)

irthom

5+ Year Member



 
Msg#: 3909285 posted 3:58 pm on May 8, 2009 (gmt 0)

Thank you so much for your response.

Will it be possible to incorporate the tooltip on mouseover into the revised code, or would you advise against it?

Many thanks again.

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3909285 posted 6:28 pm on May 8, 2009 (gmt 0)

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 background

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:
[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:

  • conditional comments
  • IE7.js


<!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.

irthom

5+ Year Member



 
Msg#: 3909285 posted 9:29 am on May 11, 2009 (gmt 0)

Firstly, thank you very much indeed for taking the time to respond to my query. My apologies for not thanking you before now, I only saw it this morning.

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved