Syster Webb - PC Hemma 8/2002

Fråga: Jag har en massa bilder på mina hemsidor. Jag vill ordna det så att man kan klicka på en bild och få upp en text. Hur gör man det?

Svar: Det beror på vad texten skall användas till. Vill du ha upp en bildtext, eller vill du skydda dina bilder mot kopiering? Nedan förklarar jag några olika metoder att åstadkomma båda delarna.

Men - och det här är viktigt - du kommer att använda JavaScript. För det första fungerar skripten inte likadant i Internet Explorer som i de båda senaste versionerna av Netscape. För det andra kan besökaren ha stängt av javaskriptfunktionen i sin webbläsare, och då fungerar inte de metoder jag beskriver.

A. Det första exemplet gör att man kan vänsterklicka direkt i bilden för att få upp en meddelanderuta. I denna lägger du den text som du vill visa.

Det här är en bra lösning om man till exempel vill ange en e-postadress eller URL, eller om texten som man vill visa är lång. Meddelanderutan finns kvar tills besökaren själv stänger den, så att han eller hon hinner skriva av eller kopiera texten.

I meddelanderuta kan du lägga in radbrytningar där du själv vill ha dem - i stället för att få den litet var som helst - genom att använda "\n" som jag har gjort nedan.

Det lilla skriptet placeras direkt i bildtaggen. Metoden fungerar i Internet Explorer 5.5 och i Netscape 6, men inte i Netscape 4.5.

<IMG border="0" src="bilden.jpg" width="100" height="50" onClick="alert('Lägg rutans text här inom \nde enkla citationstecknen!')">

B. Det här skriptet placerar i stället en "Klicka här-knapp" under bilden, och när man klickar på knappen kommer meddelanderutan upp. Metoden har fördelen att den fungerar även i Netscape 4.5.

Först tar vi koden som visar själva bilden:

<IMG border="0" src="bilden.jpg" width="100" height="50">

Därefter kommer det lilla skriptet som visar en knapp och skapar meddelanderutan när man klickar på knappen:

<!-- Det här scriptet klickar upp en meddelanderuta-->
<FORM>
<INPUT TYPE="button" VALUE="Klicka här!" onClick="alert('Lägg rutans text här inom \nde enkla citationstecknen!')">
</FORM>
<!--Slut på scriptet-->

Med just den här koden kommer det att stå "Klicka här!" på knappen, men den texten kan du byta ut mot vad du vill. Om du till exempel vill ge dina besökare möjlighet att beställa en kopia av bilderna, kan du ändra koden så här:

<INPUT TYPE="button" VALUE="Beställ en bild" onClick="alert('Skicka ett e-brev till \ndin.epostadress@server.domän \nom du vill ha en kopia av bilden.')">

C. Många uppfattar dessa meddelanderutor som ganska störande. Om du bara vill visa en bildtext, kan du lägga denna så att den visas när man pekar på bilden. Metoden fungerar i Internet Explorer 5.5 och i Netscape 6, men inte i Netscape 4.5 - en fördel med den är att den fungerar även om javascriptfunktionen är avstängd.

<IMG border="0" src="bilden.jpg" width="100" height="50" title="Lägg din bildtext här">

När besökaren pekar på bilden, visas en liten ruta med texten. Denna ruta försvinner efter några sekunder, så den duger inte till långa texter eller texter som man behöver hinna kopiera.

D. Slutligen tar vi ett skript som hindrar högerklick i sidan, till exempel för att kopiera bilden. Gör man det får man upp en meddelanderuta som talar om att bilder och texter är skyddade. Skriptet placerar du mellan HEAD-taggarna. Det fungerar i IE 5 samt i Netscape 4.5, men inte i Netscape 6.

<SCRIPT language="JavaScript">
<!-- Göm skriptet
var meddelande="Det går inte att högerklicka på den här sidan.\nText och bilder är copyrightskyddade.";

function hKlicka(e) {
if (document.all) {
if (event.button == 2) {
alert(meddelande);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(meddelande);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=hKlicka;
// -->
</SCRIPT>

Tro nu inte att det här skriptet verkligen skyddar dina bilder. Det räcker med att användaren stänger av JavaScript i webbläsaren, eller i Internet Explorer drar upp bilden och släpper den i adressraden, så går det ändå bra att kopiera den!

Du kan kombinera flera av skripten. Om du till exempel stoppar in skriptet D mellan HEAD-taggarna, går det inte att högerklicka i bilden. Men samtidigt kan du använda A, B eller C direkt i samband med bilden. Då går det fortfarande att vänsterklicka, för att till exempel få information om vad bilden föreställer.

Fråga: Jag har sett sidor där man har en spiral längs ena kanten, så att sidan liknar ett spiralblock. Jag gjorde en sådan bild (800x600 pixlar) och försökte använda den som bakgrundsbild, men det gjorde att det tog alldeles för lång tid att öppna sidan. Kan man fixa det här och ändå få en snabbladdad sida?

Svar: Ja, med just en spiral är det lätt ordnat, eftersom spiralen ju är en form som upprepar sig regelbundet.

Öppna din bakgrundsbild och klipp ut en så stor bit av själva spiralen med hålen i papperet, att du kan lägga flera sådana klipp under varandra och få en perfekt spiral (testa i en ny, tom bild). Om papperet är enfärgat - vilket det bör vara - behöver du inte ta med något av den tomma pappersytan. Spara detta klipp som en ny bild, till exempel som spiral.jpg. Det är den här lilla bilden du skall använda som bakgrundsbild.

I stället för den vanliga koden för bakgrundsbild, lägger du nu en liten stilmall mellan HEAD-taggarna. Den kan se ut så här:

<STYLE TYPE="text/css">
BODY {background-image: url(spiral.jpg); background-repeat: repeat-y; background-color: #008000;}
</STYLE>

Den gör att bakgrundsbilden spiral.jpg kommer att upprepas, men bara i y-led (längs vänsterkanten). Om du i stället vill ha spiralen upprepad längs sidans överkant, ändrar du till "repeat-x".

I "background-color" anger du den färg som papperet i ditt spiralblock har. Hela bakgrunden får då rätt färg, utan att du använder en bild på den delen av sidan, och det blir ingen synlig skarv mellan bilden och bakgrundsfärgen. Det här fungerar i både Internet Explorer och Netscape.

Fråga: När besökarna tittar på min hemsida visas ett rött kryss i stället för bilderna, men när jag går in på sidan syns alla bilder. Kan det bero på att de har stängt av bilderna i webbläsaren?

Svar: Både Internet Explorer och Netscape har olika symboler för bilder som saknas och för avstängd bildvisning.

Internet Explorer visar den övre symbolen till vänster när bildvisningen är avstängd, men ett rött kryss när bildfilen inte finns där koden säger att den skall ligga.

Netscape 4.5 använder den övre symbolen till vänster när den automatiska bildvisningen är avstängd, men ett frågetecken när bilden inte finns på rätt plats.

Om din hemsida visar ett rött kryss i stället för bilder, så betyder detta alltså att sökvägen till bilderna är fel. Det kan finnas flera skäl till att det blir på det sättet och här tar jag upp de vanligaste.

Du har hämtat bilden från en annan mapp än hemsidesfilernas bildmapp
Om du gör din hemsida i till exempel FrontPage, hämtar bilder från en annan mapp än hemsidesbildernas mapp och sedan sparar sidan i din hemsidesmapp kommer sökvägen till bilden att bli fel. Låt oss säga att sökvägen till bilden ursprungligen ser ut så här i koden:

<IMG BORDER="0" SRC="bilden.jpg" WIDTH="50" HEIGHT="40">

Du har alla dina hemsidesfiler i mappen Hemsida och just den här koden finns i Hemsida\index.html. Bilderna däremot skall ligga i en egen mapp: Hemsida\bilder.

Om du gör index.html i Frontpage och hämtar bilden direkt från en annan bildmapp än Hemsida\bilder, kan sökvägen i koden komma att se ut så här när du har sparat index.html:

<IMG BORDER="0" SRC="file:///D:/Bilder/JPG-bilder/bilden.jpg" width="50" height="40">

När du nu öppnar sidan hemma på den egna datorn, kommer webbläsaren att hitta bilden. Koden innehåller ju den absoluta sökvägen, som den ser ut på din egen hårddisk. Men en besökare som öppnar din sida har ingen chans att se bilden. Den här sökvägen finns helt enkelt inte på din server!

Lösningen: Skapa mappstrukturen för hemsidesfilerna innan du börjar göra själva sidorna. Flytta alla bilder du skall använda till "bildmappen" (i vårt exempel "Hemsida\bilder"). Sedan kan du infoga bilderna därifrån. Då kommer sökvägarna att bli relativa, det vill säga stå i förhållande till den sida som skall visa bilderna.

Den korrekta sökvägen/koden blir här:

<IMG BORDER="0" SRC="bilder/bilden.jpg" WIDTH="50" HEIGHT="40">

Vilket betyder: Från filen index.html skall webbläsaren gå till undermappen "bilder" och hämta filen bilden.jpg.

Du har inte samma mappstruktur på servern som på hårddisken
Även det näst vanligaste felet har med sökvägarna att göra. För att sidorna skall visas korrekt både hemma och på Internet är det viktigt att alla sökvägar stämmer.

Många gör en snygg mappstruktur på den egna hårddisken, men glömmer att skapa samma struktur på servern. Där hamnar i stället alla filer i en och samma mapp!

Koden som skall visa bilden är <IMG BORDER="0" SRC="bilder/bilden.jpg" WIDTH="50" HEIGHT="40">, men det finns ingen mapp som heter "bilder" på servern. Den finns däremot hemma på hårddisken, och när du då tittar på hemsidan på din egen dator utan att vara uppkopplad, kommer bilderna att synas.

Lösningen: Se till att du har exakt samma mappstruktur på servern som på hårddisken, och att du placerar alla filer i rätt mapp när du laddar upp dem till servern.

Bilderna har felaktiga filnamn
Hemma på den egna datorn brukar det inte spela så stor roll om bilden heter "Bild.JPG" på hårddisken men "bild.jpg" i hemsideskoden. Men många servrar tolkar de här namnen som två olika filer. En del servrar klarar dessutom inte av filnamn som "Ärtan gifter sig.jpg".

Lösningen: Det går bra att använda stora bokstäver - om man gör det i både filnamnen och koden - men för konsekvensens skull är det bättre att bara använda små bokstäver i både mappnamn och filnamn. Avstå helt från å, ä och ö, och från mellanslag. Vill du vara riktigt säker på att allt skall fungera, ser du dessutom till att filnamnen inte är längre än 8 tecken plus filändelsen.

Fråga: Jag har en sida där jag har lagt allt i tabeller. Precis som du skriver i CCS HTML-skola har jag kollat med både Internet Explorer och Netscape att det fungerar. Men när en kompis går in på min sida syns inte den första tabellen. Kompisen använder Netscape. Varför blir det så här?

Svar: Du har kollat dina sidor i Internet Explorer 5.5 och i Netscape 6, men din kompis använder Netscape 4.5. Den äldre versionen av Netscape är fortfarande helt dominerande bland netscapeanvändarna och det är den du bör använda, tillsammans med Internet Explorer 5.5, för att försäkra dig om att sidorna verkligen fungerar.

Felet ligger i din tabellkod - den ser ut så här (radnumren hör inte till koden; de är till för att det skall bli lättare att följa med i resonemanget):

1. <TABLE BORDER="0" WIDTH="300">
2. <TR><TD WIDTH="100%">Litet text
3. <TABLE BORDER="0" WIDTH="100" ALIGN="right">
4. <TR><TD WIDTH="100%">En tabell inuti en annan tabell</TD></TR>
5. </TABLE>
6. </TD></TR>
7. På den här raden saknas det kod!
8. <TABLE BORDER="0" WIDTH="300">
9. <TR><TD WIDTH="100%">Mer text i en ny tabell</TD></TR>
10. </TABLE>

• (1) Först har du gjort en tabell. I den har du (2) lagt "Litet text".
• (3) I den första tabellen har du lagt in en annan tabell, som du har placerat längst till höger.
• (4) I denna "inre" tabell finns texten "En tabell inuti en annan tabell".
• (5) Sedan avslutar du extratabellen med </TABLE>, varpå du (6) avslutar tabellraden med </TD> </TR>.
• (7) Men sedan saknas avslutningen på den första, "yttre" tabellen.
• (8 - 10) I stället kommer koden till en ny, komplett tabell med "Mer text i en ny tabell".

Både Internet Explorer och Netscape 6 tolkar den här koden som du hade tänkt dig den. IE är väldigt förlåtande mot fel i tabellkoder och detsamma gäller för Netscape 6.

Men med Netscape 4.5 är det en helt annan sak. Webbläsaren förstår inte vad som menas och det enda den kommer att visa är det som finns i det kompletta kodavsnittet 8-10. Hela den första tabellen, med dess nästade tabell, hoppas helt enkelt över!

Det enda du behöver göra, är att lägga in ett </TABLE> i rad 7. Sedan kommer tabellen att fungera även i Netscape 4.5.