Bruk av :hover layers

[JohnRichard]

Beklager dårlig emne, men beste jeg kom på i farten.

 

Har en tabell hvor jeg ønsker at ett bilde skal vises når man har pekeren over navnet. Har fått det til sånn ca ved hjelp av denne metoden, men vil helst at den bare skal legge seg over radene under, og ikke utvide tabellcellen og dytte innholdet nedover.

 

Noen som kan hjelpe? Jeg eksperimenterte litt med z-index men ble ikke klok (les: fikk ikke til noen forskjell) på det.

 

 

DEMO

[Nano-]

Jeg har laget noe lignende med css og div-er med position:relative i forhold til containeren alle tinga er listet opp i. Vanskelig å forklare, men hvis du vil bruke den tabellen du allerede har, kan du la den være i en container (div) og lage flere div-er under, en for hvert bilde. Deretter justere bildenes posisjon så de kommer oppå tabellen, og gjøre dem usynlige.

 

html:

<div id="container">
(tabell)
<div id="bilde1">(bilde1)</div>
<div id="bilde2">(bilde2)</div>

... osv
</div>

 

css:

bilde1 {
position: relative/absolute; (kommer litt ann på hvem som er lurt å bruke)
top: -ettellerannet (posisjon på finjusteres)
left ettellerannet 
visibility: hidden;}

 

*Bare kode jeg kom på i hode, overhodet ikke riktig, men ideen er der

 

Jeg har brukt javascript trigget av mouseOver for å endre visibility til "visible" og tilbage når musa går ut.

 

Her er linken til sia jeg har brukt det på: http://www.mapmaniacs.com/lantw_elf.php (hold musa over bildene på "treet")

Resten av sida er IKKE representabel, jeg vil IKKE ha kritikk på den som den er nå, jeg holder på å lage en ny versjon

 

Dette er en måte å gjøre det på, jeg er absollutt ingen ekspert så det kommer sikkert andre alternativer opp som kanskje er enklere eller bedre.

[JohnRichard]

Jeg trenger det mer dynamisk enn hardkodet pr «link», da det blir lagt til ting fortløpende. Ingen som har noen mer smooth tips og få den <span>'en til å ligge oppå tabellen, og ikke utvider den ?

 

Edit: jeg satt position: absolute; uten left/top og nå fungerte det som ønsket

 

 

(Funker ikke i IE, men det gir jeg en lang F... i, da dette bare skal brukes internt

Endret 5. mai 2006 av JohnRichard