Hvordan velge en bildeområdet i HTML-koden
Når du oppretter kart, karttegnere bruke koordinater til å identifisere spesifikke steder på et kart. Matematikere bruker også koordinatene til å definere "x", "y" og "z" punkter på et rutenett. Webutviklere bruker koordinater for å forbedre leseopplevelsen og lage interaktive HTML bildekart. Ved hjelp av et bildekart kan du definere hot spots på et bilde. Når brukere klikker et område på bildet, vil kartet bildet utføre en handling som å åpne en nettside eller vise en pop-up.
Bruksanvisning
1 Start din HTML editor eller Notisblokk. Åpne en av HTML-filer.
2 Legg denne koden til "<body>" delen av dokumentet:
<Img alt = "image" usemap = "# mapTest" />
<Map name = "mapTest">
Den første linjen legger et bilde til siden din. Endre "xyz.jpg" til navnet på et bilde på harddisken. Den "usemap" eiendom definerer et bildekart som heter "mapTest." Den neste linjen skaper kartet bildet. Navnet, "mapTest," tilsvarer navnet i "usemap" eiendom.
3 Legg denne koden under koden i forrige trinn:
<Area shape = "rect" coords = "144,10,237,82" href = "xyz.com" />
Dette er en "<område>" tag. Den "navn" parameter er navnet på bildekartet. Du kan kalle dette noe som du liker. Den "form" parameteren definerer formen på denne delen av bildet. De mulige former er "rect", "circle" og "poly". I dette eksempel er formen et rektangel med koordinater på 144, 10, 237 og 82.
4 Erstatt "xyz.com" med navnet på nettstedet du vil åpne når en bruker klikker på bildeområdet. For eksempel erstatte "xyz.com" med "http://www.google.com" hvis du vil at leseren skal åpne Googles hjemmeside når du klikker på denne rektangulært område av bildet.
5 Legg denne koden under forrige "<område>" tag:
<areal form = "circle" coords = "90,58,3" href = "xyz.com" />
Dette definerer et sirkulært område med et senter på "90" og "58." Radius er "3." Erstatt "xyz.com" med navnet på en gyldig nettadresse.
6 Legg denne koden under forrige "<område>" tag:
<Area shape = "poly" coords = "10,25,55,74,120" href = "xyz.com" />
</ Kart>
Dette definerer en uregelmessig polygon med koordinater på de stedene som er vist. Erstatt "xyz.com" med navnet på en gyldig nettadresse. Den "</ kart>" tag avslutter bildekartet definisjon. Den komplette eksempel ser slik ut:
<Img alt = "image" usemap = "# mapTest" />
<Map name = "mapTest">
<Area shape = "rect" coords = "144,10,237,82" href = "xyz.com" />
<areal form = "circle" coords = "90,58,3" href = "xyz.com" />
<Area shape = "poly" coords = "10, 25,55,74,120" href = "xyz.com" />
</ Kart>
7 Lagre HTML-fil og vise den i nettleseren din. Som du plassere markøren på The Hot Spot steder, vil det endre til en peker.
8 Klikk på bildet hot spot. Nettleseren vil åpne nettsiden som du har definert for det området av bildet.
Hint
- For å få koordinatene til et bilde, må du bruke et bilderedigeringsprogram som Microsoft Paint eller Photoshop.