html image forbindelser

, vi har set, hvordan man skaber hypertext forbindelse med tekst, og vi har også lært at bruge billeder på vores netsted.nu vil vi lære at bruge billeder til at skabe hyperlinks. f.eks. det er let at betjene et image som et hyperlink.vi skal bare bruge et billede indeni hyperlink på det sted, hvor den tekst, som vist nedenfor, <!doctype html > < html > < head > < afsnit > image hyperlink eksempel < /afsnit > < /head > < krop > < p > klik på følgende link <. /p > < en href = "http://www.tutorialspoint.com" target - = "_self" > < img src = "[installdir_channeldir] {$uploaddir} /201511 /2015112711272911. men heller ikke dér er menneskene sikre" alat = "undervise" grænse = "0" /> < /en > < /organ > < /html > dette giver følgende resultat, hvor kan man se på billeder til at nå til en hjemmeside for tutorials.,, klik på følgende link, det var den nemmeste måde at skabe hyperlinks bruger billeder.dernæst vil vi se, hvordan vi kan skabe mus følsomme image forbindelser., mus følsomme billeder, html og xhtml standarder indeholder et element, der omfatter mange forskellige forbindelser lader dig i et enkelt billede.du kan skabe forskellige forbindelser på det billede, som er baseret på forskellige koordinater, der er til rådighed på billedet.når forskellige bånd, der er knyttet til forskellige koordinater, kan vi på forskellige dele af det billede, at åbne mål dokumenter.sådanne mus følsomme billeder er kendt som billede kort. der er to måder at skabe billede kort:,,, sserver side billede kort -, dette er muliggjort af den, ismap, attribut i < img > tag og kræver adgang til en server og beslægtede billede kort behandle ansøgninger, klient. side billede kort -, der er skabt med, usemap, attribut i < img > tag, sammen med tilsvarende < kort > og < område > hundetegn.,,, - serveren side billede kort, du bare put dit billede i en hyper - forbindelsen og brug ismap, egenskab, der gør det særlig image og, når brugeren klik et sted inden for det image, browser passerer koordinaterne for mus viser sammen med url - adresse, der er angivet i < en > tag til web - server.- bruger de mus viser koordinaterne til at afgøre, hvilke dokumenter til at levere tilbage til browseren. når, ismap benyttes, href attribut i indeholder < en > mærket skal indeholde adressen på en server anvendelse som en cgi eller på skrift osv. til at behandle indgående anmodning på grundlag af de døde koordinater. koordinaterne for mus holdning er skærmen pixels regnes fra den øverste venstre hjørne af det billede, der begynder med (0,0).koordinaterne, der indledes med et spørgsmålstegn, føjes til slutningen af url. f.eks. hvis en bruger klik 20 pixels over og 30 pixels fra de øverste venstre hjørne i det følgende billede:,, klik på følgende link,,, som er genereret af følgende kode snippet:, <!doctype html > < html > < head > < afsnit > ismap hyperlink eksempel < /afsnit > < /head > < krop > < p > klik på følgende link <. /p > < en href = "/cgi bin /ismap. cgi" target - = "_self" > < img ismap src = "[installdir_channeldir] {$uploaddir} /201511 /2015112711272911. men heller ikke dér er menneskene sikre" alat = "undervise" grænse = "0" /> < /a > < /organ > < /html > så browseren sender følgende parametrene til web - server, som kan behandles, ismap.cgi, manuskript eller kort fil, og du kan forbinde alle dokumenter, som de gerne disse koordinater:, /cgi bin /ismap.cgi?20,30, den måde du kan udpege forskellige links til forskellige koordinater i det billede, og når disse koordinater er sammen, kan du åbne tilsvarende knyttet dokument.for at lære mere om, ismap, attribut, du kan kontrollere, hvordan at bruge image ismap?note:,,,, du vil lære cgi programmering, når du vil studere perl programmering.du kan skrive manuskriptet til at behandle disse gik koordinater med folkesundhedsprogrammet eller enhver anden tekst, så godt.lad os koncentrere sig om læring html og senere kan du vende tilbage til dette punkt, klient side billede kort, klient side billede kort er muliggjort af den, usemap, attribut i < img /> tag og defineret af særlige < kort > og < område > udvidelse hundetegn., det image, som kommer til at danne kort indsættes i den side ved hjælp af < img /> tag, som en normal image, bortset fra, at det indebærer en ekstra attribut, usemap,.værdien af de usemap attribut er den værdi, der skal anvendes på < kort > tag mellem kort og image hundetegn.< kort > sammen med < område > tags definerer alle image, koordinerer og tilsvarende forbindelser. de < område > tag i kortet øremærke, angiver den form og koordinaterne til at definere grænserne for hver clickable hotspot tilgængelig på det billede.her er et eksempel fra billedet kort:, <!doctype html > < html > < head > < afsnit > usemap hyperlink eksempel < /afsnit > < /head > < krop > < p > eftersøgnings - og klik på den store < /p > < img src = /images /html.gif alat = html kort "grænse =" 0 "usemap ="&#html "/> <!- skabe konverteringer - > < kort navn = html "> < område form =" cirkel "coords =" 80,80,20 "href =" /css /index en.htm "alat =" css link "target - =" _self "/> < område form =" direkte "coords =" 5,5,40,40 "alat =" jquery link "href =" /jquery /index en.htm "target - =" _self "/> < /kort > < /organ > < /html > koordinere system, den faktiske værdi i coords er fuldstændig afhængig af den form for spørgsmål.her er en oversigt, der skal følges op af detaljerede eksempler:,,, direkte = x, y - 1, 1, 2, 2 x, y,,,,,,,, x og y, 1, 1, er koordinaterne for det øverste venstre hjørne af rektangel, x og y, 2 2, er koordinaterne for det nederste højre hjørne.,,, cirkel = x c y, c, radius, x og y c, c, er koordinaterne i midten af ringen, og radius er cirkels omkreds.en cirkel, centreret på 200,50 med en radius på 25 ville have attributten, coords = "200,50,25",,,, poly = x, y - 1, 1, 2, 2 x, y, x, y, 3, 3...x, y, n, n,,,, de forskellige x - y par definere toppunkter (punkter) af den polygon, med et "linje" trækkes fra et punkt til næste punkt.en diamant - formede polygon med højeste punkt på 20,20 og 40 pixels i bredest punkter ville have attributten, coords = "20,20,40,40,20,60,0,40",.,, alle koordinater er i forhold til den øverste venstre hjørne af billedet (0,0).hver form har en forretningsmæssigt forbundet url. du kan bruge et billede, software, ved, hvor forskellige holdninger.

Tutorials Point
Tutorials Point



Previous:
Next Page: