Jak vytvořit odkaz bez programování

Webové stránky často obsahují různé kresby, které lze použít k upoutání pozornosti návštěvníků a vizuálnímu designu obsahu. Někdy chcete, aby byl obrázek kliknutelný a přesměroval uživatele na jinou stránku. Co ale dělat, když nemáte zkušenosti s programováním? Řekneme vám, jak vytvořit obrázek odkazem, aniž byste museli psát kód.

Pro vytvoření klikacího vzoru s odkazem bez programování stačí použít jednoduché HTML tagy a další atributy. Nejprve nahrajte obrázek, který chcete odkazovat, na svůj webový server nebo hosting obrázků. Poté zabalte do značky nebo , podle toho, zda chcete odkaz ztloustnout nebo zvýraznit. Do značky umístěte značku, která obsahuje atributy src a alt, které označují cestu k obrázku a jeho alternativní text.

Po kliknutí na obrázek bude uživatel přesměrován na Vámi zadanou adresu. Kresbu tak můžete snadno vytvořit jako klikací odkaz, aniž byste se uchýlili k programování a používali pouze jednoduché značky HTML.

Obrázek jako odkaz

Někdy může být nutné, aby byl obrázek kliknut a přeměněn na odkaz. To může být užitečné například pro vytvoření galerie obrázků nebo pro přidání odkazu na velkou verzi obrázku.

Vytvoření odkazu na externí zdroj:

Tímto způsobem se kresba stane klikací a povede na stránku nebo zdroj uvedenou v atributu href. V tomto případě zůstává kresba vizuálním prvkem na stránce.

Chcete-li značku použít, musíte identifikovat oblasti na obrázku, které budou odkazy. To se provádí pomocí značky . Uvnitř značky je uveden tvar oblasti (kruh, obdélník, polygon) a její souřadnice.

Příklad použití značky :

V tomto příkladu máme obrázek se dvěma oblastmi. První oblast je obdélník se souřadnicemi (50,50,200,200) a je odkazem na Google. Druhá oblast je kruh se souřadnicemi (250,150,100) a je odkazem na Example.

Když najedete na příslušnou oblast obrázku, změní se ukazatel myši na ruku a kliknutím na ni přejdete na uvedený odkaz.

Použití značky tak umožňuje vytvořit kresbu odkazem bez nutnosti programování.

Obrázek jako odkaz na pozadí

Pokud chcete vytvořit odkaz na kresbu, ale nechcete používat programování, pak jedním z jednoduchých způsobů bude použití obrázku jako odkazu na pozadí.

K tomu budete potřebovat odkaz na obrázek, který chcete použít. Můžete jej uložit do počítače nebo použít odkaz z internetu.

Poté přidejte styl pro zadání pozadí odkazu pomocí značky , ve které nastavte vlastnost background-image a jako hodnotu označte odkaz na obrázek. Například:

• • a
  • background-image: url(https://www.example.com/image.jpg);
  • >

  Nyní, když uživatel najede kurzorem na odkaz, zobrazí se s vámi zadaným vzorem jako pozadí. Kliknutím na odkaz přejdete na zadanou stránku nebo soubor.

  Obrázek ve tvaru tlačítka

  Pokud chcete obrázek proměnit v odkaz, který bude vypadat jako tlačítko, můžete použít prvek a nastavit mu styl tlačítka pomocí CSS.

  2. Nastavte obecné styly pro odkazové tlačítko zadáním názvu třídy tagu nebo použitím stylů přímo v atributu style .

  3. Přidejte styly pro tlačítko pomocí CSS. Můžete například nastavit barvu pozadí, barvu textu, odsazení atd.

  / * V souboru CSS nebo ve štítku */

  .button-link .button-link:hover

  Výsledkem je, že váš obrázek bude vypadat jako tlačítko a po kliknutí na něj se provede odpovídající odkaz.