Ga naar inhoud


pop up van photo's met dreamweaver

dark-angel-djin

Door dark-angel-djin
in Off topic

 Delen

Aanbevolen berichten


Puch Superster

Puch

Geplaatst:
Geplaatst:

Dan kan met dreamweaver, echter moet je dan een plaats aanduiden waar die foto moet verschijnen. Als je het in een popup wil doen zou ik aanraden om een onclick event in te stellen.

Als je een mouse over event zou instellen bij een popup dan gaat er telkens een venster openen als iemand met de muis over de foto gaat gaat, zeer vervelend als je het mij vraagt :D .

 

Met een mouse over event kan je als volgt tewerk gaan.

 

Je maakt een pagina aan met de thumbnails van de foto's die je wil weergeven.

dan zet je ergens op dezelfde pagina een beginfoto. (bijvoorbeeld de grote afbeelding van de eerste thumbnail) Geef die foto ook een name en id. dit doe je door de image te selecteren en in het paneel onderaan een naam in te typen (links naast width en height van de image)

Je html code moet er dan zo uitzien.

<img src="images/naam.jpg" name="naam" id="naam" />

 

Op iedere thumbnail zet je een OnMouseOver swap event.

On mouse out zet je niets.

 

Je kan dit als volgt doen in dreamweaver.

 

Selecteer de thumbnail.

druk Shift+F4

het paneel behaviors zal open gaan.

Klik op het plusteken en kies voor "afbeelden wisselen" (swap images mocht je een engelstalige dw hebben)

Je zal de naam die je net hebt gegeven aan de afbeelding zien staan tussen aan halingstekens. Selecteer die.

blader naar de afbeelding die moet getoond worden als je met de muis over de thumbnail gaat.

Zet het vinkje af bij afbeeldigen herstellen OnMouseOut"

KLik op ok

 

Dit doe je met elke thumbnail.

 

Als je nu de pagina opent zal de eerste afbeelding zichtbaar zijn.

Ga je met de muis over een thumbnail zal de foto veranderen.

 

Ik heb een klein voorbeeldje gemaakt

klik

 

Uiteraard moet je ervoor zorgen dat al je grote foto's dezelfde afmetingen hebben. Zo voorkom je vervorming zoals in mijn voorbeeld.

 

Succes

 

iMac 27" macOS Sierra
iPhone 5s iOS 10

Link naar reactie
Delen op andere sites
lite Rijzende ster

lite

Geplaatst:
Geplaatst:

klein is fijn wink

 

<html>

<head>

<script type="text/javascript">

function swap4all() {

var images = document.getElementsByTagName('img');

for (var i = 0; i < images.length; i++) {

images.style.position = 'absolute';

images.style.width = images.offsetWidth / 2;

images.style.left = images.offsetWidth * i;

images.style.zIndex = 99 - i;

images.onmouseover = function() { this.style.width = this.offsetWidth * 2; }

images.onmouseout = function() { this.style.width = this.offsetWidth / 2; }

}

}

</script>

</head>

<body onload='swap4all();'>

<img src="http://www.sat4all.com/forums/images/sat4all/logo.gif" alt="" />

<img src="http://www.hamar-trykk.no/images/Logo_TBAS_pms.jpg" alt="" />

</body>

</html>

 

And now for something completely similar

Link naar reactie
Delen op andere sites
  • 1 maand later...
dark-angel-djin Rijzende ster

dark-angel-djin

Geplaatst:
  • Auteur
Geplaatst:
Origineel bericht van: lite
klein is fijn wink

<html>
<head>
<script type="text/javascript">
function swap4all() {
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
images.style.position = 'absolute';
images.style.width = images.offsetWidth / 2;
images.style.left = images.offsetWidth * i;
images.style.zIndex = 99 - i;
images.onmouseover = function() { this.style.width = this.offsetWidth * 2; }
images.onmouseout = function() { this.style.width = this.offsetWidth / 2; }
}
}
</script>
</head>
<body onload='swap4all();'>
<img src="http://www.sat4all.com/forums/images/sat4all/logo.gif" alt="" />
<img src="http://www.hamar-trykk.no/images/Logo_TBAS_pms.jpg" alt="" />
</body>
</html>



zeer mooi al ik nu de foto's ook nog eens in een layer kan laten opkomen
zou af zijn
hoe kan ik die in een layer zetten ?
Link naar reactie
Delen op andere sites
lite Rijzende ster

lite

Geplaatst:
Geplaatst:
Origineel bericht van: dark-angel-djin

zeer mooi al ik nu de foto's ook nog eens in een layer kan laten opkomen
zou af zijn
hoe kan ik die in een layer zetten ?


wat bedoel je precies met een layer..?

And now for something completely similar

Link naar reactie
Delen op andere sites
dark-angel-djin Rijzende ster

dark-angel-djin

Geplaatst:
  • Auteur
Geplaatst:

<html>

<head>

<script type="text/javascript">

function swap4all() {

var images = document.getElementsByTagName('img');

for (var i = 0; i < images.length; i++) {

images.style.position = 'absolute';

images.style.width = images.offsetWidth / 2;

images.style.left = images.offsetWidth * i;

images.style.zIndex = 99 - i;

images.onmouseover = function() { this.style.width = this.offsetWidth * 2; }

images.onmouseout = function() { this.style.width = this.offsetWidth / 2; }

}

}

</script>

<style type="text/css">

<!--

#apDiv1 {

position:absolute;

left:174px;

top:129px;

width:492px;

height:103px;

z-index:1;

}

#apDiv2 {

position:absolute;

left:117px;

top:137px;

width:568px;

height:166px;

z-index:1;

}

#apDiv3 {

position:absolute;

left:143px;

top:137px;

width:509px;

height:149px;

z-index:1;

}

-->

</style>

</head>

 

<body onload='swap4all();'>

<div id="apDiv3">hier</div>[/color]

<img src="http://www.sat4all.com/forums/images/sat4all/logo.gif" alt="" />

<img src="http://www.hamar-trykk.no/images/Logo_TBAS_pms.jpg" alt="" />

</body>

 

</html>

 

 

LA IK DIE TUSSEN DIE DIV KON ZETTEN

 

 

 

 

OF HIER TUSSEN

 

 

<table width="399" height="252" border="1">

<tr>

<th width="389" scope="col"> </th>

</tr>

</table>

OF DERGELIJKE

Link naar reactie
Delen op andere sites

Maak een account aan of log in om te reageren

Je moet een lid zijn om een reactie te kunnen achterlaten

Account aanmaken

Registreer voor een nieuwe account in onze community. Het is erg gemakkelijk!

Registreer een nieuwe account

Inloggen

Heb je reeds een account? Log hier in.

Nu inloggen
 Delen
Ga naar topic overzicht

  • Wie is er online   0 leden

    • Er zijn geen geregistreerde gebruikers deze pagina aan het bekijken
×
×
  • Nieuwe aanmaken...