[HTML] ATTLIST gebruiken in DOCTYPE - Softwareontwikkeling

woensdag 7 februari 2007 20:33

Acties:

Verwijderd

Topicstarter

Ik wil mijn website W3 valid maken (validator.w3.org) maar maak gebruik van ONLOAD elementen in <img>. Dit is dus niet meer geldig maar ik wil dit absoluut niet meer veranderen.

Nu heb ik wat rond gezocht en kwam ik op de volgende stukje code uit:

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

Dit werkt perfect en zorgt er ook voor dat mijn pagina VALID is.

Het probleem is alleen dat ik de laatste karakters van dat stukje code terug zie in de output van mijn pagina, ik zie namelijk helemaal bovenin de karakters ]>.

Dit is dus weer niet de bedoeling...

Hoe krijg ik dit werkend zodat mijn pagina valid is (door ONLOAD te negeren in de W3 check) en ik geen rare karakters krijg in de output van mijn website?

woensdag 7 februari 2007 20:36

Acties:

AtleX

Tyrannosaurus Lex 🦖

Je wil 'm valid maken, maar toch weer niet

Rare keuze als je het mij vraagt.

Mag ik vragen waarom je niet gewoon in het onload event van de pagina al je image-tags afloopt en dan pas het event eraan hangt?

[edit]
Snel voorbeeldje:

http://atlex.nl/voorbeelden/js/img_onload.html

JavaScript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Image onload</title>
        
        <script type="text/javascript">     
            window.onload = function()
            {
                var allImg = document.getElementsByTagName('img');
                
                for (var i = 0; i < allImg.length; i++)
                {
                    allImg[i].onload = function()
                    {
                        window.alert("URL: " +this.src + ", hoogte: " + this.height + "px & breedte: " + this.width + "px");
                    }
                }
            }
            
            function reload(img)
            {
                document.getElementById(img).src = document.getElementById(img).src;
            }
        </script>
    </head>
    
    <body>
        <h1>Image onload</h1>
        
        <p>
            <img src="http://atlex.nl/forum_icon/normal.icon.png" alt="icon" id="img0">
            <button onclick="reload('img0');">Reload</button>
        </p>
        <p>
            <img src="http://atlex.nl/forum_icon/sinterklaas.icon.png" alt="icon" id="img1">
            <button onclick="reload('img1');">Reload</button>
        </p>
        <p>
            <img src="http://atlex.nl/forum_icon/kerst.icon.png" alt="icon" id="img2">
            <button onclick="reload('img2');">Reload</button>
        </p>
        <p>
            <img src="http://atlex.nl/forum_icon/vuurwerk.icon.png" alt="icon" id="img3">
            <button onclick="reload('img3);">Reload</button>
        </p>
        <p>
            <img src="http://atlex.nl/forum_icon/verjaardag.icon.png" alt="icon" id="img4">
            <button onclick="reload('img4');">Reload</button>
        </p>
    </body>
</html>

En dan is dit nog niet eens heel netjes.

[ Voor 79% gewijzigd door AtleX op 09-02-2007 18:32 ]

Sole survivor of the Chicxulub asteroid impact.

woensdag 7 februari 2007 23:07

Acties:

Verwijderd

Topicstarter

Omdat dit gewoon echt teveel werk is voor al die buttons,

ik wil hem inderdaad niet valid maken maar hij moet er wel valid uitzien, dat is gewoon het belangrijkste...

Dat wat ik gebruik werkt prima behalve dat hij dan die tekens weergeeft op de pagina zelf... dat wil ik dus verhelpen

woensdag 7 februari 2007 23:17

Acties:

PolarBear

Verwijderd schreef op woensdag 07 februari 2007 @ 23:07:
ik wil hem inderdaad niet valid maken maar hij moet er wel valid uitzien, dat is gewoon het belangrijkste...

Wat is er dan het nut van?

woensdag 7 februari 2007 23:21

Acties:

crisp

Devver

Pixelated

Scheiding van markup en behavior is juist good practice...

Intentionally left blank

woensdag 7 februari 2007 23:24

Acties:

Erkens

Fotograaf

crisp schreef op woensdag 07 februari 2007 @ 23:21:
Scheiding van markup en behavior is juist good practice...

Precies, daarom zou je juist die handlers moeten koppelen via JS en niet via deze omweg koste wat het kost je page "valid" houden (lees: jezelf voor de gek houden)

Maar hoezo zou het meer werk zijn om het via JS te doen dan dat je handmatig in je source overal die onload toevoegd? Het is juist minder werk imo.

donderdag 8 februari 2007 11:00

Acties:

Verwijderd

Topicstarter

Oke dan ga ik het oplossen met bovenstaande code, mijn vraag is alleen hoe ik de locatie van de 'onload" afbeelding kan geven, ik zie namelijk alleen reload(img0), waar staat die img0 dan voor?

donderdag 8 februari 2007 11:23

Acties:

TeeDee

CQB 241

Verwijderd schreef op donderdag 08 februari 2007 @ 11:00:
Oke dan ga ik het oplossen met bovenstaande code, mijn vraag is alleen hoe ik de locatie van de 'onload" afbeelding kan geven, ik zie namelijk alleen reload(img0), waar staat die img0 dan voor?

Het id van de Image?

HTML:

1	<img src="http://atlex.nl/forum_icon/normal.icon.png" alt="icon" id="img0">

[ Voor 12% gewijzigd door TeeDee op 08-02-2007 11:23 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

donderdag 8 februari 2007 21:56

Acties:

Verwijderd

Topicstarter

En waar moet dan de URL van het icoontje wat geactiveerd wordt als ik met de muis over de afbeelding ga?

vrijdag 9 februari 2007 14:01

Acties:

AtleX

Tyrannosaurus Lex 🦖

Een beetje basiskennis en zelf wat proberen kan geen kwaad hoor.

Kijk eens naar:

JavaScript:

1	document.getElementById(img).src = document.getElementById(img).src;

Daar ken ik het aan src (source) attribuut van de image een nieuwe waarde toe, maar omdat ik in mijn voorbeeld alleen maar wilde reloaden is dat gewoon dezelfde URL. Als je er nu

JavaScript:

1	document.getElementById(img).src = "http://www.google.com/images/logo_sm.gif";

van maakt zal je zien dat je een Google logo krijgt.

Sole survivor of the Chicxulub asteroid impact.