:  Retur til startside
 : Rulletekst (marquee)
 :  HTML - startside
 

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 <SPAN style="text-decoration:blink">
  • 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".
Det skal dog bemærkes at den faktiske kode ikke er helt magen til - der er indført en array med billederne i ("preloadede billeder"), men den bruges kun hvis du klikker :  
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():
   

Man kan osse ændre hastigheden med javaScript-variablen (marquee-id).scrollAmount ... dog ikke med browseren Chrome:
Apotek:   Bro:
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 <NoBr> + text foran marquee, se nedenfor.
Med <NoBr> 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 <NoBr> og width=100%: Med en tekst foran marquee'enwidth=100% Uden <NoBr> og width=125% og tekst foran marquee'enwidth=125%
To marqueér med <NoBr>2.den med <NoBr> Her en tekst foran marquee'enher marquee'en Her nok'en tekst, med <NoBr> osse om marquee'enNok en marquee Nedenfor en marquee der har width=200% (uden <NoBr> eller text foran):
width=200%
med <NoBr> 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 Internet Explorer og Chrome


 op-ned marquee udenom den vandrette →