Silvie
Gebruiker
- Lid geworden
- 1 nov 2003
- Berichten
- 401
Opkomend plaatje na aanduiding tekst
- Onderwerp starter Silvie
- Startdatum
- Status
marcel bosveld
Terugkerende gebruiker
- Lid geworden
- 17 sep 2003
- Berichten
- 1.666
Kijk maar eens op deze pagina,daar staat de oplossing wel tussen
http://users.skynet.be/javascript/images/afbeeldingen.htm
http://users.skynet.be/javascript/images/afbeeldingen.htm
JeroenE
Terugkerende gebruiker
- Lid geworden
- 20 mrt 2005
- Berichten
- 1.950
Ik heb php-tags gebruikt voor de correcte weergave. Het is echter geen php, maar wel css javascript en html.
Zet het volgende in de head van je document :
Het volgende komt in de body (zet dat maar helemaal onderaan):
En je link waarbij de afbeelding tevoorschijn moet komen en weer verdwijnen ziet er als volgt uit :
Ik hoop dat dit duidelijk genoeg is.
Op mijn site kan je op de pagina's "polls" en "downloads" een voorbeeld zien die hetzelfde doet, maar dan met tekst.
Als je wilt, kan ik er nog een optie bijsteken waarbij je per link een andere afbeelding ziet.
Greetz : Jer
en.
Zet het volgende in de head van je document :
PHP:
<style type="text/css">
#picdiv {
position:absolute;
visibility:hidden;
}
</style>
<script language="javascript" type="text/javascript">
<!--
function showPic(id,show) {
var mx = window.event.x;
var my = window.event.y;
id.style.visibility = show;
id.style.left = (mx > screen.width / 2) ? mx - 150 : mx + 10;
id.style.top = (my > screen.height / 2) ? my - 45 : my + 10;
};
-->
</script>Het volgende komt in de body (zet dat maar helemaal onderaan):
PHP:
<div id="picdiv">
<img src="afbeelding.jpg">
</div>En je link waarbij de afbeelding tevoorschijn moet komen en weer verdwijnen ziet er als volgt uit :
PHP:
<a href="...." onMouseMove="showPic(picdiv,'visible');" onMouseOut="showPic(picdiv,'hidden');">link</a>Ik hoop dat dit duidelijk genoeg is.
Op mijn site kan je op de pagina's "polls" en "downloads" een voorbeeld zien die hetzelfde doet, maar dan met tekst.
Als je wilt, kan ik er nog een optie bijsteken waarbij je per link een andere afbeelding ziet.
Greetz : Jer
en.
Laatst bewerkt:
- Lid geworden
- 1 sep 2002
- Berichten
- 16.494
- Besturingssysteem
- macOS Sequoia
Bij dit onderwerp had ik een text-popup gemaakt die verschijnt als je boven een plaatje staat.
Dit script doet het andersom:
(Bijlage)
Het stylesheet zet je in de head van het document, het javascript direct achter de body-tag. Aan een link voeg je dan onmouseover="showImg('naamvandefoto')" en onmouseout="hideImg()" toe.
De foto verschijnt als je boven de link gaat staan en volgt het handje. Het werkt in Ie en Fx.
Vr.Gr. Egel.
Dit script doet het andersom:
PHP:
<html>
<head>
<title>img-popup</title>
<style type="text/css">
body { overflow: scroll; overflow-x: hidden;}
#popup {
position: absolute;
visibility: hidden;
border: 1px solid #000;
}
</style>
</head>
<body>
<script type="text/javascript">
// Egel 070317 ;)
document.write('<img id="popup" src=""></img>');
var popup = document.getElementById('popup');
function followMouse(e) {
popup.style.left = (e ? e.pageX + 1: event.clientX + document.body.scrollLeft - 2) - 1;
popup.style.top = (e ? e.pageY + 2: event.clientY + document.body.scrollTop - 2) + 19;
};
document.onmousemove = followMouse;
function showImg(photo) {
popup.src = photo + '.jpg';
popup.style.visibility = 'visible';
};
function hideImg() {
popup.style.visibility = 'hidden';
};
</script>
<a href="#" onmouseover="showImg('boa_noite')" onmouseout="hideImg()">Boa noite!</a>
</body>
</html>Het stylesheet zet je in de head van het document, het javascript direct achter de body-tag. Aan een link voeg je dan onmouseover="showImg('naamvandefoto')" en onmouseout="hideImg()" toe.
De foto verschijnt als je boven de link gaat staan en volgt het handje. Het werkt in Ie en Fx.
Vr.Gr. Egel.
- Status
