Saven.nl > stuk tekst bij muis met mouseover

Pagina:

Gepost op vrijdag 13 juni 2008, om 14:31

	sandr aka Chuck Norris Ultimate 5312 posts		http://spele.eu/index.html als je daar me je muis over een link gaat komt er zo'n plaatje te staan. Ik wil ook zoiets alleen moet het dan een divje zijn met daarin wat tekst ipv een plaatje. Volgens mij stond ooit op www.csslabs.be hoe je zoiets moet doen, alleen zijn ze nu de site aan het vernieuwen en kan ik het dus niet opzoeken .
			al die moeilijke keuzes in het leven

Advertentie

	Botje Adverteerder

Re: stuk tekst bij muis met mouseover

Gepost op vrijdag 13 juni 2008, om 15:07

	Headshot Minispammer 943 posts		onMouseOver, en dan divje laten zien?.
			Bomplayer.nl

Re: stuk tekst bij muis met mouseover

Gepost op vrijdag 13 juni 2008, om 15:37

Jesse
House<3
Spammer
1318 posts

Quote: sandr

http://spele.eu/index.html
als je daar me je muis over een link gaat komt er zo'n plaatje te staan. Ik wil ook zoiets alleen moet het dan een divje zijn met daarin wat tekst ipv een plaatje. Volgens mij stond ooit op www.csslabs.be hoe je zoiets moet doen, alleen zijn ze nu de site aan het vernieuwen en kan ik het dus niet opzoeken .

Ahja, Ik wou eerst de nieuwe layout van csslabs tonen, maar mag niet van Joren, sorry.

Ik haal het er wel even af.

1. De html

C o d e


<a href="#" class="tooltip">csslabs<span>blog voor en door webmasters</span></a>

2. De css

C o d e


a.tooltip {

position:relative;

}

Dit stukje code is heel belangrijk. Het zorgt ervoor dat de tooltip op de juiste plaats komt, bij de link dus.

C o d e


a:hover.tooltip {

padding:0;

z-index:10;

}

Als je wil dat het werkt in IE6, moet padding dit er staan. Padding mag ook een andere waarde hebben in plaats van 0. Z-index zorgt ervoor dat de tooltip boven alles komt te staan.

C o d e

1 
2 
3


a span{

display:none;

}

Hiermee wordt tooltip verborgen wanneer het nodig is.

C o d e


a:hover span {

position:absolute;

display:block;

top:15px;

left:30px;

width:110px;

z-index:10;

/* opmaak */

background:#FFFFDF;

border:1px solid #FCF05C;

color:#333333;

padding:2px 3px;

font:11px tahoma, Verdana, Arial, Helvetica, sans-serif;

text-decoration:none;

}

Eerst wordt de tooltip (span) absoluut gepositioneerd. Zo kunnen we hem goed plaatsen met top en left. Display block zorgt er voor dat de tooltip weer zichtbaar wordt en z-index zorgt er opnieuw voor dat de tooltip boven alles komt te staan. De opmaak is belangrijk om je tooltip duidelijk leesbaar te maken.

In ‘opera’ kan er nog een probleem optreden met de scrollbars. Als je bijvoorbeeld over een link gaat met een tooltip, zouden de scrollbars even kunnen verschijnen. Om dit te voorkomen kan je aan je div waar alles in staat het volgende toevoegen.

C o d e

1 
2 
3


.container {

overflow: hidden;

}

Klaar, en dit allemaal zonder javascript!

ik hou van kleine jongetjes met vieze billetjes

Re: stuk tekst bij muis met mouseover

Gepost op vrijdag 13 juni 2008, om 16:07

	sandr aka Chuck Norris Ultimate 5312 posts		Quote: Jesse blaat ja dat wassie dankjewel. Offtopic: foute catagorie [Laatst bewerkt door sandr* op vrijdag 13 juni 2008, om 16:20*]
			al die moeilijke keuzes in het leven

Re: stuk tekst bij muis met mouseover

Gepost op vrijdag 13 juni 2008, om 16:30

	Jesse House<3 Spammer 1318 posts		Quote: sandr [...] ja dat wassie dankjewel. Offtopic: foute catagorie No problemo [Laatst bewerkt door Jesse* op vrijdag 13 juni 2008, om 16:30*]
			ik hou van kleine jongetjes met vieze billetjes

Pagina: