Så tänkte jag fästa det orangea bandet ”Regeringsskifte 06″ på sidan. Sagt och gjort, jag gick till orangea bandets hemsida, hämtade deras kodsnutt och klistrade in.
Men fy, blä, usch! Är det bara jag som är petig, eller borde inte koden vara så standard som möjligt – inte något hopkok av javascript från 90-talet och Macromedias skumma object/embed i sunkigt felaktig HTML4.
Nå petig är jag, så jag skrev om som XHTML och såg till att jag inte behövde klistra in script där det inte hör hemma. Resultatet är filen orange_xhtml.js, vill du ha den så slit den med hälsan.
Det som genereras är:
<div style="position:absolute; top:0; right:0; height:163px; width:163px; z-index:10000;" id="Band">
<object data="http://www.orangeabandet.se/flash.swf"
codebase="http://fpdownload.macro =>
media.com/pub/shockwave/cabs/flash/ =>
swflash.cab#version=6,0,0,0" type="application/x-shockwave-flash" height="163" width="163">
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
</object>
</div>
För att vara helt sanningsenlig så genereras ytterligare en URL för MSIE, men den nonchaleras av såväl Opera som Firefox. Jag har inte testat i Safari, men det borde funka även där.
Codebase är egentligen inte nödvändigt, annat än för att trigga uppdatering om någon har ett gammalt plugin. Style direkt på div:en är väl inte optimalt, men då slapp jag klistra in CSS.
För att sedan klistra in på sidan används DOM och lägger koden sist. För att inte kollidera med existerande onload, så används addEventListener och attachEvent för att hantera såväl Mozilla och Opera som MSIE – som sista nödlösning läses existerande onload och skrivs tillbaka med tillägg.
Det enda som krävs för att använda är att klistra in koden:
<script type="text/javascript" src="sökväg/till/orange_xhtml.js"></script>
Lämpligen klistras det in i ”head”.
Alltid hjälper det någon… Gör vad ni vill med det, jag har inga anspråk.
Marcus utvecklar numera för Nindev!
2 kommentarer
Vad sägs om
<a href="http://www.maktskifte.nu"><div style="position:absolute; top:0; right:0; height:180px; width:180px; z-index:10000; background: transparent url(http://zaz.mine.nu/maktskifte.png)">
</div></a>
så slipper man både javascript och flash?
Inte helt giltig kod, eftersom det ligger ett block i en inline, om man vill komma runt det kanske man kan bråka med imagemaps eller nått.
För just det orangea bandet skulle det kunna funka med .png — sånär som på en sak: Det skiter sig i MSIE <7, om du inte är beredd att acceptera 8-bitar med indexerad transparens.
Sen är giltigheten i din kod enkel att göra något åt, det är bara att dumpa div:en och sätta display:block på den aktuella länken med motsvarande stilinfo.
<a href="http://www.maktskifte.nu" style="display:block; position:absolute; top:0; right:0; height:180px; width:180px; z-index:10000; background: transparent url(http://zaz.mine.nu/maktskifte.png)">