Voorbeeld #5 :
pop-up: een combinatie van commentaar met mouse-over,
en klikken om de foto te vergroten door gebruik van javascript
Werkende demo
Klik op ��n van de foto's
Werkwijze
Stap 1: Download onderstaande javascripts en CSS bestand.
Opmerking: om het CSS bestand te downloaden, klik met de rechtermuisknop op het bestand en neem "bewaar bestand als".
popup_zoomin.js
popup_zoomin_mouseover.js
popup_zoomin_mouseover.css
Stap 2: Plaats onderstaande code tussen <head> en </head>
<link rel="stylesheet"
href="popup_zoomin_mouseover.css"
type="text/css" media="screen" />
<script type="text/javascript"
src="popup_zoomin.js"></script>
<script type="text/javascript" src="popup_zoomin_mouseover.js"></script>
Stap 3: Plaats onderstaande code tussen <body> en </body> op de plaats waar je de thumbnail (verkleinde foto) wil tonen.
<a href="benaming_foto.jpg"
onclick="this.href = 'javascript:void(0);';"
onMouseover="ddrivetip('schrijf
hier je commentaar over de foto')";
onMouseout="hideddrivetip()">
<img src="benaming_foto.jpg"
border="0"
width="66"
height="100"
alt="" title="" onclick="new
ImageExpander(this, 'benaming_foto.jpg');">
</a>
De rode tekst moet je zelf nog aanpassen.
Herhaal stap 3 voor elke nieuwe foto.
Stap 4:
Upload alle bestanden naar je webserver.
Foto's, html bestand, het javascript
popup_zoomin.js, popup_zoomin_mouseover.js en het CSS bestand popup_zoomin_mouseover.css.
Configuratie van de javascripts.
Je moet GEEN aanpassingen aanbrengen aan de javascripts popup_zoomin.js en popup_zoomin_mouseover.js bestanden.
Configuratie van het CSS bestand popup_zoomin_mouseover.css
Je kan eventueel aanpassingen aanbrengen aan het popup_zoomin_mouseover.css bestand
Opgelet:
Wijzig ENKEL de groene tekst en laat de rest zoals het is.
Heb je wijzigingen aangebracht, bewaar het bestand dan terug als popup_zoomin_mouseover.css
Open het bestand popup_zoomin_mouseover.css in bv. kladblok.
Je krijgt nu de volgende code te zien:
#dhtmltooltip{
font-face:
arial;
font-size:
10pt;
color:
#f0e68c;
position: absolute;
left: -300px;
width: 150px;
border: 1px solid white;
padding: 2px;
background-color: gray;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below
line should always appear last within this
CSS*/
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135);
}
#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}
|
OVERWEEG EEN DONATIE
Ben je tevreden over de gegeven informatie dan kan je als blijk van waardering voor de aangeboden hulp
steeds een donatie overwegen. Dit om de aangeboden hulp ook in de toekomst te kunnen blijven garanderen. Alvast bedankt. Webmaster |