• _blank - apre la pagina in una nuova finestra
• _self - carica la pagina nella finestra corrente
• _parent - carica la pagina nel frame genitore
• _top - cancella tutti i frame e carica la pagina nell'intera finestra del browser

5. Titolo attributo = "(! LANG: suggerimento" - выводит всплывающую подсказку. можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »!}

6. Attributo nohref - rende l'area inattiva. Usato quando si sovrappongono oggetti. Viene usato raramente, ma a volte può essere una soluzione indispensabile. Ad esempio, puoi rendere inattivo un cerchio piccolo all'interno di un cerchio grande.

L'area nohref deve andare per prima.

Codice di esempio:

L'uso di una mappa di collegamenti nell'immagine avviene solo in una gamma ristretta di attività. Ad esempio, quando si crea un qualche tipo di schema o mappa di guida. In altri casi, l'utilizzo di una mappa per creare menu e altri elementi grafici sembra irragionevole.

"Ho creato un modello per inserire collegamenti a diverse pagine Web su alcune parti di esso (" ")

Ora, se clicchi sulle forme con le scritte, si apriranno le pagine corrispondenti: profilo, diario o tutti i post della sezione "Lezioni di Photoshop" (attenzione! Dopo che il blog è stato trasferito su WordPress e le sue modifiche, i collegamenti non lavoro! Ma la lezione rimane rilevante!)

Affinché l'immagine funzioni, ho scritto qualcosa come questo codice HTML:

Questo codice può essere inserito nel campo del messaggio (con il pulsante "Sorgente" premuto) o nell'epigrafe ...

A proposito, ci sono altri post sull'argomento: “Che cos'è l'HTML ","Codice HTML delle immagini ","Collegamento immagine "e così via.

1. Coordinate

Per comporre il codice specificato, ho ricordato un po' la geometria :)

Sistema di coordinate: asse X - dall'alto verso il basso, asse Y - da sinistra a destra
Per impostare le coordinate della figura, è necessario impostare:
- un quadrato (o rettangolo), i cui lati sono paralleli agli assi - le coordinate di due angoli opposti - X1, Y1 e X2, Y2
- poligono - coordinate di TUTTI gli angoli
- cerchio - coordinate del centro e raggio.

Nel mio caso, abbiamo bisogno delle coordinate dei punti A, C - per il collegamento "Profilo" (rettangolo), punti D, E, F, G, H - per il collegamento "Diario" (poligono), Q e lunghezza R - per il link " Tutorial Photoshop (cerchio). Tutti questi numeri sono evidenziati in rosso nella parte superiore del codice HTML. Inoltre, è necessario conoscere la dimensione dell'immagine in pixel (verde)

Non è necessaria una precisione speciale, quindi puoi scoprire le coordinate usando il "righello" in Photoshop - per chiamarlo premo Ctrl + R

Era più interessante per me che qualcun altro calcolasse le coordinate. Per fare questo, corro MS Paint(Start - Tutti i programmi - Accessori - Paint) e apri l'immagine al suo interno. Quando passi con il mouse sui punti desiderati nel pannello inferiore, appaiono le loro coordinate, che scrivo attentamente

2. Codice HTML

Le mappe di navigazione sono specificate dal tag

Il tag della mappa include tag che definiscono le aree geometriche della mappa dell'immagine e i relativi collegamenti.

L'ho capito in questo modo: per creare una mappa di navigazione è necessario:

— tag di descrizione dell'immagine

— tag della mappa

— tag di area

Nel mio caso, i valori si sono rivelati così:

• larghezza = "640" altezza = "367"- dimensioni dell'immagine
• src = "https: //site/f02c73a3cd94.jpg" - indirizzo dell'immagine sul sito
• mappa d'uso = "# foto "- il nome convenzionale della mappa-immagine (può essere qualsiasi)
• nome della mappa = "Foto"- nome della carta (completamente corrispondenze sopra)

I valori per le aree di riferimento - href - il target del collegamento, shape - la forma dell'area e coords - le coordinate - corrispondono alle tre aree nell'immagine.

Rettangolo "Profilo"

• href = "https: // sito / profilo /" - indirizzo della pagina del profilo
• shape = "rect" - designazione della forma "rettangolo"
• coords = "235,61,472,117" - coordinate dei punti A (235,61) e C (472,117)

Poligono "Diario"

• href = "https: // site/blog" - l'indirizzo della pagina del blog
• forma = "poli" - designazione della forma "poligono"
• coords = "235,118,362,118.474,152.457,207,229,146" - le coordinate degli angoli del poligono: punti D (235,118), E (362,118), F (474,152), G (457,207) e H (229,146)

Cerchio di tutorial di Photoshop

• href = "https: //site/showjournal.php? journalid = 2447247 & keywordid = 929323" - URL della pagina dei post dalla sezione "Tutorial di Photoshop"
• forma = "cerchio" - designazione della forma "cerchio"
• coords = "551,198,65" - coordinate del cerchio: centro - punto Q (551,198) e raggio - R = 65

3. Fine

Ho sostituito tutti i valori ottenuti nel "sistema" del codice HTML per l'immagine della mappa di navigazione e ho ottenuto quanto segue:

È questo codice che, se utilizzato, "si trasforma" in un'immagine con aree di collegamento.

Per la formazione, esiste un'opzione facile "leggera" per la creazione di siti di collegamento: il post "Formazione: aree di collegamento sull'immagine"

Se trovi un errore, seleziona una parte di testo e premi Ctrl + Invio.

Ciao amici. In questo video continueremo a parlare di mappe immagine in HTML. Ma prima, ricordiamo di cosa abbiamo parlato nell'ultimo video. Il fatto è che questi video sono abbastanza strettamente correlati e per capire di cosa si tratta, devi guardare i video precedenti dalla sezione delle immagini.

Nell'ultimo video tutorial, abbiamo appena iniziato a familiarizzare con le mappe di immagini in HTML. Abbiamo visto come dovrebbe apparire alla fine, tuttavia, con l'uso di script. Abbiamo parlato un po' di coordinate. Cioè, come li definiremo. Come puoi ricordare, ho optato per uno dei metodi, questo è il metodo che utilizza l'attributo ismap, poiché, secondo me, questo metodo per determinare le coordinate è il più semplice e il meno complicato, il che significa che ci si addice.

Di conseguenza, nell'ultimo video abbiamo creato un collegamento all'immagine. E poi dall'immagine è stata creata una mappa immagine lato server, che ci aiuterà a determinare le coordinate degli hotspot.

Ora è il momento di iniziare a creare direttamente una mappa immagine in HTML. In questo video tratteremo molte informazioni, partendo dalla teoria e passando alla pratica.

Iniziamo esaminando altri due tag HTML, questi sono tag

Mappa dei tag HTML.

Etichetta

Questo tag ha l'attributo name richiesto. In cui dobbiamo specificare il nome della nostra mappa immagine. Inoltre, vale la pena notare che questo tag non è un elemento di blocco, il che significa che deve essere scritto all'interno di un elemento di blocco, ad esempio un tag di paragrafo o un tag div universale.

Area tag HTML.

Etichetta responsabile della specificazione degli hotspot all'interno del container

Determinazione delle coordinate di un quadrato, rettangolo, cerchio e poligono.

Anche in questo video tutorial analizzeremo in modo molto dettagliato come determinare correttamente le coordinate per una determinata figura. Quante coordinate dovrebbero esserci per una certa forma. Ciò è dovuto al fatto che ogni forma di base ha il proprio insieme di coordinate e l'ordine in cui vengono ottenute.

Innanzitutto, considereremo in dettaglio in teoria come determinare le coordinate per un quadrato, quindi per un cerchio e infine per un poligono.

Successivamente, utilizzando un esempio dal vivo, determineremo le coordinate del quadrato e del rettangolo. Quindi definiamo le coordinate del cerchio. E infine, indichiamo le coordinate del triangolo, che a sua volta svolge il ruolo di un poligono.

Tutto sommato, questo video sarà un tutorial molto utile per chiunque sia interessato all'argomento della creazione di mappe di immagini in HTML.

Esercitazione video: creazione di una mappa immagine in HTML.

Riferimento HTML e altri materiali possono e devono essere scaricati!

Nel prossimo video tutorial, esploreremo finalmente l'argomento della creazione di mappe immagine, parleremo dell'ultimo attributo del tag usemap, che ci aiuterà ad associare un'immagine a una mappa immagine. E considera un altro paio di esempi dal vivo di mappe di immagini in immagini diverse.

In documento html.

Ora scopriamo cos'è una mappa immagine.
Con l'aiuto di una mappa immagine, puoi fare in modo che quando fai clic su aree diverse della stessa immagine, verrai indirizzato a pagine diverse. Una mappa immagine è anche chiamata mappa di navigazione da alcuni.
Capisco che è difficile capirlo a parole, quindi propongo di vedere un esempio di come appare una mappa immagine nella vita reale.
Attenzione: l'immagine è una, ma le aree e il percorso di transizione sono diversi.

Niente paura, non è affatto difficile. La cosa più importante è capire la teoria e metterla in pratica.

Bene, passiamo alla teoria.

Le mappe immagine (mappe nautiche) sono specificate dal tag .
Etichetta - questa è la scatola all'interno della quale sono posizionati i tag .
Etichetta ha lo scopo di definire un'area geometrica con un collegamento ancorato a ciascuna area.

Attributi dell'area

1. Attributo forma
forma - definisce la forma dell'area ( rettangolo, cerchio, poligono).
Il rettangolo è "retto". Esempio: forma = " retto";
cerchio - "cerchio". Esempio: forma = " cerchio ";
poligono - "poli". Esempio: forma = " poli"

2. Attributo delle coordinate
coords è la posizione della forma geometrica.

Diamo un'occhiata a un esempio sulla forma geometrica di un rettangolo.

Sai già che se hai bisogno di una forma rettangolare, allora devi scrivere un valore nell'attributo shape « retto ».

L'origine inizia dall'angolo in alto a sinistra dell'immagine, le cui coordinate sono (0; 0)

Quindi, è necessario specificare le coordinate dell'area di lavoro negli angoli in alto a sinistra e in basso a destra del rettangolo.

Per l'esempio con il rettangolo n. 1, prendi le seguenti coordinate:

x1 = 25, y1 = 36, x2 = 114, y2 = 98

Ecco come apparirà il codice:

Fin qui tutto bene. Ma ora dobbiamo collegare l'immagine alla mappa.
Per fare ciò, scegli un nome qualsiasi per la carta, ad esempio "karta1" e scrivilo nel tag

Ora colleghiamo la mappa all'immagine. Per questo usiamo l'attributo usemap.
Un esempio di scrittura:
usemap = "# nome_mappa"

Nel nostro caso, sarà simile a questo:

Ora mettiamo tutto insieme e scriviamo più coordinate in un altro rettangolo №2 con tali dati (x1 = 153, y1 = 11, x2 = 219, y2 = 127).

Ora guarda il risultato. Fare clic sul rettangolo n. 1 e sul rettangolo n. 2

Per prima cosa è necessario specificare il tipo di area. Per fare ciò, scriveremo il valore "cerchio" nell'attributo shape.

Passiamo ora alle coordinate.
Per creare le coordinate per un'area circolare, è necessario scrivere i dati al centro (xy) e specificare la lunghezza del raggio (R).
L'ordine di scrittura delle coordinate per l'attributo coords sarà il seguente:

Per il cerchio numero 1, prendi le seguenti coordinate:

x = 46, y = 48; e la lunghezza del raggio è R = 35

Ora mettiamo tutto insieme e scriviamo più coordinate per il cerchio numero 2 con tali dati x = 158, y = 75, R = 53.

Ora guarda il risultato. Fare clic sul cerchio numero 1 e sul cerchio numero 2:

L'area poligonale è l'area più difficile della carta nautica.

Innanzitutto, è necessario specificare il tipo di area. Per fare ciò, scrivi il valore "poly" nell'attributo shape

Passiamo ora alle coordinate.

L'ordine di scrittura delle coordinate per l'attributo coords sarà il seguente:

Una precisazione:
x1, y1 - coordinate della prima curva;
x2, y2 - coordinate del secondo angolo;
xN, yN - coordinate dell'ultimo angolo

Cioè, per il poligono n. 2 appare così:

Ora diamo un nome alla mappa e colleghiamo la mappa all'immagine:

Ora mettiamo tutto insieme e scriviamo più coordinate all'esagono n. 1 con i seguenti dati: x1 = 54, y1 = 20, x2 = 109, y2 = 20, x3 = 147, y3 = 58, x4 = 109, y4 = 96 , x5 = 54, y5 = 96, x6 = 16, y6 = 58.

Ora guarda il risultato. Fare clic sul poligono n. 1 e sul poligono n. 2:

Possibilità di combinazione

Ci sono casi in cui è necessario utilizzare aree diverse contemporaneamente nella stessa immagine, ad esempio un cerchio e un rettangolo:

Imbottitura utilizzando TITLE

Per ogni area, puoi scrivere suggerimenti utilizzando l'attributo title.

Ora guarda il risultato. Sposta il cursore del mouse sul cerchio e poi sul rettangolo:

È tutto. Con la mappa immagine in HTML (mappa di navigazione), l'abbiamo capito.

HTML - Lezione 15. Mappe di navigazione - mappa

Tali mappe immagine possono essere lato client e lato server. I collegamenti delle mappe client sono memorizzati nel documento stesso e, facendo clic con il mouse, il browser stesso determina a quale area si riferiscono le coordinate di questo punto e segue il collegamento desiderato.

Nella versione server, queste coordinate vengono prima trasmesse al server, lì elaborate da un apposito programma, e solo dopo viene seguito il collegamento, ovviamente sono preferibili mappe di navigazione lato client. Li considereremo.

Ad esempio, diciamo che siamo un negozio di elettrodomestici e nell'intestazione del nostro sito abbiamo la seguente immagine:

Facciamone una mappa di navigazione, ad es. cliccando su un frigorifero si accede alla pagina dedicata ai frigoriferi (con modelli, descrizioni e prezzi), cliccando su aspirapolvere e lavatrice alle rispettive pagine.

Per fare ciò, dobbiamo descrivere le aree in questa immagine che saranno collegamenti. I tag sono usati per descrivere tali aree. con un solo parametro nome, che specifica il nome della mappa di riferimento e viene quindi utilizzato per fare riferimento a questa mappa.

• forma- definisce la forma dell'area, può assumere i seguenti valori:
  • retto- area sotto forma di rettangolo,
  • cerchio- un'area a forma di cerchio,
  • poli- un'area a forma di poligono,
  • predefinito- l'intera area.
• cootds- imposta le coordinate di un'area separata:
  • per retto vengono impostate le coordinate degli angoli superiore sinistro e inferiore destro del rettangolo,
  • per cerchio si impostano le coordinate del centro del cerchio e del raggio,
  • per poli specifica le coordinate dei vertici del poligono nell'ordine desiderato.
• href- definisce l'indirizzo del collegamento.
• obbiettivo- viene utilizzato quando si utilizzano i frame e indica il frame in cui caricare la pagina.
• alt- imposta un testo alternativo per l'area.

Per questi scopi, di solito viene utilizzato un programma, ad esempio Image Ready, che ha uno strumento speciale per delineare le aree e costruisce automaticamente le descrizioni di queste aree. L'esame del funzionamento di questi programmi non è incluso nel corso HTML, quindi qui imposteremo le coordinate "a occhio". Dai un'altra occhiata alla nostra immagine:

La nostra immagine è larga 738 pixel e alta 192 pixel. Tracciamo linee lungo i confini delle nostre aree e determiniamo approssimativamente le coordinate. Ora siamo pronti per aggiungere questi parametri ai nostri tag. .

Ora le nostre aree sono diventate collegamenti (se muovi il cursore del mouse, si trasforma in un palmo). Non ci sono pagine di frigoriferi su questo sito, quindi i link portano alla stessa pagina, ma se crei le pagine che desideri, cliccando sull'area salterà.

Questo conclude le nostre lezioni. Hai familiarità con tutte le funzionalità del linguaggio HTML. Per consolidare le tue capacità, leggi le due lezioni Realizzazione di un sito web - layout di fogli di calcolo.

Infine, devo dire che ci sono altri due grandi elementi in HTML: i tag