Kako napraviti sliku u slici s vezom? Kako umetnuti vezu u sliku

Izrada bannera i mape web mjesta, novinari webmasteri su suočeni s takvim problemom kao umetanje veze u sliku, što je izbornik svjetliji i zanimljiviji. Ali kako to učiniti? Ništa je lakše ako znate jezik HTML-a.

Otkrijmo kako provesti ovaj pothvat u stvarnost. U ovom ćemo članku ponuditi dvije mogućnosti za rješavanje problema. Jedan se rijetko koristi zbog činjenice da je potrebno puno vremena i truda, drugi se smatra dobro poznatim. Razgovarat ćemo o oba načina.

Gdje se koristi slikovna veza

Prije nego što razgovaramo o tome kako napraviti sliku na slici vezu, shvatit ćemo gdje i za što se koriste. To će olakšati razumijevanje onoga što želimo od slike.

Slike-linkovi se obično koriste kao banneri koji se pozivaju na promotivne crteže. Primjer toga može poslužiti kao slika u istom "VKontakte". Sjećate li se koliko puta ste ikad kliknuli fotografiju na kojoj je ugrađena određena adresa? Osim toga, vrlo često se koriste kao grupe izbornika i zajednice, posebno ako sadrže posebne unose. Mnogo takvih slika nalazi se na drugim mjestima.

Umetnite vezu na fotografiju

Najjednostavnija stvar je slikovna veza. Prvo ćemo razgovarati o tome. Ova ilustracija je spremna referenca. Na taj način, kliknete na takvu sliku, bit ćete preusmjereni na novu stranicu.

Ako znate kako se normalna veza postavlja pomoću HTML oznaka, ne biste trebali imati problema. Jedina je razlika u tome što umjesto teksta veze određuje se slika.

Dakle, za provedbu njegov plan, morate samu sliku, stavili na internet ili pohranjene na računalu (ovisno o tome da li se radi u online modu, zapravo na mjestu, ili zadeystvuete urednika).

Tražimo adresu slike, zapišimo ga kako ne zaboravimo. Također ispravite vezu koju ova fotografija treba otvoriti.

Tada pišemo sljedeće: slika - posebni kod. S njom je postavljena slikovna veza.

Tako propisujemo vezu koja se prikazuje kao ilustracija. Vrlo jednostavno i jednostavno. Ali to će funkcionirati samo ako mislite da bi na njemu trebalo biti samo jedna veza. Što ako bi trebalo biti više od jednog? Zatim prelazimo na druge mogućnosti.

Izradite izbornik sa slike

Prva metoda razvijena je neovisno tijekom proučavanja označnog jezika web stranica. Izrada takvog izbornika može potrajati nekoliko sati.

Ova metoda pogodna je za one koji se vole zabavljati s različitim urednicima, jer je prilično naporan i traje dulje od stvaranja izbornika ili karte na drugi način. Sastoji se od činjenice da je snimljena slika, koja je izrezana na nekoliko traka ili kvadrata. Svaka slika je potpisana i na njemu je stvorena veza, kako je gore opisano. Nadalje u kodu stranice oznake se pišu u željenom redoslijedu. To je sve, pitanje kako napraviti sliku na slici s vezom gotovo je riješeno. Ali nemojte zaboraviti na drugu opciju.

Izraditi će izbornik sa samo jednom slikom, dodjeljivanjem reference za svako područje ilustracije. Nemojte se bojati, nema ništa ekstremno u ovome. I sada o svemu u redu.

Kako napraviti

Let`s uzeti bliži pogled na prvi način.

Za početak, trebat će vam poznavanje grafičkih urednika i HTML-a. Kao slika za povezivanje, ova vrsta izgleda stranice će vas upitati.

Dakle, ako odlučite ići tako, trebat će vam slika i jednostavan grafički urednik koji vam omogućuje da rezati slike i stavite natpise na njih, kao i mjesto gdje ih možete ispuniti.

Ako je to vaš vlastiti site - prikladna je obična galerija ili biblioteka datoteka, za "VKontakte" to može biti grupni ili zajednički album (po mogućnosti zatvoren).

Dalje, trebali biste rezati sliku na dijelove, sjetivši se redoslijedom u kojem dijelovi dolaze. Na njih smo stavili natpise i napunili ga s poslužiteljem, zapisujemo veze na svaku ilustraciju.

Uzimamo gore navedeni kôd i zamijenite tražene podatke tamo. Zatim popunite slike na mjestu u redoslijedu kojim bi trebali ići. U tom slučaju, ako ga prerežete na trake, trebate postaviti svaku vezu s nove linije, ali ako podijelite fotografiju u kvadrate, morate staviti što više veza u retku kada su se kvadrati ispali.

Izrada web lokacije

Dakle, ako niste zadovoljni s prvom opcijom i želite saznati kako načiniti sliku na slici vezu na drugačiji način, možemo Vam ponuditi razvoj karte veza. Lakše je, ali samo mogu postojati problemi pri postavljanju parametara. Zašto, dalje ćete shvatiti.

Prvo, trebali bismo se sjetiti da je kazalo je spojen na slici pomoću naredbenog usemap = „# map1, koji je propisan u tag IMG Dakle, punjenje sliku na mjestu, svakako dodati oznaku u drugom dijelu - Usemap. =” Ime karti #”.

Daljnje označavanje slike u zonama na koje su veze povezane obavlja se pomoću parne oznake , koji se može postaviti na bilo kojem mjestu prikladnom za vas između uparenih oznaka .

Imajte na umu da, kada koristite ovu vrstu kreiranja karte, trebate navesti ne samo veze, već i područja djelovanja i koordinate. Zatim ćemo analizirati osnovne parametre koje ova oznaka ima.

Opcije veze

Dakle, imate gotovu slikovnu vezu pred vašim očima. HTML vam omogućuje značajno poboljšanje funkcionalnosti ove slike - kako biste na njoj istaknuli određeno područje za referencu. Sve je to postavljeno pomoću posebnih parametara, koji će se sada raspravljati.

Razgovarajmo o osnovnim parametrima oznake parova

Dalje unutar uparene oznake

Prvi je oblik. Uz to, webmaster postavlja prikaz područja. Može biti:

• krug - krug;
• pravokutnik;
• poligon-poli;
• ostatak slike je zadana.

Sljedeća je coords. Koristi se za postavljanje koordinata područja u pikselima. Podrijetlo ovog koordinatnog sustava je gornji lijevi kut. Tu se nalazi glavni problem - to nije tako lako odrediti koordinate pomoću piksela, pogotovo ako ne znate računalne grafike.

Spomenimo i prilično dobro poznatu href, koja postavlja adresu veze.

A zadnji parametar koji treba spomenuti jest nohref. Označava da navedeni opseg nije veza.

Naravno, ovo nije potpuni popis parametara koji se mogu postaviti na sliku ili kartu. Ali istodobno je dovoljno stvoriti svijetlu i šarenu vezu ili čak čitav sustav njih.

Savjet

Kakav način za stvoriti referentnu sliku niste odabrali, glavna stvar je da je originalna slika dobra. Pokušajte odabrati one crteže koji ne dolaze u oči, nemojte se nadraživati ​​svijetlim bojama ili uzorcima. To je osobito važno za kartu web-lokacije. Možeš napraviti kolaž od nekoliko fotografija, da ih zamračite ili uključite jedan od filtera u bilo koji grafički urednik.

Prilikom izrade mape web mjesta, preporučuje se odabrati slike s mekim, ne-iritirajućim uzorcima. Vjerujte mi, ne uvijek ključ uspjeha je svijetla slika - veza. "VKontakte", međutim, često se usredotočuju na svjetlinu i sjaj, kako bi privukli nove posjetitelje.

nalazi

Zaključimo. Saznali smo kako izraditi sliku u slici s vezom, a pogledali smo dva načina na koje možete jednako uspješno koristiti za izradu izbornika različitih stupnjeva složenosti. Osim toga, shvatili smo kako postaviti sliku veze, a saznali smo i o osnovnim parametrima koji omogućuju stvaranje prilično prikladne karte web mjesta, grupe ili zajednice.