Generatore di mappa immagine responsive

Disegna aree cliccabili su un'immagine e genera HTML/CSS responsive.

  • Nessun upload
  • Coordinate percentuali
  • HTML + CSS

Immagine

22%

Carica un'immagine e trascina per disegnare un'area cliccabile. Trascina le maniglie per ridimensionare. I file restano nel browser.

Carica un'immagine per iniziare.

Link delle aree

#URL linkTesto altTitoloW %H %DestinazioneElimina

Codice

HTML / CSS separati producono un tag link e un file CSS. L'import legge data-rh-wrap / data-rh-link e i link inline.

Come funziona

Carica un'immagine e trascina per disegnare un'area link. Le posizioni sono in percentuale, quindi le aree restano allineate al ridimensionamento. Regola la dimensione dalle maniglie, compila URL, alt e titolo, poi copia HTML/CSS o salva il CSS in un file.

Consigli

  • Usa un'immagine chiara con aree cliccabili distinte; le aree sono rettangoli.
  • Metti alt per gli screen reader e title per il suggerimento al passaggio del mouse.
  • Controlla il risultato su PC e mobile prima di pubblicare.
  • Stili inline per incollare subito; modalità classe se il CSS del sito può sovrascriverli.

Domande frequenti

L'immagine viene caricata?

No. Immagine e modifiche restano nel browser. Niente viene inviato a beancuit o ad altri.

Quali immagini funzionano?

Banner, immagini prodotto e guide con aree cliccabili chiare. Le posizioni sono in percentuale, quindi le aree restano allineate al ridimensionamento.

Come uso il codice generato?

Copia HTML e CSS nel sito, oppure scegli HTML / CSS separati e salva il CSS in un file.

Stili inline o classi?

Inline è il più rapido da incollare. La modalità classe usa una classe padre casuale per ridurre i conflitti con il CSS del sito.

Tag correlati

Altri strumenti

I risultati sono solo indicativi. I calcoli possono essere errati e non costituiscono consulenza legale, medica o finanziaria. Prima di decisioni importanti verifica sempre con l'autorità competente o un professionista.

Cerca