Pagina 1 van 1 1
Onderwerp Opties
Stem op dit onderwerp
#1468397 - 27/02/2008 23:46 pop up van photo's met dreamweaver
dark-angel-djin Offline
Sat4all Freak

Geregistreerd: 02/05/2003
Berichten: 800
Uit: nederland limb
hallo
ik ben aan het proberen website te maken
met wat foto's
aleen wil ik als ik met muis over foto's ga dat die vergroten zonder klikken
hoe kan ik dat doen ?

Omhoog
#1468590 - 28/02/2008 15:38 Re: pop up van photo's met dreamweaver [Re: dark-angel-djin]
Big fellow Offline
Sat4all Core Member

Geregistreerd: 27/06/2002
Berichten: 2210
Uit: 34.57S, 58.40W
Dat kan je volgens mij doen met de "overlib" javascripts...
Zoek op google maar eens daar naar...

Big fellow
_________________________
The difference between genius and stupidity is that genius has it's limits. Albert Einstein

Omhoog
#1468625 - 28/02/2008 17:07 Re: pop up van photo's met dreamweaver [Re: dark-angel-djin]
Puch Moderator Offline
Moderator

Geregistreerd: 12/04/2002
Berichten: 4906
Uit: West-Vloanderen
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 .

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
_________________________
Puch

Omhoog
#1468675 - 28/02/2008 18:45 Re: pop up van photo's met dreamweaver [Re: Puch]
dark-angel-djin Offline
Sat4all Freak

Geregistreerd: 02/05/2003
Berichten: 800
Uit: nederland limb
puch van harte bedank
dat zal ook al voldoende zijn ga er zo snel mogelijk mee starten zo dra ik wat tyd kan maken toch ik zal laten weten hoe ver ik ermee ben

Omhoog
#1468819 - 28/02/2008 23:15 Re: pop up van photo's met dreamweaver [Re: dark-angel-djin]
lite Offline
Sat4all Freak

Geregistreerd: 26/05/2005
Berichten: 941
Uit: was
klein is fijn ;\)

<html>
<head>
<script type="text/javascript">
function swap4all() {
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
images[i].style.position = 'absolute';
images[i].style.width = images[i].offsetWidth / 2;
images[i].style.left = images[i].offsetWidth * i;
images[i].style.zIndex = 99 - i;
images[i].onmouseover = function() { this.style.width = this.offsetWidth * 2; }
images[i].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

Omhoog
#1483586 - 01/04/2008 21:26 Re: pop up van photo's met dreamweaver [Re: lite]
dark-angel-djin Offline
Sat4all Freak

Geregistreerd: 02/05/2003
Berichten: 800
Uit: nederland limb
 Origineel bericht van: lite
klein is fijn ;\)

<html>
<head>
<script type="text/javascript">
function swap4all() {
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
images[i].style.position = 'absolute';
images[i].style.width = images[i].offsetWidth / 2;
images[i].style.left = images[i].offsetWidth * i;
images[i].style.zIndex = 99 - i;
images[i].onmouseover = function() { this.style.width = this.offsetWidth * 2; }
images[i].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 ?

Omhoog
#1483946 - 02/04/2008 19:41 Re: pop up van photo's met dreamweaver [Re: dark-angel-djin]
lite Offline
Sat4all Freak

Geregistreerd: 26/05/2005
Berichten: 941
Uit: was
 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

Omhoog
#1487406 - 10/04/2008 08:10 Re: pop up van photo's met dreamweaver [Re: lite]
dark-angel-djin Offline
Sat4all Freak

Geregistreerd: 02/05/2003
Berichten: 800
Uit: nederland limb
<html>
<head>
<script type="text/javascript">
function swap4all() {
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
images[i].style.position = 'absolute';
images[i].style.width = images[i].offsetWidth / 2;
images[i].style.left = images[i].offsetWidth * i;
images[i].style.zIndex = 99 - i;
images[i].onmouseover = function() { this.style.width = this.offsetWidth * 2; }
images[i].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


Bewerkt door dark-angel-djin (10/04/2008 08:16)

Omhoog
#1488141 - 11/04/2008 22:48 Re: pop up van photo's met dreamweaver [Re: dark-angel-djin]
dark-angel-djin Offline
Sat4all Freak

Geregistreerd: 02/05/2003
Berichten: 800
Uit: nederland limb
duss ijgenlijk bij mousover dat de foto vergroot word in een image place holder
de fotos wil ik in het klijn sorteren in kaders links en in het midden een grotere kaderzo dat als ik met muis er over loop dat de fotos vergroot worden ion de midenste grotere image holder

Omhoog
Pagina 1 van 1 1


Moderator:  Duwgati, Puch 
Ga naar:
Forum Statistieken
40266 Leden
49 Forums
241846 Onderwerpen
1501410 Berichten
472 berichten in de afgelopen 24 uur
Max Online: 336 @ 16/04/2008 20:22
Top Auteurs ;)
27305
Ome Merde
18159
Toxic[Q]
17735
Tonskidutch
13965
AlanS
13098
Feedhunter Rini
Wie zijn er Online
59 geregistreerde (Mazi007, sevensheaven, John1985, bash!, Poetsdoekje, targus, 6 onzichtbaar) en 106 anonieme bezoekers online.
Nieuwste Leden
tik, jangeit, lassie123, hupert, viburnum
40266 Geregistreerde Leden
Verjaardagen
Gefeliciteerd bipak (64), rene1234 (50), lawaai (46), hendrico-nl (43), RtheC (40), djenzen (27).