Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu

Flash-objektien upotus Web-sivuille

Johdanto

Tällä sivulla käsitellään suositusten mukaista tapaa liittää Flash-sisältöä Web-sivuille. Pyrkimyksenä on mahdollisimman yksinkertainen, kattava ja esteetön toteutus. Luonnollisesti koodin tulee olla validia. Esimerkkien koodi on XHTML-syntaksin mukaista.

Monimutkaisempaa Flash-objektien upotusta käsitellään muualla.

Koodin perusta

Käytämme koodimme perustana OBJECT-elementtiä, joka nimensä mukaisesti on suunniteltu kaikenlaisten objektien upotukseen. Flash-objektin yhteydessä elementti tarvitsee neljä attribuuttia:

Edellinen näyttää koodina seuraavalta:

<object
 type="application/x-shockwave-flash"
 data="http://weppipakki.com/html/misc/flash.swf"
 width="300"
 height="120">
</object>

Ihaanteellisessa maailmassa asia olisi siinä. Kaikki eivät kuitenkaan kykene hyödyntämään koodiamme, joten on vielä kiinnitettävä huomiota ainakin vähintään kahteen seikkaan, eli yhteensopivuuteen ja saavutettavuuteen.

Yhteensopivuus

Yhteensopivuustekijät johtuvat asiakasohjelmien puutteista. Edistyneimmät selaimet ymmärtävät yllä esitetyn koodimme vaikeuksitta, mutta vanhempaan arkkitehtuuriin perustuvat Internet Explorer -selaimet (kirjoitusajankohtana IE-versiot 6 ja sitä pienemmät) eivät. Tämä johtuu puutteellisesta data-attribuutin tuesta, joka onneksi voidaan paikata PARAM-elementillä, joka tulee sijoittaa OBJECT-elementin ensimmäiseksi lapsielementiksi:

<object
 type="application/x-shockwave-flash"
 data="http://weppipakki.com/html/misc/flash.swf"
 width="300"
 height="120">
<param
 name="movie"
 value="http://weppipakki.com/html/misc/flash.swf" />
</object>

Näin PARAM-elementin nimi/arvo-attribuuttiparin avulla selaimista johtuvat yhteensopivuustekijät on saatettu niin kuntoon kuin yleensä mahdollista.

Saavutettavuus

Saavutettavuus tai esteettömyys koskee tiedon perillemenoa myös tilanteissa, joissa Flash-tukea ei syystä tai toisesta löydy. Saavutettavuustekijät saatetaan kuntoon antamalla Flash-objektille vaihtoehtoinen sisältö, joka sijoitetaan -elementin sisälle (PARAM-elementin jälkeen). Mistä tämä vaihtoehtoinen sisältö sitten koostuu riippuu itse alkuperäisestä objektista ja sen tehtävästä.

Teknisesti ajatellen OBJECT-elementti huolii sisällökseen vaikka mitä elementtejä, mutta toista objektia ei kannatta edes harkita, edellä mainitun asiakasohjelman puutteista johtuen. Tässä yksinkertaisesti ja varsin vaatimattomasti sijoitamme varmistukseksi linkin itse Flash-objektiin, jolloin koodimme on kokonaisuudessaan seuraavanlainen

<object
 type="application/x-shockwave-flash"
 data="http://weppipakki.com/html/misc/flash.swf"
 width="300"
 height="120">
<param
 name="movie"
 value="http://weppipakki.com/html/misc/flash.swf" />
<a
 href="http://weppipakki.com/html/misc/flash.swf">Lataa
 Flash-kikkare!</a>
</object>

Voit tarkastaa koodin toimivuuden upotetun Flash-objektin (65k) testisivulla.

Julkaisupäivämäärä: 2006-03-19
Osmo Saarikumpu