PDA

Bekijk Volledige Versie : Javascript / Help vakje



ErikKosters
16/02/07, 09:15
Beste,

Ben bezig met een website voor één klant en ben opzoek naar een soort script via de functie 'onmouseover' dat; als men over een plaatje dus gaat een tekst ziet met uitleg.

Heb dit vaker gezien maar nu ik het nodig ben vindt ik het niet meer. Dus gewoon een (?) image bijv. met als men erover gaat de helptekst welke dan in een vakje erover float of dergelijk iets.

Jullie hebben vast zoiets liggen, alvast bedankt.

Randy
16/02/07, 09:34
Google eens op 'overlib' Erik.

Edit: http://www.bosrup.com/web/overlib/

systemdeveloper
16/02/07, 09:35
of 'tooltip' ;)
Levert je genoeg verschillende mogelijkheden op om de ochtend door te komen.

frvge
16/02/07, 10:10
Gewoon iets met alt?
Anders een dynamisch aan de muis gekoppelde div die zichtbaar wordt als je de onmouseover aanroept. Die is geavanceerder.

ErikKosters
16/02/07, 14:41
Kan dit niet met 1 simpele code zonder hoeveel pagina's scripting?

Dennie-DeTi
16/02/07, 14:48
Zoiets?



<script type="text/javascript">

function switchDiv(strID) {
if( document.getElementByID(strID).style.display == "none" )
document.getElementByID(strID).style.display = "block";
else
document.getElementByID(strID).style.display = "none;"
}
</script>


<div>
<img src="..." onmouseover="switchDiv('omschrijving1');" onmouseout="switchDiv('omschrijving1');">
<div id="omschrijving1" class="omschrijving">
omschrijving
</div>
</div>


Even simpel voorbeeldje. Uiteraard valt er een hoop extra checks te doen enzo. Het omschrijving divje absoluut positioneren binnen het divje wat eromheen staat. Volledig te stylen. Weet niet in hoeverre dit crossbrowser compatible is, maar neem aan dat je dat zelf wel kan testen ;).

- Dennie

ErikKosters
16/02/07, 14:59
Het is geen vaste div. Het is namelijk de bedoeling voor registratie pagina. En dus achter elke input iets (uiteraard sommige niet). Denk dat daarbij deze niet zo handig is.

Dennie-DeTi
16/02/07, 21:11
Als de content (help tekst) niet zoveel is, zou ik het er direct inzetten. Je kan ook met ajax de teksten ophalen enzo. Maar als je het niet in de alttekst kan/wil zetten, zal je het in een divje moeten zetten om het te kunnen weergeven/verbergen.

Dus het lijkt mij het beste om gewoon alle helptekstjes verborgen in je html te zetten, en ze met behulp van javascript (of misschien css) weer te geven.

- Dennie

Aessence
17/02/07, 17:32
Wat ik doe bij sommige teksten is dit:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Who Am I</title>
</head>
<body>
<h1>Hello World</h1>
<br/>
<img src="question.gif" title="Dit is een uitleg. Lange uitleg wordt netjes afgebroken tot een handzaam kader, voor zover ik weet tenminste. Denk dat het werkt in vrijwel alle browsers (behalve NN6), maar je kan het ook testen." />
</body>
</html>


Met het "title" atribuut kom een heel eind. Mooier is natuurlijk divs en/of ajax. Altijd leuk spieken bij b.v. Formulieren (http://fd2.formdesk.com/?action=2&nextstep=1&lang=2&id_aff=0&keyword=&ajax=true).

George/