Tooltip per reinem CSS ...

[snooze7]

Hallo zusammen,

ich würde gerne ein kleines Menü machen, ähnlich der Zahlentasten eines Handys. Wenn ich jetzt beispiel über die "8" drüberfahre, erscheint unter diesem Button (also unter dem Zahlen-Neuner-Block) ein Bild. Die Bilder sollen jeweils verschieden sein aber immer direkt bzw. um 20px unter dem Zahlenblock.

Im Internet bin ich auf das Thema Tooltip gestoßen, jedoch bekomme ich das einfach mit reinem css nicht hin und schon gar nicht mit einem Bild. Flash wäre zwar eine alternative, jedoch wäre mir eine reine css Lösung lieber. Hat jemand dazu einen Vorschlag oder vielleicht sogar einen ganz anderen Ansatzpunkt?! Mein "Zahlenblock" sieht so aus bisher:

<div id="pagePartner">
<ul>
<li id="partner1"><a href="#"></a></li>
<li id="partner2-on"><a href="#"></a></li>
<li id="partner3"><a href="#"></a></li>
<li id="partner4"><a href="#"></a></li>
<li id="partner5"><a href="#"></a></li>
<li id="partner6"><a href="#"></a></li>
</ul>
</div>

Vielen Dank im Voraus.

Viele Grüße
Björn

 

[prm]

Da sehe ich folgende Lösungsansätze:

Du könntest das per Hover lösen, indem du unterschiedliche Hintergrundgrafiken definierst:
Für den normalen Linkszustand hinterlegst du eine "8" in Form einer Grafik und für den Hover-Zustand das gewünschte bild

a {display: block; width: 20px; height: 20px;}
a:link {backgrund-image: url(8.gif);}
a:hover {background-image: url(bild.gif);}

Den sogen. "CSS-Tool-Tipp" findest du hier erklärt: CSS Popup, CSS Infofenster