PDA

Click to See Complete Forum and Search --> : Positioning of dynamic images

quamper
11-04-2007, 08:12 AM
In my sample...
http://quamper.com/sample/sample.htm

my goal is to keep the red/blue/yellow images in the same place positionally when they images get swapped out.

I've played around with various css positioning and I don't seem to be having much luck. But I may have missed something obvious.

Is there someway to achieve what I want with just css, rather than making the graphics larger/additional graphics?
Centauri
11-04-2007, 09:48 AM
How about a pure css version (would require a sfhover javascript to work in IE6 though) :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sample</title>
<style type="text/css">
<!--
#container {
width: 750px;
height: 120px;
margin: 0 auto;
background-image: url(image2.jpg);
background-repeat: no-repeat;
background-position: center top;
background-color: #ADADAD;
}
#container .leftside {
width: 315px;
height: 120px;
float: left;
background-image: url(image1.jpg);
background-repeat: no-repeat;
background-position: right top;
}
#container .leftside:hover {
background-image: url(biggerimage1.jpg);
}
#container .rightside {
width: 315px;
height: 120px;
float: right;
background-image: url(image3.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#container .rightside:hover {
background-image: url(biggerimage3.jpg);
}
-->
</style>
</head>

<body>
<div id="container">
<div class="leftside"></div>
<div class="rightside"></div>
</div>
</body>
</html>
quamper
11-04-2007, 10:07 AM
Oh yeah thats great!!

By sfhover for IE are you talking about what they are doing
http://www.alistapart.com/articles/dropdowns/
to make hover work for IE as well?

Thanks a ton!
Centauri
11-04-2007, 04:09 PM
Yes, the suckerfish script. An article expanding on its use from dropdown menus is here (http://www.htmldog.com/articles/suckerfish/).