Disjointed Rollover image to image using CSS - how?

nerbonne · Jan 13, 2007

Hi, I would like to create a Disjointed Rollover that uses images and changes a disjointed image somewhere else in the page. If possible, I would like to use CSS to do it. I know it can be done with javascript, but I would like to use CSS.

Does anyone know how to do this?

Thanks.

johnwm · Jan 14, 2007

Google gives 1340 hits for '"disjointed rollover" css'. If you need a further example have a look at the menu on the website linked in my sig

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

nerbonne · Jan 14, 2007

Wow, I never thought of checking google. And the website in your sig does not use image to image disjointed rollovers, it uses text to text.

johnwm · Jan 14, 2007

To save you the effort, I've knocked up a simple example, which is a straightforward modification to the stuff I pointed you to

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css" media="screen">

img {
border:solid 2px #CCC;
}

span {
display:none;
}

span img {
border:none;
}

a:hover {
border:none;
text-decoration:none;
}

a:hover span {
position:absolute;
left:150px;
top:100px;
width:130px;
height:122px;
display:block;
}

</style>

</head>

<body>

<div id="nav">
<a href="#"><img src="file://F:/pics/t/000001.jpg"  alt="" />
<span><img src="file://F:/pics/p/000001.jpg" alt="" /></span></a><br />

<a href="#"><img src="file://F:/pics/t/000002.jpg"  alt="" />
<span><img src="file://F:/pics/p/000002.jpg"  /></span></a><br />

<a href="#"><img src="file://F:/pics/t/000003.jpg" alt="" />
<span><img src="file://F:/pics/p/000003.jpg" alt="" /></span></a><br />

<a href="#"><img src="file://F:/pics/t/000004.jpg" alt="" />
<span><img src="file://F:/pics/p/000004.jpg"  alt="" /></span></a>
</div>

</body>
</html>

You will need to change the paths to the images. Mine point to 2 directories (pics/t for thumbnails and pics/p for the full size picture)

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Disjointed Rollover image to image using CSS - how?

nerbonne

Technical User

johnwm

Programmer

nerbonne

Technical User

johnwm

Programmer

Similar threads

Part and Inventory Search

Sponsor