BLINKENDE TEKST og RULLETEKSTER

Jeg er tit blevet spurgt om hvordan man laver blinkende tekst. Ganske vist findes der koder hertil, de virker i Opera, Firefox og Netscape, men ikke med Netscape 6, Internet Explorer og Chrome:

i HTML: <BLINK>-kode
i CSS: attributten text-decoration = blink
i JavaScript: Objectet String ejer metoden blink()

dette er skrevet med <BLINK>
og dette med
og dette med

For at lave blinkende tekst der virker med alle de nævnte browsere kan man lave en gif-fil der blinker, hvis man ellers har et billedbehandlingsprogram der kan lave animerede giffer. Har man ikke det er det, så vidt jeg indtil videre ved, nødvendigt med en del javaScript programmering, og den tekst der skal blinke skal vises i form af én GIF-fil (ell. jpg) med teksten, der for hvert blink skiftes ud med en anden GIF-fil uden teksten.
Jeg har derfor lavet to GIF-filer kaldet BLINK1.GIF og BLINK2.GIF, som jeg skifter imellem:

Her nogle kommentarer til javaScript koden:
I HTM-filens <HEAD>-afsnit har jeg skrevet:

<script language=javaScript>

var gif1=false;

function gifskift(){
 if (gif1) {document.gif.src="BLINK1.GIF"; // Den gif-fil der vises på billedets plads
 setTimeout("gifskift()", 700)} // kald denne function igen om 700 ms
 else {document.gif.src="BLINK2.GIF"; // Hvis gif1=false vises billede BLINK2
 setTimeout("gifskift()", 300)};
 gif1=!gif1; // skift mellem gif1=true og gif1=false
}
</script>

<body>-afsnittet tildeles eventHandler onLoad:
<body onLoad="setTimeout('gifskift()', 5000")>
Dvs når hele HTM-filen er indlæst går der 5 sekunder, så kaldes gifskift og teksten begynder at blinke.

Nede i body-afsnittet står så billedet med koden:
<IMG Src=BLINK1.GIF name=gif border=0>
Jeg skal bruge billedets navn på siden (her kaldet gif) så jeg kan referere til det fra min javascript.

Teksten "Hej og hjerteligt ..." står i BLINK1.GIF, der er en GIF-fil med en palette på kun 2 farver, derfor fylder den ikke alt for meget. Den ene farve (baggrundsfarven) er transparent, så hvis du bruger en anden baggrundsfarve på HTML-siden får du også dén som baggrundsfarve på GIF-filen. Det andet billede (BLINK2.GIF) indeholder kun den transparente baggrundsfarve; den har præcis den samme højde og bredde som BLINK1.GIF. Hvis jeg i <IMG> koden havde angivet højde og bredde, så havde det været nok at lave BLINK2.GIF på kun 1 x 1 pixel !
Hvis du vil ændre tekstens farve i BLINK1.GIF, og bruger PaintShopPro (PSP), så læs BLINK1.GIF ind i PSP og vælg "colors" - "edit palette". Metoden med preloadede billeder anbefales mange steder fordi det skulle betyde, at billederne ikke skal hentes fra nettet hver gang - man kunne frygte at det forsinkede blinkeriet.
Alle mine forsøg med at preloade viser, at det er virkningsløst. Browseren laver en caché på harddisken med de sidst indlæste filer fra nettet, og derudover laver processoren en caché med de sidst indlæste filer fra disken. Hvis preload var hurtigere, så vil man se at den blinkende tekst ovenfor blinker hurtigere, når der er klikket så der på knappen står "billedet hentes nu fra array". Det kan vel tænkes at afhænge af hardware og software, men jeg har også prøvet (Windows95, med både Netscape og Internet Explorer) at skifte de to billeder BLINK?.GIF ud med nogle billeder der fyldte meget mere, og preload var stadig virkningsløst.

rulletekster

Rulletekster kan laves med <marquee>rulletekst</marquee> : rulletekst marquee-koden indsætter linieskift før og efter.
Man kan tilføje attributter (det understregede er default):

behavior =

scroll : Går ud i den ene ende og kommer igen i den anden ende
slide : kører kun én gang
alternate: kører skiftevis til venstre og til højre, eller op og ned

scroll slide alternate right left scrollamount=1 scrollamount=10 scrollamount=100 start/stop med klik Width=50%Width=50%
up	down	alternate-down	slide-up

direction=

right
left
up
down

width=

et tal (pixels), eller med % (af box-bredde)

scrollamount=

et tal, 1 er det langsomste, 6 default

id =

navn : Et gyldigt variabelnavn til javaScript

Event-handlere, f.eks omClick (virker kun med Opera).
JavaScript har et object (marquee?) med mogle metoder, bl.a. start() og stop()
som jeg har brugt så du kan starte og stoppe den ene marquee →
klik på marquee'en, dvs et sted på den linie hvor marquee'en kører

Her knapper til stop og start af apoteket og broen, med javaScript metoderne stop() og start():

Eksempel: Apoteket og Broen
Her er teksten skiftet ud med billeder, og i Apotek-billedet er der en eventHandler <IMG ... onClick=stopstartapoteket( ) > hvor stopstartapoteket er en funktion der.. ja hvad tror du.
Tilsvarende er brobilledet omgivet af <A Href="javaScript : stopstartbroen()">, det virker omtrent ligedan, men har den fordel at curseren sommetider ændrer udseende når den er på plads. Og klik på billedet, her er det ikke nok at klikke på marquee'en (det havde det været med <A - koden udenom marquee'en).

Marquee'erne kan normalt ikke støde sammen - dem der kører vandret indsætter ny linie før og efter. Dem der kører lodret stopper når de når sporet fra en der kører vandret, og laver man 2 der kører op og/eller ned, deler de pladsen op så de vender når de er nået halvvejs.
Der er undtagelser fra denne regel, hvis width > 100%, eller med (Firefox eller I.Explorer) + med + text foran marquee, se nedenfor.

Med glemmer browserne Firefox, Internet Explorer og Chrome at indsætte ny linie foran, så hvis de starter et stykke inde i feltet af en tabel kan de finde på at køre ind over næste felt i tabellen. Her vises først hvordan det går uden en tabel:
Med og width=100%: Med en tekst foran marquee'enwidth=100% Uden og width=125% og tekst foran marquee'enwidth=125%

To marqueér med 2.den med Her en tekst foran marquee'enher marquee'en Her nok'en tekst, med osse om marquee'enNok en marquee Nedenfor en marquee der har width=200% (uden eller text foran):

width=200%

med glemmer browserne Firefox og I.Explorer linieskift foran marquee'en, hvilket har betydning hvis der er en tekst foran. Så kører marquee'en ind i feltet bagved

Lavet med inspiration fra http://www.quackit.com/html/codes/html_marquee_code.cfm

marquee i marquee
	← op-ned marquee indeni den vandrette Virker med Opera og (som oftest) med Firefox, og den til højre → også med Edge, Internet Explorer og Chrome op-ned marquee udenom den vandrette →