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;'.

Here's another.

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
2006-08-21 Jan says :

If this works, I will buy you a beer!

#2
2006-08-22 BonRouge says :

Jan,
It does work.
I'll have a Kirin Ichiban Shibori, if that's OK with you. beer

#3
2006-12-08 Tim says :

Can I make an image popup instead of text?

#4
2006-12-15 BonRouge says :

Tim,
Yes, you can.

#5
2007-07-23 alexa says :

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.

#6
2007-07-23 alexa says :

[Edit:] What I mean is not like example #1:
Every image at it's own (unique) position. Hopefully I explained it intelligibly.

#7
2007-07-23 BonRouge says :

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.

#8
2007-07-23 alexa says :

hi, thanx for your quick reply.
i've tried your suggestion - and it works!! smile

but now that brings new unwanted effects frown
- 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!

#9
2007-09-27 lokimikoj says :

Hi all!

keep up the good work

#10
2008-01-31 Andi says :

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

#11
2010-02-20 njdod says :

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. smile

Comment form

Please type the word 'wife' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url