WebSite X5Help Center

 
Stefano T.
Stefano T.
User

Immagine in html - mappatura  it

Auteur : Stefano T.
Visité 982, Followers 3, Partagé 0  

Ciao.

Ho un'immagine in HTML creata con PS che ha dei punti cliccabili per aprire dei link.

Come posso inserirla e, se si, quale oggetto devo usare?

Posté le
37 RéPONSES - 7 UTILE
Stefano T.
Stefano T.
User
Auteur

Ho dimenticato di dirlo: l'immagine ha come estensione .html

Lire plus
Posté le de Stefano T.
Giancarlo B.
Giancarlo B.
User

html è una estensione ( e linguaggio) di pagina web non immagine

Lire plus
Posté le de Giancarlo B.
Stefano T.
Stefano T.
User
Auteur
Giancarlo B.
html è una estensione ( e linguaggio) di pagina web non immagine

Si mi sono spiegato male: ho una mappa su cui ho salvato dei link cliccabili che poi ho salvato in HTML

 ‪ KolAsim ‪ ‪
... è semplice; ... basta usare solo i due TAG, ... tag <IMG> e tag <MAP> ... ed ovviamente allegare l'immagine e relazionarla nell'attributo SRC.... >>  https://helpcenter.websitex5.com/fr/post/154132

Grazie, avevo usato la ricerca ma non me lo aveva trovato quel post.

Lire plus
Posté le de Stefano T.
Stefano T.
Stefano T.
User
Auteur

Scusa KolAsim: che utility è OO.o, citata nell'altro thread?

Eventualmente ce ne sono altre?

Lire plus
Posté le de Stefano T.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois PT

 >> OO.o = OpenOffice.org  ...

... va bene anche Gimp, PSP, Inkscape, ecc. ...

... molto semplicemente e facilmente si può mappare anche online, per esempio con:    http://maschek.hu/imagemap/imgmap/

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Stefano T.
Stefano T.
User
Auteur

Boh, ho provato seguendo le istruzioni dell'altro thread passo passo ma continuo a vedere una pagina bianca

Lire plus
Posté le de Stefano T.
Stefano T.
Stefano T.
User
Auteur

Il file si chiama "italia_regioni.png"

PSP mi da questo codice salvandolo in html e aprendolo col blocco note:

<html>
<head>
<title>italia_regioni</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (italia_regioni.png) -->
<table id="Tabella_01" width="679" height="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="images/italia_regioni_01.png" width="679" height="154" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/italia_regioni_02.png" width="33" height="646" alt=""></td>
<td>
<a href="https://www.regione.piemonte.it/web/temi/protezione-civile-difesa-suolo-opere-pubbliche/protezione-civile" target="_blank">
<img src="images/italia_regioni_03.png" width="107" height="48" border="0" alt=""></a></td>
<td rowspan="2">
<img src="images/italia_regioni_04.png" width="539" height="646" alt=""></td>
</tr>
<tr>
<td>
<img src="images/italia_regioni_05.png" width="107" height="598" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

--------------------

Online Image Map Editor mi da:

STANDARD IMAGEMAP

<map id="imgmap202242415040" name="imgmap202242415040"><area shape="rect" alt="Piemonte" title="" coords="21,135,153,218" href="https://www.regione.piemonte.it/web/temi/protezione-civile-difesa-suolo-opere-pubbliche/protezione-civile" target="_blank" /><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>

CSS IMAGEMAP

<div class="imgmap_css_container" id="imgmap202242415040"><a style="position: absolute; top: 135px; left: 21px; width: 132px; height: 83px;" alt="Piemonte" title="Piemonte" href="https://www.regione.piemonte.it/web/temi/protezione-civile-difesa-suolo-opere-pubbliche/protezione-civile" target="_blank" ><em>Piemonte</em></a><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></div>

-----------------

Ottenuti questi codici ho provato con Oggetto Codice HTML > Esperto e ho messo:

<MAP NAME="imgmap202242415040">
<AREA SHAPE=RECTANGLE COORDS="21,135,153,218"
HREF="https://www.regione.piemonte.it/web/temi/protezione-civile-difesa-suolo-opere-pubbliche/protezione-civile"
TARGET="_blank"
ALT="Piemonte">
</MAP>
<IMG SRC="files/italia_regioni.png" NAME="imgmap202242415040" ALIGN=LEFT WIDTH=679 HEIGHT=800 BORDER=0
USEMAP="imgmap202242415040">

Sostituendo "imgmap202242415040", che non so da dove salta fuori, con "italia_regioni.png" non cambia nulla sempre pagina vuota.

Anche con POLY COORDS="48,150,43,143,50,202,162,196,132,76,104,146,99,148,96,145"

Lire plus
Posté le de Stefano T.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois PT

... devi semplicemente allegare l'immagine italia_regioni.png  (cartella "files"),  ed incollare questo codice, il tutto in Oggetto Codice HTML:

<map id="imgmap2022424105836" name="imgmap2022424105836"><area shape="poly" alt="Regione Piemonte" title="" coords="126,74,98,118,99,138,33,169,63,184,46,214,70,232,95,235,95,235,110,206,147,200,147,200,169,204,175,197,136,165,138,147,151,148,123,115,136,102,126,76" href="https://www.regione.piemonte.it/web/temi/protezione-civile-difesa-suolo-opere-pubbliche/protezione-civile" target="_blank" /><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>
<img src="files/italia_regioni.png" width="679" height="800" alt="" USEMAP="#imgmap2022424105836">

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Stefano T.
Stefano T.
User
Auteur

Grazie.

Ma nell'anteprima si dovrebbe vedere?

Lire plus
Posté le de Stefano T.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois PT

... ceertooo...!... laughing

... come detto devi solo allegare quella immagine ed incollare il codice...

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Stefano T.
Stefano T.
User
Auteur

Ciao.

Premetto... non ho ancora avuto tempo di provare quanto suggerito da Mirko.

Ho seguito le istruzioni, rifacendo l'immagine postata in precedenza su Online Image Map Editor.

Il codice immesso:

<map id="imgmap202242619453" name="imgmap202242619453">
<area shape="poly" alt="Regione Piemonte" title="" coords="68,148,35,171,52,234,102,225,138,189,156,186,125,136,130,112,122,82,103,137,103,137" href="https://www.regione.piemonte.it/web/temi/protezione-civile-difesa-suolo-opere-pubbliche/protezione-civile" target="_blank" />
<!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>
<img src="files/italia_regioni.png" width="679" height="800" alt="" USEMAP="#imgmap202242619453">

Poi ho allegato la mappa ovviamente.

Questo è il risultato: Sito prova

Il nulla più totale

Se poi vogliamo dirla tutta, per la scritta SITO PROVA ho usato l'oggetto Titolo con Stile Shadow3D: io l'ombra non la vedo, manco nell'anteprima!

E' settato per risultare così:

Lire plus
Posté le de Stefano T.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois PT

...!... hai postato LINK sbagliato..!...

...!... non c'è traccia del mio codice postato prima garantito al 100%, e né di altri...!...

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Giancarlo B.
Giancarlo B.
User
 ‪ KolAsim ‪ ‪
...!... hai postato LINK sbagliato..!... ...!... non c'è traccia del mio codice postato prima garantito al 100%, e né di altri...!...

infatti!!!

Lire plus
Posté le de Giancarlo B.
Stefano T.
Stefano T.
User
Auteur
 ‪ KolAsim ‪ ‪
...!... hai postato LINK sbagliato..!... ...!... non c'è traccia del mio codice postato prima garantito al 100%, e né di altri...!...

"Infatti" un bel niente laughing

Il LINK non è sbagliato, la mappa l'ho rifatta io con Online Image Map Editor e ovviamente ho cambiato un pezzetto di codice.

Comunque, ora ho messo il tuo codice e la tua immagine e questo è il risultato:

Sito Prova

Nella cartella Files c'è l'immagine ma non so per quale ragione non la carica, anche nella preview non si vede nulla.

Il sito è stato caricato con Filezilla

Lire plus
Posté le de Stefano T.
Giancarlo B.
Giancarlo B.
User

forse perchè è stato inserito nella sezione CSS e non HTML

Lire plus
Posté le de Giancarlo B.
Giancarlo B.
Giancarlo B.
User

devi mettere il codice in HTML come suggerito da Kol

Lire plus
Posté le de Giancarlo B.
Stefano T.
Stefano T.
User
Auteur

Ah ok non avevo letto bene, l'avevo messo nella stessa pagina dove avevo allegato l'immagine yell

Lire plus
Posté le de Stefano T.
Stefano T.
Stefano T.
User
Auteur

Ho fatto la mappatura (solo Piemonte) con Online Image Map Editor e ho ricaricato il sito: Sito prova corretto

Mi scuso con tutti quanti, in particolare con KolAsim, errore mio che ho letto in fretta, e all'una e passa di notte, il suo post.

Lire plus
Posté le de Stefano T.
Giancarlo B.
Giancarlo B.
User
Stefano T.
Mi scuso con tutti quanti, in particolare con KolAsim, errore mio che ho letto in fretta, e all'una e passa di notte, il suo post.

ottimo Stefano wink

Lire plus
Posté le de Giancarlo B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois PT
Stefano T.
Ho fatto la mappatura (solo Piemonte) con Online Image Map Editor e ho ricaricato il sito: Sito prova corretto Mi scuso con tutti quanti, in particolare con KolAsim, errore mio che ho letto in fretta, e all'una e passa di notte, il suo post.

... sì, ..adesso è OK, ...e come hai capito era semplicissimo...wink
... manca solo il ToolTip, che c'è invece nel mio codice come da STAMP...

.

Ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Stefano T.
Stefano T.
User
Auteur
‪ KolAsim ‪ ‪
... sì, ..adesso è OK, ...e come hai capito era semplicissimo... ... manca solo il ToolTip, che c'è invece nel mio codice come da STAMP...

2 cose:

1. Cos'è il ToolTip? Intendi che quando metto il mouse su una regione compare un popup? 

Il codice è uguale al tuo pubblicato sopra a parte alcuni dati.

2. Sul cellulare la mappa è tagliata a livello della Campania: http://trialwebsite.altervista.org/

Lire plus
Posté le de Stefano T.
Stefano T.
Stefano T.
User
Auteur

Ho trovato questo sito che mappa le immagini in modalità responsive: ImageMapper

Peccato che non ci sia anche la versione desktop come per Image Map Editor cry

Lire plus
Posté le de Stefano T.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois PT

... controlla la larghezza degli oggetti in HEADER e/o nel MENU, che a basse risoluzioni escono fuori dal layout...

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Stefano T.
Stefano T.
User
Auteur

Si messi a posto i menu, non li avevo settati.

Il ToolTip su ogni link dell'immagine come si mette?

C'è un'alternativa responsive a Image Mapper ? Permette di fare solo rettangoli e poi riporta l'URL che va a coprire parii della mappa e dovendo mappare tutta l'Italia alcuni region sono nascoste anche utilizzando un short url

Lire plus
Posté le de Stefano T.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois PT

... per la mappatura elastica, ...personalmente e come dico spesso farei la mappatura in SVG vettoriale, nativamente elastica e senza perdite, ...oppure userei uno dei miei esclusivi metodi per il ridimensionamento dinamico...

... ma in alternativa valida è da alcuni anni che suggerisco questo semplice > Tutorial  alla portata di tutti...

...

... per il ToolTip devi aggiungere gli attributi ALT e TITLE...

...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Stefano T.
Stefano T.
User
Auteur

1. Farlo in SVG credo si debba usare Illustrator o Inkscape.

2. Non so dove posso vedere i metodi per il ridimensionamento dinamico.

3. Non ho capito nulla di quel tutorial a parte che si devono caricare i 2 file js (almeno credo).

Lascierò perdere questo progetto perchè la mappa senza il sud Italia è inguardabile e impresentabile

Lire plus
Posté le de Stefano T.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois PT

> 2) ... i miei esempi online si sono estinti...
... ... con il metodo responsive che avevi usato, se non puoi usare la poligonale, potresti mappare con il rettangolo il nome delle regioni...
.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Claudio D.
Claudio D.
Moderator
Meilleur utilisateur du mois IT
Stefano T.
1. Farlo in SVG credo si debba usare Illustrator o Inkscape.

Inkscape... è gratis e ti permette di mettere i link direttamente nell'SVG

Lire plus
Posté le de Claudio D.
Stefano T.
Stefano T.
User
Auteur

Per adesso, nell'urgenza, uso il sito ImageMapper creando dei rettangoli, poi vedrò con Inkscape che avevo messo sul notebook e mai usato.

L'SVG creato con ImageMapper, fatto sempre sulla solita mappa, non mette il target ne il ToolTip.

Per il target ho risolto inserendolo in quella posizione e si apre su un'altra pagina.

Il ToolTip non so dove metterlo, ho fatto qualche prova ma non me lo prende.

Il codice è questo:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 679 800">
<image width="679" height="800" xlink:href="files/italia_regioni.png"></image>
<a xlink:href="https://it.wikipedia.org/wiki/Piemonte" target="_blank">
<rect x="41" y="151" fill="#fff" opacity="0" width="100" height="50"></rect></a>
</svg>

Lire plus
Posté le de Stefano T.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois PT

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 679 800">
<image width="679" height="800" xlink:href="files/italia_regioni.png"></image>
<a xlink:href="https://it.wikipedia.org/wiki/Piemonte" target="_blank">
<rect x="41" y="151" fill="#fff" opacity="0" width="100" height="50"><title>Wikipedia_Piemonte</title></rect></a>
</svg>

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Stefano T.
Stefano T.
User
Auteur

Grazie per l'aiuto.

Ora la mappa è responsive e presentabile, peccato che non si possa usare la mappatura poligonale: Mappa Italia

PS: hanno il link solo Valle d'Aosta, Piemonte e Liguria, le altre sono mappate ma non funzionano

Lire plus
Posté le de Stefano T.
Stefano T.
Stefano T.
User
Auteur

Il ToolTip è modificabile per colore, tipo e grandezza font ecc..?

Lire plus
Posté le de Stefano T.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois PT

... il Tooltip è gestito in modo tradizionale dal motore dei browser...

... ...se vuoi di più potresti cercare in rete in ambiente JS/CSS ... ... 

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Stefano T.
Stefano T.
User
Auteur

Ok grazie, era più che altro una curiosità

Lire plus
Posté le de Stefano T.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois PT

... se ci fai caso, il Programma usa ToolTip personalizzati; ...potrebbe venirti qualche idea...wink...

Lire plus
Posté le de  ‪ KolAsim ‪ ‪