text bubble / rollover+

willyke · 20 nov 2006, 17:25

Voor een website die ik in een knutsel met een html generator zoek ik een oplossing voor het volgende:

in de tekst komen bepaalde (juridische) termen voor die ik via een rollover zou willen koppelen aan een tekst ballon waarin ik een korte verklaring van het woord kan geven. Bedoeling is dat de tekstballon ook weer verdwijnt als je het woord verlaat.

Weet mij iemand hiervoor een simpele oplossing in de wetenschap dat ik het schrijven van html totaal niet beheers, maar dat ik de html wel kan invoeren via mijn prog als dat bvb een javascript zou zijn.

Als U niet begrijpt wat ik bedoel: het is zoals wanneer je over een icoontje in je taakbalk verschijnt dan verschijnt er een kleine tekst voor wat het icoontje dient. Zo iets dus maar met grotere tekstmogelijkheid....

Gast · 20 nov 2006, 18:44

willyke · 20 nov 2006, 18:53

Bedankt Kobbe,

Maar vermits ik html niet beheers

heb ik volgende vraag:

1. ik moet dus op elke pagina waarin ik dat wil bezigen in de head en in de body Uw tekst invoegen.

2. reageert daarmee dan het woord op de cursor ?

3. als ik op een pagina meerdere woorden heb die ik wil verklaren dan moet ik zeker in de body die html passage telkens inlassen. Is dat onverschillig waar ik dat plaats ?

coderunner · 20 nov 2006, 19:00

Hoi willyke,

Dat doe je inderdaad met een javascript.
Ik heb hier een voorbeeldje gezet.

1- Download hier het javascript en plaats het in dezelfde map waar je pagina staat.
2. Plaats onderstaande code juist boven de </body> tag

Code: Selecteer alles

<script language="JavaScript" type="text/javascript" src="textonmouseover.js"></script>

3. Gebruik onderstaande code rond het woord dat je wil verklaren

Code: Selecteer alles

<a href="#" onmouseover="return escape('schrijf hier de verklaring van het woord')">woord</a>

mvg,
Coderunner

willyke · 20 nov 2006, 19:05

Joei

Bedankt Coderunner.

Ik denk dat dat eenvoudiger is want het prog laat toe javascripts rechtstreeks te importeren.

't Zal wel niet meer voor vandaag zijn maar je hoort zeker nog van me.

Gast · 20 nov 2006, 19:07

willyke · 20 nov 2006, 19:11

Bedankt Kobbe,

't zal wel zweten zijn denk ik, maar al doende leer je.

coderunner · 20 nov 2006, 20:04

Hallo willyke,

Ik heb het voorbeeld van Kobbe ook even online gezet, zo zie ze beiden in actie.
Voorbeelden

mvg,
Coderunner

coderunner · 20 nov 2006, 21:17

Kobbe schreef:En: "Css" werkt altijd. Javascript staat bij redelijk wat mensen uit (conclusie na bestudering van mijn bezoekersstatistieken).

Nadeel van het CSS voorbeeld:
Het werkt niet in FF als je lange teksten gebruikt, deze worden afgebroken en ik veronderstel dat verklaringen van juridische termen niet uit een paar woorden zullen bestaan.

Voordeel van het javascript:
Je kan eenvoudige tags gebruiken zoals <u> , <i>, <b>, <br>, enz ...

mvg,
Coderunner

coderunner · 21 nov 2006, 13:34

Hallo willyke,

Nog vlug even hetzelfde in CSS style gemaakt, maar deze werkt wel in FF. Is wel veel uitgebreider dan wat Kobbe heeft voorgesteld maar deze breekt lange zinnen in FF niet af.
Plaats de style sheet tussen <head> en </head>

Code: Selecteer alles

 <head>

<style type="text/css">

.info{
position: relative;
z-index: 0;
text-decoration: none;
}

.info:hover{
background-color: transparent;
z-index: 50;
cursor: help;
text-decoration: none;
}

.info span{ 
position: absolute;
background-color: #e6ecff;
padding: 5px;
left: -1000px;
border: 1px solid gray;
width: 100;
visibility: hidden;
color: black;
text-decoration: none;
}

.info span info{ 
border-width: 5;
padding: 2px;
text-decoration: none;
}

.info:hover span{
visibility: visible;
font-size:10;
text-decoration: none;
top: 20;
left: 0px; /*position where text should offset horizontally */

}

</style>


</head>

Vervolgens gebruik je onderstaande code tussen de body tags.

Code: Selecteer alles

<a class="info" href="#">hier staat het te verklaren woord<span>hier staat de verklaring</span></a>

Hier is een uitgewerkte zin met twee verklaringen in (zie 3de voorbeeld op de voorbeelden site)

Code: Selecteer alles

<a class="info" href="#">Slachtoffer<span><u><b>Slachtoffer</b></u>:<br>iemand die, ook wel iets wat door de gevolgen van bepaalde handelingen of gebeurtenissen zwaar wordt getroffen</span></a> van ongevallen hebben veel vragen over hoe hun <a class="info" href="#">schadevergoeding<span>het vergoeden van door iemand geleden nadeel of schade</span></a> bepaald wordt.

Ik moet wel eerlijk toegeven, niet zo eenvoud voor een beginner.

Toch veel succes,

mvg,
Coderunner

Gast · 21 nov 2006, 15:12

coderunner · 21 nov 2006, 15:23

Kobbe schreef:Coderunner,

Dank.

De bijkomende voordelen van die nieuwe css-variant zijn:
1/ je kunt de kleuren van het verklarend venstertje bepalen;
2/ dat venstertje blijft langer in beeld dan dat van mij.

Juist Kobbe MAAR is wel één nadeel aan mijn CSS

Als het te verklaren woord uitsterst rechts in de tekst staat dus tegen de rechterrand van het scherm, valt het popup venstertje gedeeltelijk buiten het scherm, wat in het javascript wordt opgevangen door het naar links op te schuiven.

mvg,
Coderunner

Jobe · 04 dec 2006, 20:31

Kobbe, Coderunner

Dit is praten tegen een dove.

Behoorlijk complexe code afschieten op iemand die geen HTML of CSS kent.

Het lijkt alsof we praten over afgeleides en integralen, tegen iemand die niet kan tellen.

Willyke,

Met alle oprechte respect....maar leer ALSTUBLIEFT HTML EN CSS!!

Zie cursus bij Sticky bovenaan.

PS: Coderunner je CSS code werkt alleen in FF. Waarschijnlijk een open deur:)
Kijk even op www.web-garden.be en zoek naar de post 'pop up met CSS'
Me dunkt iets die werkt in IE en FF:)

Javascript: beperk zoveel mogelijk. Ook mijn browser staat standaard op:af

willyke · 05 dec 2006, 01:10

'k zou wel willen maar daar ben ik jammer genoeg te oud voor.
'k ben 72 en ik kan ondanks dat ik fit ben die nieuwe ontwikkelingen niet meer bijhouden.
'k Zou willen dat het andrs was

coderunner · 05 dec 2006, 19:25

Jobe schreef:Kobbe, Coderunner
Dit is praten tegen een dove.
Behoorlijk complexe code afschieten op iemand die geen HTML of CSS kent.

Het lijkt alsof we praten over afgeleides en integralen, tegen iemand die niet kan tellen.

Sorry Jobe maar dit is redelijk grof!
Het is NIET praten tegen een dove, we hebben in het verleden willyke al veel geholpen en hij doet heel goed zijn best en lukt er 9/10 keer in het te verwezenlijken. Mijn petje af willyke. Geef opbouwende kritiek a.u.b. en breek niemand af die het wil proberen.

Jobe schreef:Willyke,
Met alle oprechte respect....maar leer ALSTUBLIEFT HTML EN CSS!!
Zie cursus bij Sticky bovenaan.

Sommige personen hebben al genoeg met een programma. Waarom worden er anders programma's geschreven die het mensen makkelijker maakt om websites te maken?
Denk hier aan: Dit is een seniorennet forum dus de meesten beginnen pas!

Jobe schreef:PS: Coderunner je CSS code werkt alleen in FF. Waarschijnlijk een open deur:)
Kijk even op www.web-garden.be en zoek naar de post 'pop up met CSS'
Me dunkt iets die werkt in IE en FF:)
Javascript: beperk zoveel mogelijk. Ook mijn browser staat standaard op:af

Met alle respect Jobe MAAR de CSS code die ik heb gepost werkt zowel in IE als FF !!! en is getest op beide browsers.

Je geeft een link door van een site in het engels, sommige mensen hier verstaan geen engels dus onbruikbaar voor de meesten hier. Sorry voor degenen die wel engels verstaan.
Voor mij is dit geen probleem maar op het seniorennet forum ziet men liever nederlandstalige sites zodat iedereen er iets aan heeft.

mvg,
Coderunner