Wikipedia

Mappa immagine: differenze tra le versioni

Naviga nella cronologia in modo interattivo
← Differenza precedenteDifferenza successiva →
Contenuto cancellato Contenuto aggiunto
VisualeWikitesto
Atarubot (discussione | contributi)
550 442 modifiche
template cita "xxxx"; rinomina/fix nomi parametri; converto template cite xxx -> cita xxx; fix formato data
Etichetta: Annullato
Ripristino alla versione 109846151 datata 2020-01-05 18:37:19 di Micheledisaveriosp tramite popup
Etichetta: Ripristino manuale
Riga 1:
{{F|computer grafica|marzo 2013}}
<imagemap>Image:JoshuaReynoldsParty.jpg|Esempio di mappa immagine di [[The Club (Literary Club)]]. Su ogni personaggio in figura è inserito un link verso il relativo articolo su wikipedia|upright=1.6|thumb
 
Line 19 ⟶ 20:
</imagemap>
 
La '''mappa immagine''' (dall'inglese '''image map''') è una immagine digitale in cui alcune aree sono link ad altri contenuti mediali.
 
In particolare viene progettata in [[HTML]] o [[XHTML]] come un elenco di coordinate correlate a una immagine specifica create con vari collegamenti ipertestualiipercollegamenti che conducono a diverse destinazioni (a differenza di una normale immagine che indirizza ad una sola destinazione). È evidente una similitudine tra ipertesto e mappa immagine poiché in entrambi si ha la possibilità di accedere a più contenuti e soprattutto di scegliere a quali accedere a seconda della propria curiosità. Ogni mappa immagine ha la possibilità di aprirsi su infiniti (ipoteticamente) nuovi oggetti multimediali.
 
== LatoNei serverprogetti di Wikipedia==
In via sperimentale, a gennaio 2020 il software di Wikipedia consente l'inserimenti di image map interattive all'interno delle voci del dominio principale, in alternativa alle immagini statiche tradizionali. La differenza consistena nella possibilità di tagare specifiche sezioni dell'immagini, dalle quali il lettore tramite un semplice [[Mouse#clic|clic del ''mouse'']] può accedere alla relativa voce dell'enciclopedia.
Le mappe immagine lato server sono state supportate per la prima volta nella versione 1.1 di Mosaic (browser web)<ref>{{Cita web|url=http://1997.webhistory.org/www.lists/www-talk.1993q2/0343.html|titolo=IMG extension for Mosaic 1.1}}</ref>. Le mappe immagine lato server consentono al browser web di inviare informazioni di posizione al server su dove l'utente fa clic all'interno di un'immagine. Ciò consente al server di prendere decisioni pixel per pixel su quale contenuto restituire in risposta (i metodi possibili sono l'utilizzo di livelli maschera immagine, query database o file di configurazione sul server).
 
Le image map delle voci sono categorizzate al seguente wikilink ''<nowiki>[[w:en:Category:Articles containing image maps]]</nowiki>''.
Il codice HTML per questo tipo di mappa immagine lato server richiede che il tag <code><img></code> si trovi all'interno di un tag di ancoraggio <code><a>...</a></code>e che <code><img></code>deve includere l'attributo <code>ismap</code>.
< a href = "/ imagemapper" > < img src = "image.png" ismap /> </ a >
Quando l'utente fa clic all'interno dell'immagine, il browser aggiungerà le coordinate X e Y (relative all'angolo superiore sinistro dell'immagine) all'URL di ancoraggio come stringa di query e accederà all'URL risultante<ref>{{Cita web|url=http://www.w3.org/TR/html-markup/|titolo=HTML: The Markup Language (an HTML language reference)}}</ref> (ad esempio, <code>/imagemapper?3,9</code>).
 
Se il browser non supporta <code>ismap</code>la stringa di query non deve essere aggiunta all'URL di ancoraggio e il server deve rispondere in modo appropriato (ad esempio, restituendo una pagina di navigazione di solo testo).
 
== Lato client ==
Le mappe immagine lato client sono state introdotte in HTML 3.2 e non richiedono alcuna logica speciale per essere eseguite sul server (sono completamente lato client). Inoltre non richiedono JavaScript.
[[File:Html-area-shape.png|alt=Sopra una mappa immagine fatta con il tag <map>. Sotto tre immagini PNG trasparenti inserite con <img> e aventi dei link <a>. Solo per quanto riguarda quadrati e rettangoli il risultato è lo stesso.|miniatura|Sopra una mappa immagine fatta con il tag <code><map></code>. Sotto tre immagini [[PNG (informatica)|PNG]] trasparenti (si può usare anche il formato [[Graphics Interchange Format|GIF]]) inserite con <code><img></code> e aventi dei link <code><a></code>. Solo per quanto riguarda quadrati e rettangoli il risultato è lo stesso. Il rosso rappresenta un'immagine e il giallo le aree cliccabili]]
 
=== HTML puro ===
Una mappa immagine lato client in HTML è composta da due parti:
 
# l'immagine reale, che è incorporata con il tag <code><img></code>. Il tag "image" deve avere un attributo ''usemap,'' che ''assegna'' un nome alla mappa immagine da utilizzare per questa immagine (possono esistere più mappe immagine su una singola pagina).
# Un elemento <code><map></code> e, al suo interno, elementi <code><area></code>, ciascuno dei quali definisce una singola area cliccabile all'interno della mappa immagine. Essi sono simili al tag <code><a></code>che definisce l'URL da aprire per un normale collegamento web. Un attributo <code>title</code>può essere inserito e visualizzato come un suggerimento se un utente desktop passa il puntatore del mouse sull'area. Per motivi di [[Accessibilità (web)|accessibilità web]], è spesso importante - e in alcuni casi può anche essere un requisito legale o contrattuale - fornire un attributo <code>alt</code> che descriva il collegamento che il software di lettura dello schermo può leggere, ad esempio, per gli utenti non vedenti<ref name="access-ability">{{Cita web|url=http://accessibility.psu.edu/imagemaps|titolo=Image Maps in HTML|opera=AccessAbility|editore=[[Penn State University]]|accesso=6 ottobre 2013}}</ref>.
 
Gli elementi <code><area></code> possono essere rettangoli (<code>shape="rect"</code>), poligoni (<code>shape="poly"</code>) o cerchi (<code>shape="circle"</code>). I valori di forma sono coppie di coordinate. Ogni coppia ha un valore X e Y (da sinistra / in alto di un'immagine) ed è separata da una virgola.
 
* [[Rettangolo]]: impostare quattro coordinate: x1, y1, x2, y2
* [[Poligono]]: impostare tutte le coordinate che si desidera (un multiplo di due): x1, y1, x2, y2, [...] xn, yn
* [[Cerchio]]: una coppia di coordinate e un altro valore con un raggio: x1, y1, raggio
 
L'esempio seguente definisce un'area rettangolare (9,372,66,397). Quando un utente fa clic in un punto qualsiasi di quest'area, viene indirizzato alla home page di Wikipedia in inglese.
< img src = "image.png" alt = "Mappa sito web" usemap = "#mapname" />
< map name = "mapname" >
< area shape = "rect" coords = "9,372,66,397" href = "<nowiki>https://en.wikipedia.org/</nowiki>" alt = "Wikipedia" title = "Wikipedia" />
</ map >
 
=== CSS ===
Un approccio più moderno consiste nel sovrapporre i collegamenti su un'immagine utilizzando il posizionamento assoluto CSS; tuttavia, questo supporta solo aree cliccabili rettangolari. Questa tecnica CSS può essere adatta per far funzionare correttamente una mappa immagine su iPhone, che può non riuscire a ridimensionare correttamente le mappe immagine HTML pure.
 
== Creazione e utilizzo ==
È possibile creare mappe immagine lato client a mano utilizzando un editor di testo, ma per farlo è necessario che i web designer sappiano come codificare HTML e come enumerare le coordinate delle aree che desiderano posizionare sull'immagine. Di conseguenza, la maggior parte delle mappe immagine codificate a mano sono semplici poligoni. Poiché la creazione di mappe immagine in un editor di testo richiede molto tempo e impegno, molte applicazioni sono state progettate per consentire ai web designer di creare mappe immagine rapidamente e facilmente, proprio come creerebbero forme in un editor di grafica vettoriale. Esempi di queste applicazioni sono [[Adobe Dreamweaver|Dreamweaver]] di Adobe o KImageMapEditor (per KDE) e un plugin di mappe immagine di [[GIMP]]<ref>{{Cita web|url=https://www.gimp.org/tutorials/Image_Map/|titolo=GIMP - Image Map Tutorial|sito=www.gimp.org|lingua=en|accesso=22 marzo 2021}}</ref>.
 
Le mappe di immagini che non rendono evidenti le loro aree cliccabili rischiano di sottoporre l'utente a una navigazione misteriosa. Anche quando lo fanno, dove conducono potrebbe non essere ovvio. Questo può essere parzialmente risolto con effetti di rollover<ref>{{Cita libro|cognome=Flanders|nome=Vincent|titolo=Web Pages That Suck: Learn Good Design by Looking at Bad Design|editore=Sybex Inc|data=March 1998|città=San Francisco|url=https://archive.org/details/webpagesthatsuck00flan|isbn=978-0-7821-2187-2|url-access=registration}}</ref>.
 
== Immagini SVG ==
Poiché il formato immagine SVG ([[Scalable Vector Graphics]]) fornisce i propri meccanismi per l'aggiunta di collegamenti ipertestuali e altre forme più sofisticate di interattività alle immagini, le tecniche tradizionali di mappatura delle immagini non sono generalmente necessarie quando si lavora con immagini vettoriali nel formato SVG. Esempio (una mappa immagine rettangolare)<ref>{{Cita web|url=http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG|titolo=Create A Responsive Imagemap With SVG|autore=Dudley Storey|sito=the new code|lingua=en|accesso=22 marzo 2021}}</ref>:<syntaxhighlight lang="html">
<figure id=prova>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 808" preserveAspectRatio="xMinYMin meet" >
<image width="1200" height="808" xlink:href="prova.jpg">
</image>
<a xlink:href="http://www.sito.it/">
<rect x="535" y="28" fill="#fff" opacity="0" width="150" height="750" />
</a>
</svg>
</figure>
 
</syntaxhighlight>CSS:<syntaxhighlight lang="css">
#prova {
position: relative;
width: 100%;
padding-bottom: 77%;
vertical-align: middle;
margin: 0;
overflow: hidden;
}
#prova svg {
display: inline-block;
position: absolute;
top: 0; left: 0;
}
</syntaxhighlight>
 
== Alternative ==
Esistono alternative visivamente identiche alle mappe immagine create con il tag <map>. Esse consistono nel creare forme e/o maschere di immagini con varie tecniche CSS, renderle cliccabili, nasconderle con opacità "0" o inserendo GIF o PNG o SVG trasparenti e infine sovrapporle ad un'immagine<ref>{{Cita web|url=https://css-tricks.com/the-many-ways-to-link-up-shapes-and-images-with-html-and-css/|titolo=The Many Ways to Link Up Shapes and Images with HTML and CSS|sito=CSS-Tricks|data=1º ottobre 2019|lingua=en|accesso=23 marzo 2021}}</ref><ref>{{Cita web|url=https://www.digitalocean.com/community/tutorials/css-masking-with-mask-image|titolo=Masking Images in CSS Using the mask-image Property|sito=DigitalOcean|lingua=en|accesso=23 marzo 2021}}</ref><ref>{{Cita web|url=https://css-tricks.com/masking-vs-clipping-use/|titolo=Masking vs. Clipping: When to Use Each|sito=CSS-Tricks|data=7 giugno 2017|lingua=en|accesso=23 marzo 2021}}</ref>.
 
=== Clip-path CSS ===
Esempio (un'area cliccabile a forma di stella):
 
HTML<syntaxhighlight lang="html">
<a href="http://www.sito.com">
<img height=100px width=100px src="immagine.jpg" class="clip">
</a>
 
<a class="star-link clip" href="http://www.sito.com"></a>
 
<svg>
<defs>
<clipPath id="clip">
<polygon
points="50,0 61,35 98,35
68,57 79,91 50,70
21,91 32,57 2,35 39,35"/>
</clipPath>
</defs>
</svg>
</syntaxhighlight>CSS<syntaxhighlight lang="css">
.clip {
clip-path: url(#clip);
}
 
.star-link {
position: absolute;
left: 125px;
background-color: blue;
min-height: 100px;
height: 100px;
width: 100px;
min-width: 100px;
}
 
.clip:hover {
opacity: 0.5;
}
</syntaxhighlight>
 
=== Forme CSS: ===
Esempio (un'area cliccabile a forma di cuore):
 
HTML<syntaxhighlight lang="html">
<a id="heart" href="https://www.sito.it"></a>
</syntaxhighlight>CSS<syntaxhighlight lang="css">
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
</syntaxhighlight>
 
=== Mask-image CSS ===
Esempio (un'area cliccabile triangolare):
 
HTML<syntaxhighlight lang="html">
<svg width="0" height="0" viewBox="0 0 400 600">
<defs>
<mask id="my-svg-mask">
<rect fill="#000000" x="0" y="0" width="400" height="600"></rect>
<polygon fill="#FFFFFF" points="200.5 152 349 449 52 449"></polygon>
</mask>
</defs>
</svg>
</syntaxhighlight>CSS<syntaxhighlight lang="css">
.mask5 {
-webkit-mask-image: url(#my-svg-mask);
mask-image: url(#my-svg-mask);
}
</syntaxhighlight>
 
== Nei progetti di Wikipedia==
In via sperimentale, a gennaio 2020 il software di [[Wikipedia]] consente l'inserimenti di mappe immagine interattive all'interno delle voci del dominio principale, in alternativa alle immagini statiche tradizionali. La differenza consiste nella possibilità di taggare specifiche sezioni dell'immagini, dalle quali il lettore tramite un semplice [[Mouse#clic|clic del ''mouse'']] può accedere alla relativa voce dell'enciclopedia.
 
{{Portale|internet}}
Le mappe immagine delle voci sono categorizzate al seguente wikilink ''<nowiki>[[w:en:Category:Articles containing image maps]]</nowiki>''.
 
== Note ==
[[Categoria:HTML]]
[[Categoria:Computer grafica]]
<references />{{Portale|internet}}
Estratto da "https://it.wikipedia.org/wiki/Mappa_immagine"