Tips&Tricks

til hjemmesiden, computeren og internettet

Tips & Tricks



Udskriv vandmærke på hjemmesiden

Sat på siden 10-10-2003

I fredags, kort efter at jeg havde sendt Tips&Tricks, modtog jeg en e-mail fra Marianne A, der skrev:

"Har med interesse læst din beskrivelse af vandmærke på hjemmeside bag
tekst. Er der nogen mulighed for at tvinge vandmærket med på en udskrift af
teksten?

Jeg prøvede at udskrive din champagneside med markering af teksten, men
flasken kom ikke med. Jeg ville gerne have et vandmærke som blev skrevet med ud, så man kunne se hvor teksten kom fra."

Nej, et vandmærke kan ikke tvinges med på en udskrift. Gæsten kan selv indstille sin browser til at udskrive baggrunden, men du kan ikke selv påtvinge det.

Mariannes idé inspirerede mig, for jeg kunne bestemt godt se mulighederne i det, så jeg tænkte, at når en baggrund ikke kunne udskrives, så måtte det kunne lade sig gøre på en anden måde at få billedet udskrevet. Det lykkedes - to døgn senere havde jeg fundet en måde, det kunne lade sig gøre på. Dog kun, hvis man har én enkelt side, og det virker desværre ikke på alle printere...

Se - og udskriv - http://www.tips-og-tricks.com/eksempler/vandmaerke.html

Ingredienserne er følgende:
---------------------------

1 HTML-dokument
1 billede til vandmærke
1 billede til udskriften - kan være det samme som vandmærket
1 stylesheet til visning på skærmen
1 stylesheet til udskrift

Opskriften:
-----------

Hvis du lavede HTML-dokumentet med vandmærket sidst, så skal det kun lige tilrettes lidt, hvis du har brugt "inline stylesheets", dvs. skrevet stilen direkte i tagget, her var der tale om <body>.

Fjern i så fald alt, hvad der hedder <style> og har med style at gøre, for nu skal du linke til to stylesheets: 1 til brug for skærmvisningen, og 1 til brug for udprintningen.

I eksemplet her har jeg lavet et stylesheet, der hedder "vandmaerke.css" til skærmvisningen og et, der hedder "print.css" til udskriften. I <head> skal jeg linke til disse to stylesheets således:

<link rel="stylesheet" href="vandmaerke.css" type="text/css" media="screen">
<link rel="stylesheet" href="print.css" type="text/css" media="print">

Opret nu - med TopStyle eller fx Notesblok - et stylesheet, der hedder "vandmaerke.css". I det behøver der kun at stå:

body{
background: url(champagne.gif) no-repeat fixed center;
}
#vand{
display: none;
}

hvor "champagne.gif" er navnet på det billede, jeg har brugt som vandmærke på siden.

Opret endnu et stylesheet, som du kalder "print.css", og som skal indeholde følgende tekst:

#tekst{
 position: absolute;
 z-index: 4;
}
#vand{
 position: absolute;
 z-index: 2;
 left: 20%;
 top: 30%;
}

Hvis du forestiller dig, at du har selve teksten liggende som et ark papir og billedet som et rigtigt billede, så bestemmer z-index hvilken en af de to ting, der skal ligge øverst i bunken. Jo højere tal, desto mere "øverst" ligger emnet. Her vil vi have teksten over vandmærket, så teksten er blevet tildelt indekset 4, mens billedet (vand) kun har indeks 2. 0 er lavest, men det er godt at have i reserve, hvis du finder ud af, at du skal have andre ting liggende under vandmærket.

Left og top (venstre og top) kan det godt tænkes, at du selv skal ind og indstille. Det afhænger nemlig blandt andet af størrelsen af dit billede. Prøv dig frem i så fald, til du har et vandmærke, der er nogenlunde i midten af siden. Vær opmærksom på, at du kun kan se billedet, når du enten printer siden ud eller vælger Filer -> Vis udskrift.

Nu kommer det til billedet... Jeg har brugt "champagne.gif" til den side, der skal vises i browseren, og et billede, der siger "copyright Britt Malka" til udskriften. Du kan vælge at have to billeder eller bruge det samme.

Tilbage i HTML-dokumentet skal vi have indsat billedet til udskriftsiden. Gør det fx lige efter overskriften, dvs. fx <h1>Overskrift</h1><span id="vand"><img src="vandmaerke.gif"></span>

Span betyder, at billedet bliver indsat på samme linje som overskriften, men stylesheetet flytter det på plads. Du fortæller browseren, at den skal bruge de indstillinger, du har skrevet i stylesheetet under navnet "vand", ved at skrive "id="vand". "vandmaerke.gif" udskifter du bare med navnet på dit billede.

Hvis du ikke har brugt samme billede til vandmærket på forsiden som til udskriften, skal du lige have indsat billedet igen, men denne gang uden at vise det. Ellers vil nogle browsere ikke kunne finde ud af at vise billedet i udskriften. Du indsætter følgende kode i bunden af dit HTML-dokument - lige før </body>:

<img src="vandmaerke.gif" height="0" width="0">

Kunne du lide tippet? Abonner gratis på mine nyhedsmails og få friske tips hver uge: Tilmelding til Tips og tricks
Lige nu: Få e-bogen "701 Tips og Tricks" gratis (normalpris $11,83) ved tilmelding.


|