PDA

Volledige versie bekijken : img onload


Trojan
%Europe/Berlin %592 %2006, 14:13
Hallo iedereen,

Op een site die ik aan het maken ben heb ik een foto-album. Telkens als men op een fotothumbnail klikt verandert de volledige img in de foto die men wenst te zien.
Op de pagina zit een hidden div met een gifje die 'aan het laden is', vergelijk dat plaatje met een zandloper.

Zodra men op een thumbnail klikt komt de div tevoorschijn en zodra de img geladen is verdwijnt de div. Dit doe ik mbv 'onload' in de img tag. Echter, dit mag niet volgens de w3c standaard maar het werkt wel in alle browsers waar ik mee getest heb.

Weet iemand een nettere en w3c gevalideerde oplossing? :)

mknol
%Europe/Berlin %666 %2006, 15:59
Hallo iedereen,

Op een site die ik aan het maken ben heb ik een foto-album. Telkens als men op een fotothumbnail klikt verandert de volledige img in de foto die men wenst te zien.
Op de pagina zit een hidden div met een gifje die 'aan het laden is', vergelijk dat plaatje met een zandloper.

Zodra men op een thumbnail klikt komt de div tevoorschijn en zodra de img geladen is verdwijnt de div. Dit doe ik mbv 'onload' in de img tag. Echter, dit mag niet volgens de w3c standaard maar het werkt wel in alle browsers waar ik mee getest heb.

Weet iemand een nettere en w3c gevalideerde oplossing? :)Laat eens een voorbeeld zien van wat je had? Dan kunnen we er op verder breien.

Trojan
%Europe/Berlin %377 %2006, 09:03
Klik maar eens op de thumbnails :)

link (http://www.tiedtzat.nl/nieuw/index.php?p=fotos&id=files/fotos/2004/test&s=1)

Trojan
%Europe/Berlin %683 %2006, 16:24
schop...

xplicit media
%Europe/Berlin %059 %2006, 01:26
Interessant punt, had zelf hetzelfde probleem namelijk. had op een site welke ik na moest kijken over de 400 w3c errors weggewerkt maar bleef er met 1 zitten namelijk zelfde onload probleem..

Overigens zal geen enkele pagina op je site van tiedzat valideren aangezien je de vereiste basic info al vergeten bent namelijk geen DOCTYPE aangegeven foei foei! En dan toch een W3C validated logo plaatsen op de site is wel soort van lef ha ha.

Maar ik zal even een code geven hier welke dus voor problemen zorgt in de ogen van W3C:

Source:
$thumb_list[$i]['image'] = "<img src=\"" . $pic_url . "\" id=\"thephoto_".$ri."\" onload=\"initImage('thephoto_".$ri."');\" class=\"image\" height='114' width='114' border=\"0\" alt=\"{$row['filename']}\" title=\"$pic_title\">";

Output bv:

"<img src="foto.jpg" id="photo_4749" onload="initImage('photo_4749');" class="image" height='114' width='114' border="0" alt="photo" title="Click to see this image in a larger format">

Het probleem is dat er aan img geen atribute onload mag worden gegeven (helaas pindakaas)
Maarrr er is een oplossing voor welke ik na lang zoeken heb gevonden. Je kan namelijk zelf je validatie aanpassen door aan je DTD codes toe te voegen.

Dat kan eigenlijk voor elke code welke niet officieel bestaat in de ogen van W3C door de juiste DTD te kiezen.

Ik kan er nog hele verhalen over vertellen maar je wilt natuurlijk een oplossing ;)

Aangezien ik dus niet weet welk doctype je wilt gebruiken ga ik maar even uit van iets simpels:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Daar maak je dan van: (ziet er erg raar uit maar is echt goed)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" [<!ATTLIST img onload CDATA #IMPLIED>]>

Klaar :)

Trojan
%Europe/Berlin %483 %2006, 11:36
Overigens zal geen enkele pagina op je site van tiedzat valideren aangezien je de vereiste basic info al vergeten bent namelijk geen DOCTYPE aangegeven foei foei! En dan toch een W3C validated logo plaatsen op de site is wel soort van lef ha ha.
Hehe, ja dat had ik even weg gehaald omdat m'n menu bij foto's anders niet naar behoren werkte om de één of andere reden :P

bedankt voor de info, kzal het vanavond ff uit proberen :D

Trojan
%Europe/Berlin %856 %2007, 20:33
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" [<!ATTLIST img onload CDATA #IMPLIED>]>

Kben er een tijdje uitgeweest en het webdesignen lag er dus een tijdje uit.

Nu heb ik een probleem, het werkt perfect alleen laat het een lelijk ]> zien..

hoe haal ik die weg? :O