Show/hide in een tabel

[nicoboots]

M.b.v. de layer functie in Dreamweaver kun je verschillende plaatjes bovenop elkaar stapelen en ze d.m.v. een 'behavior' verbonden aan een ander element (b.v. een stukje tekst) in je pagina zichtbaar maken of juist verbergen. Dat is wat ik ook wil in mijn website. Het format daarvan is gemaakt in Fireworks, en de resultaerende tabel is in Dreamweaver geïmporteerd. De tabel heb ik gecentreerd, zodat in elke browser of beeldscherm de site gecentreerd te zien is.
Als ik echter de layerfunctie gebruik, loopt alles door elkaar heen omdat de layers een absolute positie hebben (d.w.z. uitgedrukt in het aantal pixels naar rechts en naar links gerekend vanaf de linkerbovenhoek van het scherm), en de positie van de tabel daarentegen relatief is, dwz gecentreerd, dus pixel onafhankelijk.
De combinatie formatting via een tabel èn formatting met layers is dus geen succes.
Weet iemand hoe ik hetzelfde effect kan bereiken (d.w.z. verborgen plaatjes die pas bij een mouse roll-over over een stuk text zichtbaar worden op een andere plek in de pagina, en ook weer verdwijnen?

 

[csshunter]

Hoi Nico,
Heb je hier misschien iets aan?

• showathover.htm en showathover2.htm

Met vriendelijke groet,
CSShunre

 

[nicoboots]

Hoi Nico,
Heb je hier misschien iets aan?

• showathover.htm en showathover2.htm

Met vriendelijke groet,
CSShunre

Beste CSS sunshine,

Ik heb de twee showathover links die me geeft, bezocht, maar daar wordt geen uitleg gegeven hoe je het hover/pop-up effect bereikt. Het lijkt me bovendien dat het effect m.b.v. layers is gerealiseerd want als je het browservenster verkleint, verschuift b.v. het plaatje dat rechts "op-popt" mee, m.a.w. het blijft niet op dezelfde afstand staan van de tekst links. Ik wil graag juist dat de onderlinge posities tussen tekst en plaatjes op de pagina gehandhaafd blijven, ongeacht de grootte van het browser- of beeldscherm.

 

[csshunter]

Hoi Nico,
De uitleg is als volgt:

• Op het eind van een echte of nep-link is een <span></span> opgenomen.
• In die span zit de tekst en/of de figuur die moet verschijnen als je over de link muist.
• Met css wordt de style/positie bepaald van hoe/waar de verschijnende tekst zich moet vertonen, en ook de pop-up aan- of uitgeschakeld.

D.w.z. in de uitvoering als nep-link:

<p>Gewone tekst met een <a class="pop" href="#">zie 
   toelichting<span>Toelichting:<br>deze toelichting wordt 
   getoond bij hover over de "zie toelichting" link, en staat 
   opgenomen in een span binnen die link.</span></a>.
</p>

In de css kan geregeld worden of de "vertoning" zich op een absolute positie moet afspelen (altijd op dezelfde plek op de pagina), of relatief ten opzichte van het element waar ie bij hoort.
Van het laatste zijn er al heel veel voorbeelden in omloop. Het voorbeeld in mijn link was om te laten zien dat er ook op een niet-relatieve manier css pop-ups mogelijk zijn. Maar het kan allebei!
D.w.z. voor relatieve pop-up bijvoorbeeld:

[font=courier]a:hover {
	background-position: 0 0;        /* voor IE, zie: www.satzansatz.de/cssd/pseudocss.html#hover */
	}
.pop {
	cursor: help;                    /* muisaanwijzer wordt vraagtekentje */
	text-decoration: none;           /* geen gewone link-onderstreping    */
	border-bottom: 1px dashed green; /* maar streepjes er onder voor de herkenbaarheid */
	color: green;                    /* weer anders dan gewone link-kleur */
	}
	
a.pop span { 
	position: absolute;              /* los van de "normal flow" */
	width: 160px;                    /* de hoogte regelt zichzelf */
	margin-left: -9999px;            /* normaal buiten beeld */
	padding: 10px;
	border: 4px ridge #A229FF;
	background: #FFFFC0;
	color: black;
	} 
 
a.pop:hover span { 
	margin: 1.5em 0 0 -160px;        /* bij hover op z'n plek */
	} [/font]

Hoe deze css uitwerkt, kan je hier in dit voorbeeld zien.

• Als je meer voorbeelden wilt, Google dan op "CSS pop-up" of op "CSS tooltip": dan krijg je talloze varianten.

Met vriendelijke groet,
CSShunter