Sådan Opdater en HTML billede Kort over området med JavaScript

August 20

Billede kort er HTML konstruktioner, der anvendes til at gøre visse områder af billeder på din webside i klikbare hyperlinks. Et billede kort er knyttet til et billede via "USEMAP" attribut; ligesom de fleste komponenter i HTML Document Object Model (DOM), kan denne attribut tilgås og ændres om flyve med JavaScript-kode til at opdatere billedet kortet er knyttet til et billede.

Instruktioner

1 Indsæt følgende JavaScript-kode mellem "hoved" tags i dit HTML-dokument:

<Script type = "text / javascript">

funktion swapMap (id, kort) {

document.getElementById(id).useMap='#'+map;

}

</ Script>

2 Tilføj et billede og et billede kort til kroppen af ​​dit HTML-dokument med følgende kode:

<Img id = "image1" width = "500" height = "500" USEMAP = "# MAP1" />

<Map name = "MAP1">

<Område shape = "rect" COORDS = "0,0,250,500" href = "#" />

</ Map>

Ændre "src" attribut af "img" tag til at matche dit billede URL. Den "form" og "COORDS" attributter af "område" tag bruges til at lave den venstre halvdel af billedet klikbare. Den "href" attribut kan anvendes til at linke til andre sider, ligesom med anker elementer.

3 Tilføj et andet billede kort til kroppen, og et par knapper, der påberåber sig den "swapMap" funktion til at opdatere billedet kortet er knyttet til dit billede:

<Map name = "MAP2">

<Område shape = "rect" COORDS = "250,0,500,500" href = "#" />

</ Map>

<Input type = "knappen" value = "Brug Kort 1" onClick = "swapMap ( 'image1', 'MAP1');" />

<Input type = "knappen" value = "Brug Kort 2" onClick = "swapMap ( 'image1', 'MAP2');" />

Dette billede map blot dækker højre halvdel af billedet i stedet for venstre. Knapperne kalder "swapMap" funktion er defineret i afsnittet "hoved", der leverer den unikke "id" attribut af billedet at blive påvirket, og navnet på kortet for at tildele. Call "swapMap" i andre JavaScript rutiner eller ved at bruge event handlere til at producere den specifikke adfærd, du ønsker.

4 Gem siden og indlæse den i en webbrowser. Pass musemarkøren over den venstre halvdel af billedet, og bemærk, at det ændrer at angive regionen er klikbare. Klik på knappen "Brug Kort 2" og se, at den højre halvdel af billedet er nu klikbart stedet; billedet kortet er blevet opdateret.


relaterede artikler