Oprettelse af billedlink og billedkort

• Kan 15, 2024

Denne uges svar er som svar på et læserspørgsmål - “Kan du forklare, hvordan man laver et billedlink til en side i HTML”. Der er et par forskellige teknikker, du kan bruge til sammenkædede billeder. Den ene er at linke hele billedet med din HTML og det andet er at lave et billedkort - hvor forskellige dele af det samme billede er knyttet til forskellige placeringer.

Koblet billede i HTML

Det er meget enkelt at linke et lille billede eller et ikon, alt hvad du skal gøre er at placere dit billedlink inden i hyperlinket sådan:



Alt, hvad jeg gjorde her, var at vedlægge billedet i html'en til linket. Dette er den nemmeste og mest effektive måde at linke et lille billede på og gøres ofte med brugerdefinerede kugler, ikoner osv. Men hvad nu, hvis du vil have et stort billede til at linke til flere forskellige steder? Det er her billedskæring er praktisk.

Billedskæring i Photoshop

Dette er meget let at opnå i Photoshop. Du skal bruge et billede, der ikke er alt for kompliceret, fordi du ønsker, at dine brugere skal kunne se, hvor de skal klikke på billedet tydeligt. Du ønsker også at sikre, at dine brugere forstår, at de er nødt til at klikke inden for billedet for at komme, hvor de skal hen. Udvikle billedkort omhyggeligt med din bruger i tankerne. Husk billedkort er normalt ikke så søgemaskine venlige som tekst på en side, men korrekt brug af alt tags i dine billedskiver kan hjælpe med dette.

Når dit billede er oprettet, er det næste trin at "skære" dit billede. Skiveværktøjets ikon ligner en lille exacto kniv. Det er nær toppen af ​​værktøjslinjen og placeret under beskæringsværktøjet - hvis du klikker på "beskær" -ikonet, vises skive- og skivevælgerværktøjerne.

Vælg skiveværktøjet, hold din venstre musetast nede og træk forsigtigt skiven, hvor du vil have den, og slip derefter. Gå videre, og fortsæt med at skære hele billedet. Der skal være en udsnit omkring hvert område af det billede, du vil linke til en anden side. Ethvert stort hvidt område kan være en skive.

Når dit billede er fuldstændigt skåret, er det næste trin at bruge værktøjet "skivevalg", klikke på hver skive og derfra vælge skivetypen "billede". Under denne udfyld url'en, hvor du vil have denne skive direkte fulgt af alt-tagfeltet i bunden. De andre felter er ikke nødvendige for simpel billedkortlægning. Gå gennem hver skive på samme måde, indtil hele billedet er kortlagt.

Når hele billedet er komplet, bruger du indstillingen "Gem til web og enheder". Hvis du klikker på "Fil" øverst og ser ned under de typiske gemmeindstillinger, vil du se muligheden for at gemme til web og enheder. Vælg denne indstilling, og der åbnes en dialogboks, hvor du kan få vist et eksempel på dit billede. Hvis du er tilfreds med det, skal du trykke på Gem-knappen, og en anden dialogboks åbnes. Sørg for, at den anden indstilling siger “gem billeder og HTML”, og gem derefter dit arbejde.

Gå til din mappe, hvor du gemte HTML-dokumentet, og åbn det. Du kan kopiere og indsætte denne kode i din egen HTML-fil. Denne HTML vil typisk være lidt slurv. Hvis du er dygtig i HTML, kan du rense det op til din smag, men det skal fungere fint, som det er. Sørg for, at som altid er dine billedfiler osv. På de rigtige placeringer, ellers vises ikke dit billede.

Video Instruktioner: Sådan laver du et opslag med tekst, billeder, video og links (Kan 2024).