Disjointed rollover 1
Here's one:
The 'a's are 'position:relative;' and the spans are 'position:absolute;' to make them disjointed. The spans are 'display:none;' until the 'a' is hovered over, when they become 'display:block;'.
CSS
#disjointed1 {
position:relative;
width: 150px;
margin:20px auto 100px;
}
#disjointed1 li {
width:50px;
height:50px;
float:left;
}
#disjointed1 a {
display: block;
height:50px;
width:50px;
color: #FFC;
text-decoration:none;
float:left;
position:relative;
text-align:center;
}
#disjointed1 a img {
border:0;
}
#disjointed1 a:hover {
color: #cff;
background:black;
}
#disjointed1 a span {display: none;}
#disjointed1 a:hover span {
display: block;
position: absolute;
top: 60px;
left: 0;
width: 50px;
color:red;
background:#fff;
}
HTML
<div class="cfix">
<h1>Disjointed rollover 1</h1>
<p>Here's one:</p>
<ul id="disjointed1">
<li><a href="#n"><img src="wine.jpg" height="50" width="50" alt="wine" /><span>Wine</span></a></li>
<li><a href="#n"><img src="beer3.jpg" height="50" width="50" alt="beer" /><span>Beer</span></a></li>
<li><a href="#n"><img src="whisky.jpg" height="50" width="50" alt="whisky" /><span>Whisky</span></a></li>
</ul>
<p>The 'a's are 'position:relative;' and the spans are 'position:absolute;' to make them disjointed. The spans are 'display:none;' until the 'a' is hovered over, when they become 'display:block;'.</p>
<p><a href="br.php?page=disjointed2">Here's another</a>.</p>
</div>
Comments
#1 #2I'm sorry, Jennifer. What exactly is the question here? What do you not understand about the demo?
Hey! this code is great. I'm creating my friends web page and she saw this trick and wanted it for her gallery. The problem I'm having is that I cannot figure out how to position the display image. I have it so that you rollover a list of 50px X 50px images and to the right a large image appears. I cannot figure out how to align the large image. email me if you can: namedrops (at) gmail (dot) com
Jenny,
Did you see this page? It sounds like you want something like that. Replace the contents of the span tags, i.e. the words, with images and position the span tags where you want in the CSS.
Also, did you see the 'Auto-gallery' page? That might be interesting for you (maybe).
Here's a neat little trick. I really like this one (magnified by the fact that nothing but HTML and CSS is used). I might well use this in my forthcoming redesign.
Nice work.
Nice work! I had another way of doing the same thing, but this method doesn't lock up IE6 
This probably won't work across frames will it?
I'm looking for a text word in a leftFrame that when rollover will display an image in the centerFrame and the image will disappear when you rolloff the image...but can't seem to get it to work across frames. thanks...
metformin liste <a href="https://metforminynd.com/ ">what is glucophage used to treat</a> metformin glucophage wiki
lasix buy <a href="https://lasixona.com/ ">furosemide labs</a> what is furosemide 40 mg tablet
hi umm i wanted to know if you can help me out.. cause I seen someone have something like that for his myspace. He had buttons like about me, music, movies, etc and when u roll the mouse over them text appeared.