Le mappe immagine HTML vengono ancora utilizzate?

113

Le persone usano ancora le vecchie mappe immagine HTML? Quelli con:

<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...

O c'è un'alternativa più nuova e migliore?

html imagemap

— ss888
fonte

1

Quando chiedi se c'è qualcosa di meglio o no, dovresti fornire un mezzo per il confronto. Meglio in che modo o per quale scopo? Ci sono strumenti più potenti delle mappe immagine a nostra disposizione, anche più complessi ...

— Jeff Parker

2

Buon punto: non uso una mappa immagine da molto tempo e ho pensato che potesse essere stata sostituita da un metodo di codifica migliorato.

— SS888

1

Funzionalità basata su Javascript / layer e flash hanno sostituito le mappe immagine in quasi tutto ciò che ho incontrato ... Non ricordo l'ultima volta che ne ho visto uno in servizio attivo. Se hai uno scopo specifico in mente, tuttavia, una risposta più specifica potrebbe essere più facilmente disponibile :)

— Jeff Parker

21

Preferisco evitare Flash in questo giorno ed età lol.

— SS888

4

Se stai cercando qualcosa di veloce da fare, veloce da eseguire e solo leggermente malvagio, le mappe immagine faranno il lavoro. Non esiste una sostituzione ampiamente supportata che farà il lavoro alla stessa velocità secondo me. Ora, se hai tempo per SVG, Canvas e non ti dispiace escludere IE dall'elenco dei browser supportati ...

— Jeff Parker

53

Sì, le persone usano ancora le mappe immagine. Un'alternativa sarebbe posizionare gli elementi usando il posizionamento assoluto e CSS, ma non è necessariamente migliore. Inoltre non ti consente di avere forme come nelle mappe immagine

— JohnP
fonte

Ok, quindi le mappe immagine html sono ancora buone? Che ne dici di aggiungere effetti al passaggio del mouse / rollover?

— ss888

il mio problema principale con le mappe immagine è che, a differenza delle immagini a cui si associano, non si adattano alle dimensioni del browser o dello schermo. Spero che l'OP studi i formati SVG

— Martin

2

devi ridimensionarlo con le dimensioni dell'immagine. Rendere la dimensione dell'immagine relativa alla dimensione della finestra. quindi confrontando sempre il rapporto larghezza / altezza con il rapporto della mappa dell'immagine e quindi utilizzando javascript per sovrascrivere le coordinate. Il gestore di eventi della dimensione dell'immagine basato su jquery è $ (window) .resize (function () {.... yourcode ...});

— skidadon

46

Sono nella specifica HTML5 , quindi non verranno deprecati.

Puoi ancora usarli liberamente, sicuramente hanno ancora il loro posto nello sviluppo web. O potrei dire, esistono quelle rare occasioni in cui puoi risolvere meglio qualcosa con una mappa immagine.

— Kapa
fonte

19

Una soluzione alternativa all'uso di CSS o mappe immagine sarebbe quella di utilizzare la grafica SVG incorporata nel dominio HTML.

Un tutorial su come ottenere effetti mouseover utilizzando questa tecnica è descritto in questo tutorial: http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

Il punto chiave è che gli elementi SVG attivano anche eventi dom tradizionali, inclusi onmouseover e onmouseout .

— Norman H
fonte

1

+1 SVG è la migliore alternativa diretta alle mappe immagine, poiché l'interazione può avvenire con qualsiasi forma arbitraria. È possibile creare qualcosa di molto simile alle mappe immagine in cui le coordinate vettoriali sminuzzano le immagini pixel raster, dando agli elementi SVG un riempimento dell'immagine . Ma anche in questo caso, le mappe dell'area potrebbero essere migliori in alcuni casi (sono più semplici e non ritagliano l'immagine, il che a volte potrebbe essere desiderabile).

— user56reinstatemonica8

18

Sì, le mappe immagine html sono buone soprattutto se vuoi che la tua area sia un poligono. Puoi anche aggiungere effetti di rollover alla tua mappa con javascript. C'è un bel tutorial e una demo qui:

http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484

— LostLin
fonte

8

+1 - Sebbene tu possa fare molto con CSS e posizionamento assoluto, le mappe immagine sono ancora l'unico modo per rilevare il passaggio del mouse su un'area poligonale non rettangolare.

— Blazemonger

10

Le mappe immagine sono ancora nelle specifiche HTML5, supportate da tutti i browser.

Possono essere adattati al design reattivo utilizzando jQuery RWD Image Maps: https://github.com/stowball/jQuery-rwdImageMaps

Rileva e ridimensiona automaticamente le coordinate delle mappe immagine.

È anche disponibile per gli sviluppatori di Wordpress come plug-in: http://wordpress.org/plugins/responsive-image-maps/

Soluzione semplice ed efficace.

— Daniele B
fonte

9

Sì, utilizzo ancora le mappe immagine, tuttavia il mio ultimo progetto ha utilizzato Raphaël. È stato abbastanza facile ottenere qualcosa di attivo e funzionante.

http://dmitrybaranovskiy.github.io/raphael/

Dal loro sito web:

Raphaël ['ræfeɪəl] utilizza la raccomandazione SVG W3C e VML come base per la creazione di grafici. Ciò significa che ogni oggetto grafico che crei è anche un oggetto DOM, quindi puoi allegare gestori di eventi JavaScript o modificarli in un secondo momento. L'obiettivo di Raphaël è fornire un adattatore che renda facile e compatibile il cross-browser di disegno vettoriale.

Bello semplice esempio di mappa immagine:

http://dmitrybaranovskiy.github.io/raphael/australia.html

— David Newcomb
fonte

2

Non ti ci sarebbe voluto molto per aggiustare il collegamento da solo invece di lamentarti e votare a vuoto :(

— David Newcomb

2

Caro David, ho rimosso il voto negativo. Come vuoi che aggiusti il collegamento che è semplicemente rotto? Vorrei rimuovere http://raphaeljs.com/completamente e fornire solo l'esempio di Github.

— orschiro

6

Il punto di stack-site è la collaborazione. Se vedi un collegamento interrotto, riparalo se puoi. Non pensarci in termini di collegamenti interrotti, sono puntatori interrotti alle risorse. Se la risorsa è stata spostata, aggiorna il collegamento in modo che punti alla nuova posizione della risorsa: questa è la cosa importante. Raphaeljs aveva il suo sito ma ovviamente si è spostato su GitHub. Rimandiamo le persone a Google per scoprire dove vive adesso? O li aiutiamo ad andare da qui? L'esempio dell'Australia è lo stesso esempio in cui vive in un posto diverso.

— David Newcomb

Il http://raphaeljs.com/collegamento alla fine si interromperà quando la registrazione del dominio scade, ma ora c'è un reindirizzamento per dare a tutti (nel mondo) la possibilità di aggiornare i propri collegamenti. Forse @orschiro potresti iniziare con quello nell'articolo e aggiungere allo sforzo di collaborazione qui a SO.

— David Newcomb

1

Capito, grazie David! Ho aggiornato la risposta e corretto il collegamento. :-)

— orschiro

4

Anche se raramente li vedo più utilizzati sui siti Web moderni, sembrano essere utilizzati dai miei clienti nelle loro campagne di posta elettronica. Tuttavia, ho notato e confermato che ci sono alcuni problemi di ridimensionamento con il sistema di coordinate sui dispositivi mobili.

** So che questo thread è vecchio, stavo solo facendo qualche ricerca aggiuntiva su questo per un recente problema di campagna e-mail e ho pensato che potesse aiutare qualcun altro in futuro.

Modifica di terze parti

La domanda su litmus.com sul supporto delle mappe immagine è del 04/2014

Le mappe immagine non supportano i tag ALT, quando le immagini non vengono caricate il testo ALT non viene visualizzato in alcuni client.

L'utilizzo della mappa immagine generalmente si traduce nell'utilizzo di immagini di grandi dimensioni che possono causare problemi di recapito e ostacolare la velocità di download (particolarmente importante per gli utenti mobili).

E, cosa più importante, iOS (iphone / ipad) non scala le coordinate del collegamento della mappa dell'immagine quando l'immagine viene ridimensionata, interrompendo i collegamenti. Poiché iOS rappresenta la grande maggioranza delle email aperte (iPhone + iPad = 38% tramite http://emailclientmarketshare.com/ ), questo è importante.

— spindle79
fonte

0

Sì, è ancora usato

Una mappa immagine consente a un utente di collegarsi a molte pagine facendo clic su parti diverse di un'immagine. Semplicemente utilizzando la mappa immagine creiamo elenchi di coordinate relative a un'area specifica della stessa immagine e forniamo il collegamento ipertestuale a una posizione diversa. Usando questo all'interno di una singola immagine forniamo più collegamenti.

Di Più

— Srikrushna
fonte

-2

la mappa immagine è un'opzione piuttosto interessante in html e html5 sono ancora in uso e personalmente lo adoro quindi trovo che sia utilizzato nei dispositivi mobili il mio problema è relativo al ridimensionamento

si, l'ho sperimentato da solo, tuttavia sono uno studente iscritto a html html5 e per i principianti vorrei seguire il link w3chools

http://www.w3schools.com/html/html_images.asp

guadagnerai molto da questa [pagina

— Shoua Iqbal
fonte