Tips&Tricks

til hjemmesiden, computeren og internettet

Tips & Tricks



Mouse-over popups med Stylesheets

Sat på siden 13-02-2004

Villy D skrev til mig: "Jeg har et ønske, kan man lave en slægttavle til en hjemmeside der kan følgende:

I venstre side skal der stå et navn og når man sætter musen over kommer vedkommenes famillie frem og på næste linie et navn et andet navn med dens familie?"

Det kan sagtens lade sig gøre, ja. Hvis du går på http://www.tips-og-tricks.com og fører musen hen over menuen i venstre side, så vil du se en boks dukke op med forklarende tekster til menuen. En sådan boks er meget let at lave med StyleSheets, og så kan de fleste browsere fortolke det korrekt.

Nu kender jeg ikke så meget til slægtsforskning - endnu (der er et Libris hæfte på vej med emnet "Slægtsforskning på internettet" - ssssyyyhhh - insiderviden...), men jeg kunne forestille mig, at hvert navn faktisk svarer til et menupunkt.

Lad os for eksemplets skyld antage, at vi har to navne: Kain og Abel. Hvis tekstboksene for hver af disse to navne skal vises på forskellige steder, skal vi oprette to ID-selektorer, nemlig én for Kain og én for Abel.

Disse skal se fx sådan ud:

#kain a span {
  display: none;
}
#kain a:hover span {
  display: block;
  position: absolute;
  top: 37px;
  left: 171px;
  width: 150px;
  height: 150px;
  border:1px solid black;
  padding: 5px;
  margin: 0;
  z-index: 100;
  color: #000;
  background: #ffe;
  font-weight:normal;
  font-size: 14px;
  font-family: arial, sans-serif;
  text-align: left;
}

#abel a span {
  display: none;
}
#abel a:hover span {
  display: block;
  position: absolute;
  top: 87px;
  left: 311px;
  width: 150px;
  height: 150px;
  border:1px solid black;
  padding: 5px;
  margin: 0;
  z-index: 100;
  color: #000;
  background: #ffe;
  font-weight:normal;
  font-size: 14px;
  font-family: arial, sans-serif;
  text-align: left;
}

Top og Left bestemmer, hvor på siden firkanten med teksten dukker op. Width og Height bestemmer størrelsen på firkanten.

På hjemmesiden skal du så bare skrive fx:

<div id="kain"><a href="kain.html">Kain<span>Navnene på Kains børn</span></a></div>
<div id="abel"><a id="abel" href="abel.html">Abel<span>Navnene på Abels børn</span></a></div>

Fidusen er, at alt det, der står imellem <span> og </span> ikke vises (display: none), medmindre man holder musen over linket (hover), og så vises det på en speciel plads.

Hvem er så det geniale væsen, der har fundet ud af det? Selvfølgelig Eric Meyer, der er guruEN inden for StyleSheets. Den mand forstår virkelig at tænke abstrakt. Han har skrevet flere bøger, men de er vist ikke oversat til dansk. Hvis du er interesseret, kan du finde hans bøger på engelsk.
Se her: http://www.kortlink.com/ericmeyer1 og her: http://www.kortlink.com/ericmeyer2

Kunne du lide tippet? Abonner gratis på mine nyhedsmails og få friske tips hver uge: Tilmelding til Tips og tricks
Lige nu: Få e-bogen "701 Tips og Tricks" gratis (normalpris $11,83) ved tilmelding.


|