Ciaoooo guarda qui un'esempio

http://www.essedi.altervista.org/_sito/mappatura-immagine.html

Ciao Franco,

prova a dare un'occhiata anche a questi post:

http://answers.websitex5.com/post/26215

http://answers.websitex5.com/post/3372

ma come si fa ad identifacre il punto dell'immagine su cui cliccare? Ad esempio, prendendo l'immagine di Mirko, come ha fatto ad identificare con "="500,163,558,233" il rettangolo da posizionare intorno alla figura che interessa selezionare?

Hai provato a leggere in fondo....Mappatura di una immagine con GIMP. fa tutto il programma

... sono le Coordinate Cartesiane dell'Angolo Superiore SX e dell'Angolo Inferiore DX, ove il punto di Origine "0" corrisponde all'Angolo Superiore Alto/SX dell'Immagine Grande...

... ma è molto semplice ricavare automaticamente le poligonali, i rettangoli ed i cerchi, con programmi tipo Gimp, OO.o, PSP, ecc.

... per esempio, nei link precedentemente suggeriti da "Riccardo" c'è un mio video relativo alla mappatura con "OO.o", questo:  http://www.zspace.it/kolasim/wsx5_v8/mappaturaOOo/mappatura_K_1.html

.

bye, KolAsim

Sembra facile, ma …. Ho creato la mappa sensibile con OO.o e ho copiato il codice nella casella html/Widgets di incomedia. A quel punto avrei dovuto trovare sulla barre dei comandi della casella l’icona per importare i file così come ho visto seguendo il tuo video. Invece sulla mia barra c’è solo taglia, copia, incolla, annulla, ripristina. Ho provato a fare delle prove perché credo che in ogni caso basterebbe scrivere il percorso giusto al posto giusto nel codice e dovrebbe funzionare. Essendo del tutto digiuno di html, dopo tante prove andate a vuoto, richiedo aiuto perché quasi ci sono. Al momento, visualizzando la pagina in anteprima, appare il riquadro vuoto dell’immagine (intendo senza l’immagine), ma scorrendo su questo spazio con il mouse appaiono le scritte dei due collegamenti che ho fatto. Dunque il codice in qualche modo funziona. Se però attivo il collegamento, come è giusto, appare una pagina con un’icona di immagine spezzata in due e la scritta “Cannot load the page”.

questo è il codice generato:

<P><MAP NAME="MAP1"><AREA SHAPE=POLY COORDS="109,311,148,368,151,361,196,315,208,310,139,264,126,265,117,262,120,289,100,279,100,280,109,311" HREF="/pagina2.html" TARGET="_self" ALT="mitria"><AREA SHAPE=POLY COORDS="99,160,119,149,119,147,120,129,117,111,117,101,116,87,108,79,93,74,79,81,65,96,57,116,52,118,53,140,57,167,99,160" HREF="/pagina1.html" TARGET="_self" ALT="volto sant'Agata"></MAP><IMG SRC="_DSC4147_ridotto.jpg" NAME="immagini1" ALIGN=LEFT WIDTH=264 HEIGHT=397 BORDER=0 USEMAP="#MAP1"><BR CLEAR=LEFT><BR><BR> </P>

ciao,

... rinomina l'immagine in modo semplice, senza lettere Maiusc, né caratteri speciali, né spazi o linee, per esempio "santagata.ipg", e questo perchè il programma potrebbe effettuare qualche sostituzione di caratteri nella cartella "files"...

... adesso allega "santagata.ipg" all'Oggetto codice HTML, controllando che la destinazione sia la cartella "files", questo per la v.9, perchè nella v.8 è sempre fissa  la cartella "files"...

... elimina dagli URL dei link alle pagine la barra destra "/" ...

... puoi incollare direttamente il codice che segue, già modificato da me:

<P><MAP NAME="MAP1"><AREA SHAPE=POLY COORDS="109,311,148,368,151,361,196,315,208,310,139,264,126,265,117,262,120,289,100,279,100,280,109,311" HREF="pagina2.html" TARGET="_self" ALT="mitria"><AREA SHAPE=POLY COORDS="99,160,119,149,119,147,120,129,117,111,117,101,116,87,108,79,93,74,79,81,65,96,57,116,52,118,53,140,57,167,99,160" HREF="pagina1.html" TARGET="_self" ALT="volto sant'Agata"></MAP><IMG SRC="files/santagata.jpg" NAME="immagini1" ALIGN=LEFT WIDTH=264 HEIGHT=397 BORDER=0 USEMAP="#MAP1"><BR CLEAR=LEFT><BR><BR> </P>

... in questo modo funzionerà anche in Prova per la v.8 ed in Anteprima per la v.9, e funzioneranno anche i LINK...

... aggiungo, ...per vedere il TOLTIP anche  in Chrome ed FF, aggiungi il TAG TITLE a seguito del TAG ALT presente, title="mitria" e title="volto sant'Agata"

. 

ciao, KolAsim

… scusa se insisto, ma .. .. HO FATTO UN ALTRO PASSO AVANTI. Adesso appare l’immagine e scorrendo il mouse sopra l’immagine si evidenziano le aree sensibili con le relative didascalie. Evidentemente se clicco sopra queste aree – come è giusto dal momento che non ho ancora modificato niente – mi rimanda ad una pagina inesistente. Come faccio a collegare le due aree sensibili ad altrettante pagine con relative immagini e descrizioni? Credo debba farlo sempre attraverso il codice. Nella maschera html c’è una parte sottostante destinata ai file collegati al codice superiore. Immagino sia qui che vanno inseriti i collegamenti, ma in che modo diventeranno attivi? Scusa se continuo ad approfittare, .. ma dal momento che ho fatto qualche passo avanti mi piacerebbe vedere la luce prima di decidermi a passare a dreamweaver che debbo imparare ad usare, ma che in questo settore fa tutto lui.

ecco intanto la nuova versione del codice funzionante per quanto riguarda l'immagine principale cliccabile.

<P><MAP NAME="MAP1"><AREA SHAPE=POLY COORDS="109,311,148,368,151,361,196,315,208,310,139,264,126,265,117,262,120,289,100,279,100,280,109,311" HREF="/pagina2.html" TARGET="_self" ALT="mitria"><AREA SHAPE=POLY COORDS="99,160,119,149,119,147,120,129,117,111,117,101,116,87,108,79,93,74,79,81,65,96,57,116,52,118,53,140,57,167,99,160" HREF="/pagina1.html" TARGET="_self" ALT="volto sant'Agata"><MAP><IMG SRC="C:\\1_UFFICIO\\santagata.jpg" NAME="immagini1" ALIGN=LEFT WIDTH=264 HEIGHT=397 BORDER=0 USEMAP="#MAP1"><BR CLEAR=LEFT><BR><BR> </P>

KolAsim ti ha corretto il codice, specificando tra l'altro

ma tu niente, continui imperterrito ad utilizzare il tuo (evidentemente errato).

Devi sostituire

HREF="/pagina1.html" con HREF="pagina1.html" (senza la /)

<IMG SRC="C:\\\\\\\\1_UFFICIO\\\\\\\\santagata.jpg" NAME="immagini1"

con  <IMG SRC="files/santagata.jpg"

Chiedo scuso a KOL se ho ribadito cose da lui già dette.

... in poche parole è tutto regolare, ...se rileggi attentamente quanto detto nel mio precedente post, e prova i consigli dati, in particolare:

1 - togliere la barra "/" nei link che richiamano le pagine;

2 - allega l'immagine all'oggetto codice html;

3 - se vuoi il tooltip anche in FF e CH, aggiungi il tag title;

... ... ...

... considerazioni: ... l'attuale codice che hai postato carica una immagine relativa al tuo PC e non relativa al Sito, per cui funzionerà solo sul tuo PC; ...il mio codice postato predcedentemente in neretto contiene i valori esatti...

... se nel progetto di prova, al passo 2, crezione della mappa, aggiungi due pagine nominate pagina1 e pagina2, funzionerà tutto regolarmente anche nel test in Anteprima, in quanto le pagine saranno pagina1.html e pagina2.html, come inicato nei link...

...

... quando farai il Sito definitivo, dovrai modificare il nome delle pagine messe nei link con quello reale che appare negli URL sulla barra indirizzi del browser in fase di test Anteprima...

.

ciao, KolAsim

.

EDIT: ... visto adesso che "essedi" mi ha preceduto correttamente, e che ringrazio, ci mancherebbe... ciao 

Ho incollato il codice che mi avevi mandato, ma non succede niente. Del resto se non faccio precedere “pagina2.html” da un percorso come potrà il programma riconoscere il percorso?. Così ho provato a sostituire “ files/sant’agata.jpg” con il percorso sul computer immaginando che “esportando” il sito avrebbe esportato anche l’immagine come fa quando lo si usa senza digitare il codice. L’immagine appare. Ma da te con il tuo codice appare anche l’immagine?

Dovrò rinunciare alle aree sensibili ...

... certo, se esegui letteralmente il suggerimento dato, confermato dall'intervento di "essedi" anche lui espertissimo sulle mappature...

- devi allegare l'immagine all'OGGETTO CODICE HTML, per esempio, con la V.8 che hai si fa con lo strumento "graffetta" del relativo menu; ...per la V.9 vedi un po' tu perchè non ce l'ho...

- ti ho anche consigliato di evitare nomi files di questo tipo: "files/sant’agata.jpg", (non è obbligatorio, ma nella cartella "files" si potrebbero trovare delle sorprese, specilamente con spazi vuoti e trattini!!!)

... 

... prova, ...deve funzionare sia in PROVA con la v.8 che in ANTEPRIMA con la v.9

...

ciao, KolAsim

... beh, ... per conferma, ho voluto fare una rapida prova di Copia/Incolla con la v.7 che ho nel catorcio zoppicante:  http://www.zspace.it/kolasim/website/mappatura/

.

ciao, KolAsim

Ho fatto un’altra prova. Se vai a www.noteartistiche.it/traduzioni  e clicchi sul bottone “prova”  dovrebbero esserci due immagini … che non ci sono. Per la prima ho copiato esattamente il tuo codice. Appaiono le aree sensibili, ma non l’immagine, né i collegamenti. Nella seconda ho creato io un’immagine sensibile con dreamweaver e in dreamweaver funzionante. Anche in questo caso appaiono i collegamenti (collegamenti a testi che sono presenti nel codice) ma non l’immagine. Evidentemente debbo modificare il percorso dell’immagine, ma …

...!... non esiste il file santagata.jpg 

... vedi: http://www.noteartistiche.it/traduzioni/files/santagata.jpg

... invece nel mio esempio esiste, vedi :    http://www.zspace.it/kolasim/website/mappatura/files/santagata.jpg   (che mi sono inventato)

... hai allegato l'immagine all'oggetto codice html come detto in precedenza...?

... ...

...!... anche questa immagine (DW) non esiste:  http://www.noteartistiche.it/traduzioni/immagini/14_a.jpg

.

ciao, KolAsim

... trovata quella di DW, l'hai messa in cartella "files" anzichè come hai dichiarato "immagini".!.

http://www.noteartistiche.it/traduzioni/files/14_a.jpg

... quindi per DW basta che usi questo URL... (e DW non fa la differenza)

...

.

ciao

Non ho allegato l’immagine perché nella mia versione non c’è il pulsante allega, ma una sezione “esperto” dove si possono allegare file. Non capsico però come. Se io semplicemente inserisco l’immagine, ma non dico che va collegata ad una determinata porzione del codice superiore credo non funzionerà mai. Ma non so come fare e la guida cartacea è estremamente laconica perché, immagino, presuppone che questo tipo di problemi siano riservati ad un pubblico esperto (ed io non lo sono … per questo uso incomedia) ...

non ho capito, ma se mi rimandi tutto il codice modificato

Grazie!!

Ho fatto e funziona. Quello che non capsico è il perché dal momento che ho semplicemente copiato il codice così come appariva in DW. Adesso vedremo cosa succederà quando faro altri collegamenti non a dei testi, ma a delle immagini. Grazie davvero per l’aiuto e la pazienza … come dice mia figlia non ho l’età per fare di queste cose, ma io insisto e con qualche anonimo benefattore forse ce la farò.

Grazie ancora

Franco

... ma sì, ...l'importante è capire la chiave, poi tutto diventa semplice...

... per  anni nell'Avo di Answers ci sono stati decine di casi simili, non sei il primo e non sarai l'ultimo, ma come detto, una volta capito si diventerà dei professori (senza offesa di questi tempi che corrono)...

... per quanto il come fare ad allegare immagine, l'hai già individuato, [ ... ... una sezione “esperto” dove si possono allegare file...]...

... ecco è proprio lì, ove puoi controllare o indicare la cartella destinataria dell'immagine, che dovrà essere "files", creata automaticamente dal programma...

... l'immagine sarà rilevata anche nel test in Anteprima...

.

ciao, KolAsim

… gioia di breve durata. Ho fatto un terzo collegamento e questa volta ad un’immagine. Poi ho cambiato “immagini” (che è la directory di DW) con files, esattamente come per l’immagine di prima … ma non funziona. Probabilmente l’errore sta nel diverso collegamento: la prima è un’immagine fissa sulla quale sono impostati i collegamenti caratterizzata dal comando “img src”. La seconda è preceduta dal comando “href” che immagino dovrà essere trattato in altro modo. Ho visto inoltre che l’immagine appare con una barra di scorrimento che in DW non c’è. Da dove salta fuori? Ti mando l’intero codice modificato con “files” a posto di “immagini” rilevando però che il collegamento sull’angelo non funziona e comunque adesso è tardi. Ne riparleremo domani se sarai ancora disponibile.

codice:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento senza titolo</title> <style type="text/css"> <!-- .azzurro {  color: #039; } #volto_madonna {  position:absolute;  left:400px;  top:138px;  width:200px;  height:250px;  z-index:1;  background-color: #FFCC00;  visibility: hidden; } #bambino_intero {  position:absolute;  left:400px;  top:139px;  width:200px;  height:250px;  z-index:2;  background-color: #66FF99;  visibility: hidden; } #apDiv1 {  position:absolute;  left:700px;  top:150px;  width:250px;  height:300px;  z-index:3; } #apDiv2 {  position:absolute;  left:750px;  top:150px;  width:300px;  height:300px;  z-index:3; } --> </style> <script type="text/javascript"> <!-- function MM_showHideLayers() { //v9.0   var i,p,v,obj,args=MM_showHideLayers.arguments;   for (i=0; i<(args.length-2); i+=3)   with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];     if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }     obj.visibility=v; } } //--> </script> </head>

<body> <div id="volto_madonna">   <p align="center"><strong>volto della Madonna</strong></p>   <p align="center">particolare del volto a bassorilievo colorato. Realizzato in stucco su supporto ligneo.</p> </div> <div id="bambino_intero">   <p align="center"><strong>Figura Bambino</strong></p>   <p align="center">seduto sul grembo materno con le insegne della regalità</p> </div> <h1 align="center" class="azzurro">che opera è</h1> <p>&nbsp;</p> <p>   <img src="files/14_a.jpg" alt="madonna in trono" width="305" height="420" border="0" usemap="#Madonna_bambino" />   <map name="Madonna_bambino" id="Madonna_bambino">     <area shape="rect" coords="106,112,178,261" href="#" title="Bambino intero" onmouseover="MM_showHideLayers('bambino_intero','','show')" onmouseout="MM_showHideLayers('bambino_intero','','hide')" />     <area shape="poly" coords="169,108,172,100,171,90,177,76,183,49,176,26,156,18,149,19,133,22,124,26,119,30,114,41,111,51,111,57,114,68,119,75,126,88,131,99,136,104,138,106,150,54,144,106,138,108,142,106" href="#" title="volto Madonna" onmouseover="MM_showHideLayers('volto_madonna','','show')" onmouseout="MM_showHideLayers('volto_madonna','','hide')" />     <area shape="rect" coords="7,42,77,149" href="files/angelo.jpg" alt="angelo" />   </map> </p> </body> </html>

...!... angelo.jpg non esiste:    http://www.noteartistiche.it/traduzioni/files/angelo.jpg

... se usi URL con percorso files/nomeimmagine.jpg, nomeimmagine.jpg la devi allegare col procedimento già detto, ...oppure uploadare con un programma FTP qualsiasi indirizzato alla cartella "files"...

(... se invece fai uso di Path diretta, nomeimmagine.jpg, questa deve risiedere nella radice del sito...)

... hai pasticciato nel codice, ...esistono troppi TAG univoci replicati, tipo BODY, HTML...

... vedi la barra di scroll perchè il contenuto del DIV è di misure maggiori ad esso...

...

... eri già arrivato a buon punto, ...lascia perdere DW che ha sempre creato problemi, se non in mani esperte, ed in anni di Forum ed Answers non ne abbiamo mai incontrati...

... eventualmente, se hai le semplici basi di conoscenza delle cordinate cartesiane prova con il suggerimento di Icm:  http://www.websitex5.com/it/resources/tips_0910.pdf ...è molto semplice, e con un qualsiasi programma di grafica si rilevano automaticamente i punti x/y in cui agisce il cursore del mouse, anche con il semplice Ms-Paint, sulla barra di stato in basso a destra...

... se servono altri chiarimenti fatti risentire...

.

ciao, KolAsim