Javascript is inderdaad een mogelijkheid, maar het kan ook met alleen CSS en HTML.
Hier is de HTML
HTML:
<div class="afbeelding">
<img src="link naar de abfbeelding" alt="informatie voor blinden en slechtzienden">
<span class="hulptekst">Informatie over de afbeelding.</span>
</div>
Dat is dus een div met class "afbeelding" (je kunt er natuurlijk ook iets anders van maken. Binnen die div staat het plaatje en een <span> met daarin de tekst die te voorschijn moet komen. Zo, zonder CSS, zo de tekst gewoon naast de afbeelding komen te staan, nu dus de bijbehorende CSS
HTML:
.afbeelding{
position:relative;
}
.hulptekst{
position:absolute;
left:10000px;
}
.afbeelding:focus .hulptekst,
.afbeelding:hover .hulptekst{
left:0px;
background-color:#f6ab34;
box-shadow:0 0 3px black;
border-radius:4px;
padding:2px;
}
Allereerst wordt de div die om afbeelding en tekst zit op position:relative; gezet, dit zorgt er voor dat de tekst zo goed terecht komt. Vervolgens wordt de tekst op position:absolute; gezet (waardoor het vrij gepositioneerd kan worden zonder andere onderdelen in de weg te zitten) en 10000 pixels naar links gezet, buiten zelfs de breedste monitor.
Het laatste blok brengt de tekst terug naar de linkerrand van de afbeelding, left:0px; (je kunt hem natuurlijk ook op een afstandje zetten), wanneer een bezoeker met muis of toetsenbord over de afbeelding heen gaat. De rest van css zorgt voor een achtergrondkleur, een schaduw en ronde hoekjes (in browsers die dat ondersteunen.)
Tot slot, als het je niet uitmaakt hoe de tekst gepresenteerd wordt kan het ook simpeler door title="Informatie over de afbeelding" in de img tag te zetten. Nadeel is wel dat bezoekers die hun tooltips hebben uitgeschakeld dat niet zullen zien.
:d ALS maar voor eigen site is dan kan je inderdaad via java zoals die Woutertjuh88 zei dat, maar als je zelf als een plaatje die hebben wil, ... dan die PNG bestand moet je als een JPG bestand opslaan en verder ...zie gif onder ...:thumb:
Ik begrijp niet helemaal wat je daar nou me bedoelt, wat voor effect heeft iets wat je in windows doet op een website?
Wil je die misschien voor, ... op je eigen site ? of je bedoel zomaar dat je die plaatje hebben wil, ... met omgeschreven eigenschappen ? ...
...:thumb:
