Disjointed rollovers
A popular item to createusually with JavaScript. But with CSS, that's no longer necessary.
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!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136
<!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:
1 2 3 4 5
/*\*//*/ @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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
#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!)
1 2 3 4 5
span {
display:none;
}
What this does is tell the browser that all span elements should not be displayed, by default.
1 2 3 4 5 6 7
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
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:
