mouseover plaatje tekst

Status
Niet open voor verdere reacties.
V

van.beurten

Gebruiker
Lid geworden
8 sep 2000
Berichten
530
Ik ben op zoek naar een script die een tekst in beeld brengt als ik met mijn muis over een plaatje ga.
Vast dank voor de reaktie.
 
PHP: 
<img src="{link_naar_plaatje}" alt="{text_bij_mouseover}" />
Dat is de standaardmanier, mijn ervaring is dat hij niet altijd verschijnt. In iedergeval niet meteen wanneer je eroverheen gaat.

Daarom gaat mijn voorkeur uit naar zoiets. Toch raad ik aan om in ieder geval de alt bij een afbeelding in te vullen. Het schijnt verplicht te zijn conform de W3C-regels.
 
Of deze: http://www.helpmij.nl/forum/showpost.php?p=1879551&postcount=4

Dat ziet er zo uit:
text_popup.jpg
:)

De tekst blijft de aanwijzer volgen zolang je boven het plaatje staat.


Vr.Gr. Egel.
 
Laatst bewerkt:
plaatjes invoegen

Beste Egel,
Dankjewel, dit blijkt goed te werken. Ik weet alleen niet hoe ik de plaatjes hier invoeg....
Graag hulp.
Dank voor re.
Groet! Bernadette
 
Welke plaatjes zou je hier (waar hier? Hier, forum?) willen invoegen dan?
 
Heb gereageerd op het voorbeeld van 'egel'.
Ik heb het voorbeeld van "egel" gekopieërd.
In dit script zou ik plaatjes willen invoegen. Hoe doe ik dit?
 
Ik neem aan dat je het script gedeelte en de stylesheet helemaal hebt overgenomen.

Egel heeft precies er onder gezet hoe je het moet toepassen:
Egel zei:

Het stylesheet zet je in de head van het document, dat geeft het tekstvakje z'n vorm. Het meeste spreekt voor zich, filter: alpha(opacity=80); zorgt ervoor dat het iets doorzichtig wordt in Ie.

Het javascript zet je direct achter de body-tag.

Aan een img-tag voeg je dan onmouseover="showText('hier de titel','hier de tekst')" en onmouseout="hideText()" toe. :)

onmouseover="showText('hier de tekst')" kan ook, toevoegen aan een link, div, span, etc. ook. :cool: ;)


Vr.Gr. Egel.
Klik om te vergroten...
 
Het plaatje vul je in ipv het # bij src="#" :)

Als het plaatje bv foto.jpg heet dan wordt het: src="foto.jpg"

Dit is hetzelfde script met een kleine verbetering:
PHP: 
<html>
 <head>
 <title>text-popup</title>
  <style type="text/css">
   body { overflow: scroll; overflow-x: hidden;}
   #popup {
    position: absolute;
    visibility: hidden;
    border: 1px solid #000;
    width: 160px;
    filter: alpha(opacity=80); -moz-opacity: 0.80; opacity: 0.80;
    background-color: #eee;
    padding: 2px;
    color: #000;
    font-size: 11px;
    font-family: verdana;
    }
  </style>
 </head>
 <body>
  <script type="text/javascript">
   //  Egel 070823 ;)
   document.write('<div id="popup"></div>');
   var popup = document.getElementById('popup');
   function followMouse(e) {
    popup.style.left = (e ? e.pageX : event.clientX + document.body.scrollLeft - 2) +  7;
    popup.style.top  = (e ? e.pageY : event.clientY + document.body.scrollTop  - 2) + 16;
    };
   document.onmousemove = followMouse;
   function showText(title,text) {
    popup.innerHTML = (text ? '<b>' + title + '</b><br>' + text : title);
    popup.style.visibility = 'visible';
    };
   function hideText() {
    popup.style.visibility = 'hidden';
    };
  </script>
  <img src="#" onmouseover="showText('Linksboven','Deze foto is linksboven afgebeeld.')" onmouseout="hideText()" width="320" height="240">
  <img src="#" onmouseover="showText('Op dit moment zit je achter een computer.<br><br>Of je staat ...')" onmouseout="hideText()" width="120" height="240">
  <br>
  <img src="#" onmouseover="showText('Portret','Ook wel staand formaat genoemd.')" onmouseout="hideText()" width="120" height="240">
  <img src="#" onmouseover="showText('Panorama','Ook wel liggend formaat genoemd.')" onmouseout="hideText()" width="320" height="240">
  <br>
  <br>
 </body>
</html>
filter: alpha(opacity=80); -moz-opacity: 0.80; opacity: 0.80;
zorgt ervoor dat het nu iets doorzichtig is in Explorer, Firefox en Opera. :)


Vr.Gr. Egel.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan