Disjointed rollovers
So I’m back from my little hiatus (I’m sure you missed me! hahaha), and had a new challenge posed to me.
Image swaps are cool for rollover effects, but what about disjointed rollovers? Can they be accomplished with no javascript?
I’m here to tell you “hell, yeah!”
And I will also show you 
So, here’s the way it works. Now, mind you - they’re a little touchy, at least in the beginning. I found if I had my a links defined (like a, a:link, a:visited, a:hover) I found it didn’t work in IE - but when I whittled it down to “a:hover” only, it worked fine. Since these are image based rollovers - think “picture gallery” - I didn’t think it would matter. but I have yet to try it with text links. I would imagine that, as long as you keep it separate, it would work fine.
Anyway, enough with the chit-chat - on to the code!
<!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></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="copyright" content="Copyright 2005" />
<meta name="author" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<style type="text/css" media="screen">
/*\*//*/
@import "ie5mac.css";
/**/
* {
border:0;
margin:0;
padding:0;
z-index:0;
}
#nav {
position:relative;
}
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:100px;
top:100px;
width:130px;
height:122px;
display:block;
}
</style>
</head>
<div id="nav">
<a href="#"><img src="link1a.jpg" width="52" height="49" alt="" />
<span><img src="link1.jpg" width="130" height="122" alt="" /></span></a><br />
<a href="#"><img src="link2a.jpg" width="52" height="49" alt="" />
<span><img src="link2.jpg" width="130" height="122" alt="" /></span></a><br />
<a href="#"><img src="link3a.jpg" width="52" height="49" alt="" />
<span><img src="link3.jpg" width="130" height="122" alt="" /></span></a><br />
<a href="#"><img src="link4a.jpg" width="52" height="49" alt="" />
<span><img src="link4.jpg" width="130" height="122" alt="" /></span></a>
</div>
</body>
</html>
And there it is. Yes, I did the stylesheet inline this time. You can easily take it out and do it externally, but I thought it might be easier to see what was up. So let’s break it apart.
We’ll start with this:
/*\*//*/
@import "ie5mac.css";
/**/
This is the hack that needs to be used so it functions in IE5 for Mac. Now, what’s in that stylesheet? Well, I’ll tell you! it’s this:
#nav a span, #nav a:link span {
display:block;
visibility:hidden;
width:auto;
position:absolute !important;
top:100px;
left:100px;
}
#nav a:hover span {
visibility:visible !important;
}
If you notice, in the normal stylesheet, I use stuff like “display:none” and “display:block” - and in the IE Mac stylesheet, it’s replaced with “visibility” attributes. This is what makes it function in IE. Why? Hell if I know. It works, though. (and many thanks to Theirry for this tip!)
span {
display:none;
}
What this does is tell the browser that all span elements should not be displayed, by default.
a:hover {
border:none;
text-decoration:none;
}
This says that “all hovered elements should have no border, and no text decoration”. I put that there because if I didn’t, you’d have tiny little lines showing up next to your thumbnail images on hover. Ick.
a:hover span {
position:absolute;
left:100px;
top:100px;
width:130px;
height:122px;
display:block;
}
…and this? It simply says “if there’s a span attributed to a hover element, then SHOW IT!”
Here is what the end result looks like:
Trackback
