Disjointed rollover 2
Here's one:
The ul is '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
#disjointed2 {
position:relative;
width: 150px;
margin:20px auto 100px;
}
#disjointed2 li {
width:50px;
height:50px;
float:left;
position:static;
}
#disjointed2 a {
display: block;
height:50px;
width:50px;
color: #FFC;
text-decoration:none;
float:left;
text-align:center;
position:static;
}
#disjointed2 a img {
border:0;
}
#disjointed2 a:hover {
color: #cff;
background:black;
}
#disjointed2 a span {display: none;}
#disjointed2 a:hover span {
display: block;
position: absolute;
top: 20px;
left: 170px;
width: 50px;
color:red;
background:#fff;
}
HTML
<div class="cfix">
<h1>Disjointed rollover 2</h1>
<p>Here's one:</p>
<ul id="disjointed2">
<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 ul is '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=disjointed1">Here's another</a>.</p>
</div>
Comments
#1 #2Jan,
It does work.
I'll have a Kirin Ichiban Shibori, if that's OK with you. 
Can I make an image popup instead of text?
Tim,
Yes, you can.
Hi! I did the same (with image popups) for a website. But I can't solve the last request: is it also possible to make image popups at different positions?
Thanx for your help.
[Edit:] What I mean is not like example #1:
Every image at it's own (unique) position. Hopefully I explained it intelligibly.
alexa,
Just give each of the images that you're 'popping up' an id and position each one with CSS.
Let me know if that's not clear enough.
hi, thanx for your quick reply.
i've tried your suggestion - and it works!! 
but now that brings new unwanted effects 
- the linkbuttons (plain text) "jump" while mouseover. (PC: FF and IE)
- by changing the font size directly in the browser, the popup image moves from it's original position. (FF and IE)
- the popup image displaces the image that owns the same position while mouseout (only IE).
Do you have a workaround for that?
Thanx a lot!
Hi all!
keep up the good work
Can you post (or email) a css markup showing, ul's position in a 2 col and 4 row (total of 8) type display and when hovering, over ul an img shows up where your text is showing - can't seem to make it work on my own...
andi (at) ajsdesigns (dot) com
In example 2 ... why the 'position:static' since just above it is 'float:left' which removes the object from the normal flow ???
It does work without it ... even in IE6.
If this works, I will buy you a beer!