CSS grafikobjekter tillade udviklere at placere hotspots inden billeder, der indeholder links til andre websider. For eksempel kan et hot spot placeres omkring ansigtet af en person i det billede, der indeholder et link til deres personlige webside . Når en bruger placerer musen over personens ansigt en figur , vises der afgrænser det hot spot området. Oprettelse af en CSS image map indebærer at kalde et billede i html , og derefter oprette de tilsvarende CSS -koder mellem de html tags. Denne artikel viser, hvordan man laver en image map af øjne og næse på et portræt Ginevra de Benci malet af Leonardo da Vinci. Ting du skal
teksteditor som Notepad , Emacs , ConTextMozilla , Explorer eller anden browser
Vis Flere Instruktioner
Kortlægning It Out
1

Opret to knyttet websider. I dette eksempel oprettes en for øjnene og en til næsen . Øjnene siden vil læse "Det er de øjne ", og næsen siden vil læse "Dette er næsen. " Prøven html nedenfor skaber to er øjnene ! < /html >
2

Opret HTML-tags for billedet . Åbn et tomt dokument og bruge følgende kode til at kalde billedet fra biblioteket . Du bliver nødt til at ændre navnet og størrelse specifikationer for dit billede :

< /html >
3

Tilføj links til billeder i en uordnet liste tag . For at tilføje links placere følgende kode mellem billedet og division tags :

• øjne
• næse

Du ønsker måske at ændre klasse navne passer bedre til dit billede.
4

Opret CSS for billedet. Følgende kode skal gå mellem og < /head > tags i HTML-dokumentet : selvfølgelig vil dine specifikationer varierer dit billede vil være anderledes. Et grafisk design software som Coral Draw eller Adobe Photoshop kan give pixelposition information. Men du kan altid finde den rigtige position ved trial and error så godt. Gem siden i den samme mappe som de to andre filer.
6

Test Image kortet . Gå til den mappe , hvor filerne er gemt, og dobbeltklikke på HTML-filen , hvor billedet vises. Du bør se dit billede i browseren . Kør musen hvor hotspots var placeret . Du vil se en sort ramme vises. Klik inde i rammen og reference siderne åbnes.