Sådan skaber du et enkelt Rollover-billede i Dreamweaver

Rollovere er et så populært træk, at Dreamweaver indeholder en særlig dialogboks kun til rollovers: Dialogboksen Indsæt rolllover-billede. Rollover billeder, som navnet antyder, er designet til at reagere, når nogen ruller en markør over et billede. Effekten kan være så dramatisk som et billede af en hund, der erstattes af et billede af et løve, eller så subtile som farven på et ordskifte.

Du kan oprette mere komplekse rollover-billedvirkninger med alternativet Swap Image fra panelet Behaviors. Alternativet Swap Image gør det muligt at ændre flere billeder på samme tid.

Følg disse trin for at oprette en simpel overgangseffekt med to billeder ved hjælp af Dreamweaver's Insert Image Rollover-dialogboksen:

1. Placer markøren på den side, hvor overgangen skal vises.

   Rollover-effekter kræver mindst to billeder: en til den indledende tilstand og en til rulningstilstanden. Du kan bruge to forskellige billeder eller to lignende, men begge skal have de samme dimensioner. Ellers ser du mærkelige skaleringseffekter, fordi begge billeder skal vises på nøjagtig samme plads på siden.

2. Vælg Indsæt → Billede → Rollover billede.

   Alternativt kan du bruge rullelisten tilgængelig fra ikonet Billeder i panelet Fælles indsæt og vælge Rollover Image.

   Dialogboksen Indsæt rollover-billede vises.

   

3. Navngiv dit billede i feltet Billednavn.

   Før du kan anvende en adfærd på et element, som et billede, skal elementet have et navn, så adfærdsscriptet kan referere til det. Du kan navngive elementer, hvad du vil, så længe du ikke bruger mellemrum eller specialtegn.

4. Angiv det første billede, du vil se, i den originale billedboks. Brug knappen Gennemse til at finde og vælge billedet.

   Hvis billederne ikke allerede findes i din lokale mappe, kopierer Dreamweaver dem til dit websted, når du opretter overgangen.

5. Indtast det billede, du vil synliggøre, når en besøgende flytter markøren over det første billede i feltet Rollover Image.

   Igen kan du bruge Browse-knappen til at finde og vælge billedet.

6. Marker afkrydsningsfeltet Preload Rollover Image for at indlæse alle overførselsbilleder i browserens cache, når siden først indlæses.

   Hvis du ikke vælger at gøre dette trin, kan dine besøgende opleve en forsinkelse, fordi det andet billede ikke downloades, før en markør rulles over det originale billede.

7. Indtast en beskrivelse af billederne i feltet Alternativ tekst.

   Alternativ tekst er valgfri men anbefales, fordi brugen af ​​søgeord kan forbedre søgemaskineoptimering.Tilsvarende er alternativ tekst en vigtig del af webtilgængeligheden, fordi denne tekst læses højt af specielle browsere kaldet skærmlæsere, som bruges af blinde og andre med begrænset syn eller mobilitet. Alternativ tekst vises kun i browseren, hvis billederne ikke er synlige.

8. I feltet Når du klikker, skal du gå til URL-feltet, indtaste en webadresse eller gennemse for at finde en anden side på dit websted, som du vil linke.

   Hvis du ikke angiver en webadresse, indsætter Dreamweaver automatisk # -tegnet som en pladsholder i koden.

   Skiltet # 1 er en almindelig teknik til oprettelse af links, der ikke forbinder nogen steder. Fordi rollover billeder, der ikke linker til en anden side, har mange gode anvendelser, er denne teknik nyttig. Husk bare, at hvis du vil have din overførsel til at forbinde, skal du erstatte # -tegnet med et link til en anden side.

9. Klik på OK.

   Billederne opsættes automatisk som en overdragelse.

10. For at se overgangen i aktion skal du gemme filen og derefter klikke på kloden-ikonet øverst i arbejdsområdet for at få vist din side i en webbrowser.

Du kan se, hvordan din overdragelse fungerer i Dreamweaver's Design-visning eller ved at bruge Live-visningen. Når du klikker på knappen Live øverst til venstre i arbejdsområdet, drejer du i grunden Dreamweaver ind i en webbrowser, der viser sider, som ligner Chrome-browseren.

Når du forhåndsviser en side på din computer, der indeholder et overgangsbilde, viser nogle browsere en advarsel om, at du skal tillade ActiveX-kontroller at se siden. Dette er en sikkerhedsadvarsel, der kun vises, når siden åbnes på den samme computer, hvor siden er gemt.

Hvis du offentliggør siden til en webserver og derefter ser den over en internetforbindelse, vil du og dine besøgende ikke se denne fejl.

Kredit: Kunstværk af istockphoto. dk