Tekst bij aanklikken van een plaatje(foto)
- Onderwerp starter dicor
- Startdatum
- Status
Bij www.leejoo.nl onder javascripts > mouse-over > mouse-over-tip 
Je kunt ook <img src="" title="tekst bij plaatje"> gebruiken.
Vr.Gr. Egel.
Je kunt ook <img src="" title="tekst bij plaatje"> gebruiken.
Vr.Gr. Egel.
Script tekst bij plaatje
Ik heb het geprobeerd, maar lukt niet, zou jij voor mij dit script kunnen aanpassen.
De foto wie op de pagina staat komt uit Foto-site/circus.jpg zou je dit in het script kunnen verwerken.
Er staan meerdere foto's op die pagina en moeten allemaal, bij muisover tekst hebben.
Alvast bedankt,
Dicky
Ik heb het geprobeerd, maar lukt niet, zou jij voor mij dit script kunnen aanpassen.
De foto wie op de pagina staat komt uit Foto-site/circus.jpg zou je dit in het script kunnen verwerken.
Er staan meerdere foto's op die pagina en moeten allemaal, bij muisover tekst hebben.
Alvast bedankt,
Dicky
Dat scriptje bij leejoo was niet al te nieuw meer. 
Ik heb er zelf eentje gemaakt, het werkt in Ie en Fx:
(Bijlage)
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.
Vr.Gr. Egel.
Ik heb er zelf eentje gemaakt, het werkt in Ie en Fx:
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);
background-color: #eee;
padding: 2px;
color: #000;
font-size: 11px;
font-family: verdana;
}
</style>
</head>
<body>
<script type="text/javascript">
// Egel 070302 ;)
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>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.
Vr.Gr. Egel.
Bij www.leejoo.nl onder javascripts > mouse-over > mouse-over-tip
Je kunt ook <img src="" title="tekst bij plaatje"> gebruiken.
Vr.Gr. Egel.
Volgens mij kan het ook nog met alt=""
Dat werkt alleen met Ie, title is officiëel html en werkt ook met Fx (en bij div, span, a, p ...).
Door width: auto; in de style te zetten kun je per keer de breedte bepalen, maar je moet dan wel <br> in de tekst zetten als je wilt dat het afbreekt:
Vr.Gr. Egel.
- Status
