Immagine con sezioni cliccabili

**geko24** · 21-01-2014, 17:09

Salve gente,
volevo gentilmente chiedervi se potete spiegarmi come inserire nel mio sito web, un'immagine (locandina) che sia cliccabile in vari punti, e cliccando ci sia il reindirizzamento ad un altra pagina del sito.

Ho provato un attimo a cavarmela da solo (non sono per niente esperto di HTML), Cosa faccio allora, con Photoshop creo le sezioni sull'immagine, metto l'url per ogni sezione e faccio 'Salva per web..' Nella cartella in cui salvo l'immagine si crea un'altra cartella 'Immagini' con le immagini delle varie sezioni create sull'immagine totale.

Dalla finestra 'Salva per web..' di Photoshop ho ciccato 'Anteprima' e mi si apre il browser con l'immagine cliccabile e rindirizzamenti ok! Sotto c'è il codice HTML.

Nel mio sito aggiungo elemento HTML, copio il codice dell'immagine e si crea l'immagine ma NON SI VEDE! si vedono sole le sezioni (i cui collegamenti comunque funzionano bene!) e sotto ogni sezione il simbolo di errore nel caricamento dell'immagine (nel MAC è un punto interrogativo su sfondo blu).

E' chiaro che ho sbagliato qualcosa, non sono pratico e sono andato a tentoni. Come si fa?

**bedo1** · 21-01-2014, 17:21

...vedi se ti è utile questo link...

http://www.html.it/pag/16053/le-mappe-di-immagine/

**geko24** · 21-01-2014, 17:43

Ti ringrazio per la risposta.

Vedi, la guida che mi hai indicato già l'avevo trovata, ma non risponde al mio quesito. Io la mappa l'ho già creata sull'immagine, la parte che non riesco a mettere in pratica è la pubblicazione dell'immagine (con mappa) sul mio sito, in quanto non so perché accade ciò che ho descritto nel 1° messaggio.

Potreste spiegarmi quel passaggio?? (caricamento immagine con mappa sul sito web).

**bedo1** · 21-01-2014, 18:35

..prova a postare qui il codice html che ti viene creato da photoshop..
..oppure indica un link al quale vedere la pagina con l'immagine mappata...

**geko24** · 21-01-2014, 18:36

Si mi sono accorto, è che il file .html che apro con Safari, dove c'è l'immagine cliccabile e sotto il codice html non riesco a capire come postarlo! come posso fare? allego il tutto??

**bedo1** · 21-01-2014, 18:39

url errato...verifica...

**bedo1** · 21-01-2014, 18:54

copia e incolla il codice della pagina html nel post...

**geko24** · 21-01-2014, 19:00

oddio non ci sto capendo niente! come faccio a copiare il codice di questa pagina?

**bedo1** · 21-01-2014, 19:03

apri la pagina html creata da photoshop con un editor di testo (ex: notepad) e copia tutto il codice che viene visualizzato
poi lo incolli nella risposta qui nel post

**geko24** · 21-01-2014, 19:08

<html>
<head>
<title>pacchetto4.2-(per-web)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Tabella_01" width="707" height="1001" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<img src="immagini/pacchetto4.2-(per-web)_01.jpg" width="707" height="27" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="immagini/pacchetto4.2-(per-web)_02.jpg" width="342" height="243" alt=""></td>
<td colspan="2">
<a href="http://www.prolococollaltosabino.it/contatti/"
onmouseover="window.status='Contatti'; return true;"
onmouseout="window.status=''; return true;">
<img src="immagini/PacchettoWeb_Contatti.jpg" width="347" height="115" border="0" alt=""></a></td>
<td rowspan="2">
<img src="immagini/pacchetto4.2-(per-web)_04.jpg" width="18" height="243" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="immagini/pacchetto4.2-(per-web)_05.jpg" width="347" height="128" alt=""></td>
</tr>
<tr>
<td colspan="2">
<a href="http://www.prolococollaltosabino.it/il-castello/"
onmouseover="window.status='Il Castello'; return true;"
onmouseout="window.status=''; return true;">
<img src="immagini/PacchettoWeb_Castello.jpg" width="353" height="150" border="0" alt=""></a></td>
<td colspan="2">
<a href="http://www.prolococollaltosabino.it/dove-mangiare/bar/"
onmouseover="window.status='Bar'; return true;"
onmouseout="window.status=''; return true;">
<img src="immagini/PacchettoWeb_Bar.png" width="354" height="150" border="0" alt=""></a></td>
</tr>
<tr>
<td colspan="2">
<a href="http://www.prolococollaltosabino.it/dove-mangiare/ristoranti/belvedere/"
onmouseover="window.status='Belvedere'; return true;"
onmouseout="window.status=''; return true;">
<img src="immagini/PacchettoWeb_Belvedere.png" width="353" height="201" border="0" alt=""></a></td>
<td colspan="2">
<a href="http://www.prolococollaltosabino.it/dove-mangiare/ristoranti/la-quercia/"
onmouseover="window.status='La Quercia'; return true;"
onmouseout="window.status=''; return true;">
<img src="immagini/PacchettoWeb_Quercia.png" width="354" height="201" border="0" alt=""></a></td>
</tr>
<tr>
<td colspan="2">
<a href="http://www.prolococollaltosabino.it/dove-mangiare/ristoranti/la-campagnola/"
onmouseover="window.status='La Campagnola'; return true;"
onmouseout="window.status=''; return true;">
<img src="immagini/PacchettoWeb_Campagnola.png" width="353" height="177" border="0" alt=""></a></td>
<td colspan="2">
<a href="http://www.prolococollaltosabino.it/dove-mangiare/ristoranti/la-locanda-del-poeta/"
onmouseover="window.status='La Locanda del Poeta'; return true;"
onmouseout="window.status=''; return true;">
<img src="immagini/PacchettoWeb_Locanda.png" width="354" height="177" border="0" alt=""></a></td>
</tr>
<tr>
<td colspan="4">
<img src="immagini/pacchetto4.2-(per-web)_12.jpg" width="707" height="163" alt=""></td>
</tr>
<tr>
<td colspan="4">
<a href="http://www.prolococollaltosabino.it/come-arrivare/"
onmouseover="window.status='Come Arrivare'; return true;"
onmouseout="window.status=''; return true;">
<img src="immagini/PacchettoWeb_Come-arrivare.png" width="707" height="39" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<img src="immagini/spaziatore.gif" width="342" height="1" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="11" height="1" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="336" height="1" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="18" height="1" alt=""></td>
</tr>
</table>

</body>
</html>

Non so se è quello che intendevi!

Discussione: Immagine con sezioni cliccabili

Strumenti discussione

Ricerca discussione

Visualizza

Immagine con sezioni cliccabili

Permessi di invio