Vytváranie obrazových odkazov a obrazových máp

• Smieť 19, 2024

Odpoveď na tento týždeň je odpoveďou na otázku čitateľa - „Môžete vysvetliť, ako vytvoriť odkaz na obrázok na stránku v HTML“. Pre prepojené obrázky môžete použiť niekoľko rôznych techník. Jedným je prepojenie celého obrázka s HTML a druhým je vytvorenie obrazovej mapy - kde sú rôzne časti toho istého obrázka spojené s rôznymi miestami.

Prepojený obrázok v HTML

Prepojenie malého obrázka alebo ikony je veľmi jednoduché. Všetko, čo musíte urobiť, je umiestniť odkaz na obrázok do hypertextového odkazu takto:



Všetko, čo som tu urobil, bolo vložiť obrázok do html pre odkaz. Toto je najjednoduchší a najúčinnejší spôsob prepojenia malého obrázka a často sa to robí pomocou vlastných guľiek, ikon atď. Čo však ak chcete, aby sa jeden veľký obrázok prepojil na niekoľko rôznych miest? Toto je miesto, kde sa hodí krájanie obrázkov.

Krájanie obrázkov vo Photoshope

To je vo Photoshope veľmi ľahké. Mali by ste použiť obrázok, ktorý nie je príliš zložitý, pretože chcete, aby vaši používatelia mohli jasne vidieť, kam na obrázok kliknú. Svojim používateľom tiež chcete zaistiť, aby pochopili, že musia kliknúť na obrázok, aby sa dostali tam, kam idú. Opatrne vyvíjajte obrázkové mapy s ohľadom na používateľa. Nezabúdajte, že obrazové mapy nie sú zvyčajne tak priateľské pre vyhľadávače ako text na stránke, môže to však pomôcť správne použitie značiek alt v rámci častí obrázka.

Po vytvorení obrázka je ďalším krokom jeho „rozrezanie“. Ikona nástroja na plátky vyzerá ako malý presný nôž. Nachádza sa v hornej časti panela nástrojov a nachádza sa pod nástrojom na orezanie - ak kliknete na ikonu „Orezať“, zobrazia sa nástroje na výber rezov a rezov.

Vyberte nástroj rezu, podržte ľavé tlačidlo myši nadol a opatrne potiahnite rez na požadované miesto a potom ho uvoľnite. Choďte ďalej a pokračujte v krájaní celého obrázka. Okolo každej oblasti obrázka, ktorú chcete prepojiť s inou stránkou, by mal byť výrez. Každá veľká biela oblasť môže byť jedným plátkom.

Po úplnom rozrezaní obrázka je ďalším krokom použitie nástroja na výber segmentov, kliknutie na jednotlivé segmenty a odtiaľ výber typu segmentu „image“. Pod ním vyplňte webovú adresu, na ktorú chcete tento výrez nasmerovať, a potom dole pole pre značku alt. Ostatné polia nie sú potrebné na jednoduché mapovanie obrázkov. Rovnakým spôsobom sa posúvajte cez každý segment, až kým nebude celý obrázok zmapovaný.

Po dokončení celého obrázka použijete možnosť „uložiť na web a zariadenia“. Ak kliknete na „Súbor“ hore a pozriete sa pod obvyklé možnosti uloženia, zobrazí sa možnosť na uloženie na web a zariadenia. Vyberte túto možnosť a otvorí sa dialógové okno, kde si môžete zobraziť ukážku toho, ako bude váš obrázok vyzerať. Ak ste s tým spokojní, stlačte tlačidlo Uložiť a otvorí sa ďalšie dialógové okno. Uistite sa, že druhá možnosť hovorí „uložiť obrázky a HTML“, a potom svoju prácu uložiť.

Prejdite do priečinka, do ktorého ste uložili dokument HTML, a otvorte ho. Tento kód môžete skopírovať a vložiť do svojho vlastného súboru HTML. Obvykle bude tento kód HTML trochu nedbalý. Ak ovládate jazyk HTML, môžete si ho vyčistiť podľa svojich predstáv, ale malo by to fungovať rovnako dobre. Uistite sa, že ako vždy sú vaše obrazové súbory atď. Na správnom mieste, inak sa váš obrázok nezobrazí.

Video Návody: 2017 Personality 04/05: Heroic and Shamanic Initiations (Smieť 2024).