Hur man skapar en enkel överrullningsbild i Dreamweaver

Rollovers är en så populär funktion att Dreamweaver inkluderar en speciell dialogruta bara för rollovers: dialogrutan Infoga rollover-bild. Rollover-bilder, som namnet antyder, är designade för att reagera när någon rullar en markör över en bild. Effekten kan vara lika dramatisk som en bild av en hund som ersätts av en bild av ett lejon, eller lika subtil som att färgen på ett ord förändras.

Du kan skapa mer komplexa rollover-bildeffekter med alternativet Byt bild från panelen Beteende. Alternativet Byt bild låter dig ändra flera bilder samtidigt.

För att skapa en enkel rollover-effekt med två bilder med hjälp av Dreamweavers dialogruta Insert Image Rollover, följ dessa steg:

Placera markören på sidan där du vill att överrullningen ska visas.

Rollover-effekter kräver minst två bilder: en för initialtillståndet och en för rollover-tillståndet. Du kan använda två olika bilder eller två liknande, men båda ska ha samma mått. Annars ser du konstiga skalningseffekter eftersom båda bilderna måste visas på exakt samma plats på sidan.

Välj Infoga → Bild → Överrullningsbild.

Alternativt kan du använda rullgardinsmenyn som är tillgänglig från ikonen Bilder i panelen Common Insert och välja Rollover Image.

Dialogrutan Infoga överrullningsbild visas.

Namnge din bild i rutan Bildnamn.

Innan du kan tillämpa ett beteende på ett element, till exempel en bild, måste elementet ha ett namn så att beteendeskriptet kan referera till det. Du kan namnge element vad du vill så länge du inte använder mellanslag eller specialtecken.

I rutan Originalbild anger du den första bilden du vill se. Använd knappen Bläddra för att hitta och välja bilden.

Om bilderna inte redan finns i din lokala webbplatsmapp, kopierar Dreamweaver dem till din webbplats när du skapar överrullningen.

I rutan Rollover Image anger du bilden du vill ska bli synlig när en besökare flyttar markören över den första bilden.

Återigen kan du använda knappen Bläddra för att hitta och välja bilden.

Markera kryssrutan Preload Rollover Image för att ladda alla rollover-bilder till webbläsarens cache när sidan läses in.

Om du inte väljer att göra det här steget kan dina besökare uppleva en fördröjning eftersom den andra bilden inte laddas ner förrän en markör rullas över originalbilden.

I fältet Alternativ text anger du en beskrivning av bilderna.

Alternativ text är valfri men rekommenderas eftersom användningen av sökord kan förbättra sökmotoroptimeringen. På liknande sätt är alternativ text en viktig del av webbtillgänglighet eftersom denna text läses upp av speciella webbläsare som kallas skärmläsare, som används av personer som är blinda och andra med nedsatt syn eller rörlighet. Alternativ text visas endast i webbläsaren om bilderna inte är synliga.

I rutan När du klickar, gå till URL anger du valfri webbadress eller bläddrar för att hitta en annan sida på din webbplats som du vill länka till.

Om du inte anger en URL infogar Dreamweaver automatiskt #-tecknet som platshållare i koden.

#-tecknet är en vanlig teknik för att skapa länkar som inte länkar någonstans. Eftersom överrullningsbilder som inte länkar till en annan sida har många fantastiska användningsområden är denna teknik användbar. Kom bara ihåg att om du vill att din rollover ska länka måste du ersätta #-tecknet med en länk till en annan sida.

Klicka på OK.

Bilderna ställs in automatiskt som en rollover.

För att se överrullningen i aktion, spara filen och klicka sedan på globikonen högst upp på arbetsytan för att förhandsgranska din sida i en webbläsare.

Du kan se hur din rollover fungerar i Dreamweavers designvy eller genom att använda alternativet Live view. När du klickar på Live-knappen längst upp till vänster i arbetsytan förvandlar du i princip Dreamweaver till en webbläsare som visar sidor ungefär som webbläsaren Chrome.

När du förhandsgranskar en sida på din dator som innehåller en överrullningsbild, kommer vissa webbläsare att visa en varning som säger att du måste tillåta ActiveX-kontroller att visa sidan. Detta är en säkerhetsvarning som endast visas när sidan öppnas på samma dator där sidan sparas.

Om du publicerar sidan på en webbserver och sedan visar den via en internetanslutning kommer du och dina webbplatsbesökare inte att se detta fel.

Kredit: Konstverk av istockphoto.com