Unofficial WebSite X5
WebSite X5 versioni obsolete => WebSite X5 [v9] - Discussioni Generali => Topic aperto da: Miss. Lin - 18 Gennaio, 2013, 16:51:49
-
Salve a tutti, sto provando a realizzare un'immagine cliccabile, in modo particolare vorrei poter rendere cliccabile l'indirizzo e-mail dell'immagine allegata.
Sto cercando di applicare il codice che segue, ovviamente modificandolo a mio interesse (noterete che è quello utilizzato per le map):
<MAP NAME="recapiti">
<AREA SHAPE="rect" COORDS="133,321,585,489" HREF="images/Recapiti.png" TITLE="clicca per inviare un'e-mail" ALT=" clicca per inviare un'e-mail" />
</MAP>
<IMG SRC="images/Recapiti.png" width="630" height="502"/>
Allo stato attuale ho ridimensionato l'immagine ma non riesco a ricavare le coordinate giuste per la zona che a me serve. Qualcuno sa dirmi come posso ricavarle?
Inoltre potete indicarmi il codice da inserire per dare l'effetto ombra all'immagine?
Grazie a tutti per la disponibilità.
-
Salve a tutti, sto provando a realizzare un'immagine cliccabile, in modo particolare vorrei poter rendere cliccabile l'indirizzo e-mail dell'immagine allegata.
Sto cercando di applicare il codice che segue, ovviamente modificandolo a mio interesse (noterete che è quello utilizzato per le map):
<MAP NAME="recapiti">
<AREA SHAPE="rect" COORDS="133,321,585,489" HREF="images/Recapiti.png" TITLE="clicca per inviare un'e-mail" ALT=" clicca per inviare un'e-mail" />
</MAP>
<IMG SRC="images/Recapiti.png" width="630" height="502"/>
Allo stato attuale ho ridimensionato l'immagine ma non riesco a ricavare le coordinate giuste per la zona che a me serve. Qualcuno sa dirmi come posso ricavarle?
Inoltre potete indicarmi il codice da inserire per dare l'effetto ombra all'immagine?
Grazie a tutti per la disponibilità.
Due indirizzi per due metodi
http://www.essedi.altervista.org/_sito/mappatura-immagine.html
http://www.essedi.altervista.org/_sito/con-css.html
-
Ciao essedi e grazie per la risposta. Io ho risolto con il programma Gimp, il quale è in grado di farti le mappature in maniera automatica, dopo di che basta copiare il codice ed inserirlo in oggetto html.
-
ciao, scusate.... cpm photoshop jo mappato una foto e salvato
...
mi ritrovo il file html e la cartella immagini... ma come faccio a inserirla in una pagina con x9?
Ho fatto copia incolla in un widget html, ma nell'anteprima non vedo le immagini ma solo le sezioni della mappa.
I riferimenti ai link delle foto devono essere cambiati come percorso?
;D
grazie ;)
-
ciao, scusate.... cpm photoshop jo mappato una foto e salvato
...
mi ritrovo il file html e la cartella immagini... ma come faccio a inserirla in una pagina con x9?
Ho fatto copia incolla in un widget html, ma nell'anteprima non vedo le immagini ma solo le sezioni della mappa.
I riferimenti ai link delle foto devono essere cambiati come percorso?
;D
grazie ;)
posta il codice che hai inserito altrimenti è difficile dare una risposta corretta..
-
Miss. Lin, non dimenticare di indicare il giusto percorso dell'immagine...altrimenti il codice serve a poco ;)
Sono felice che qualcuno apprezzi GIMP....fa anche molto di più di una mappatura d'immagine ;)
p.s: La bellissima Miss Lin.
-
posta il codice che hai inserito altrimenti è difficile dare una risposta corretta..
Grazie per la risposta, metto il codice, ho solo tolto i link originali con delle xxxxxx
in locale va tutto bene, ma poi credo di non sapere bene come inserirlo con x9..
<html>
<head>
<title>2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (2.JPG) -->
<table id="Tabella_01" width="769" height="433" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="11">
<img src="immagini/prova_01.png" width="768" height="62" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="1" height="62" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<img src="immagini/prova_02.png" width="170" height="139" alt=""></td>
<td colspan="2" bgcolor="#FFFFFF">
<a href="http://www.xxxx.html">
<img src="immagini/2_03.png" width="68" height="84" border="0" alt=""></a></td>
<td colspan="7" rowspan="2">
<img src="immagini/prova_04.png" width="530" height="124" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="1" height="84" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="immagini/prova_05.png" width="68" height="55" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="1" height="40" alt=""></td>
</tr>
<tr>
<td rowspan="8">
<img src="immagini/prova_06.png" width="63" height="246" alt=""></td>
<td rowspan="3" bgcolor="#FFFFFF">
<a href="www.xxx.html">
<img src="immagini/2_03-08.png" width="105" height="118" border="0" alt=""></a></td>
<td colspan="5" rowspan="2">
<img src="immagini/prova_08.png" width="362" height="42" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td rowspan="7">
<img src="immagini/prova_09.png" width="156" height="231" alt=""></td>
<td colspan="2" rowspan="3" bgcolor="#FFFFFF">
<a href="www.xxxxxxxxxx.html">
<img src="immagini/2_06.png" width="71" height="115" border="0" alt=""></a></td>
<td rowspan="7">
<img src="immagini/prova_11.png" width="11" height="231" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img src="immagini/prova_12.png" width="130" height="108" alt=""></td>
<td rowspan="4" bgcolor="#FFFFFF">
<a href="www.xxxxxxxxxxxxxxx.html">
<img src="immagini/2_03-14.png" width="39" height="125" border="0" alt=""></a></td>
<td rowspan="6">
<img src="immagini/prova_14.png" width="193" height="204" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="1" height="76" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="immagini/prova_15.png" width="105" height="128" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="1" height="12" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="4">
<img src="immagini/prova_16.png" width="71" height="116" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="immagini/prova_17.png" width="36" height="96" alt=""></td>
<td rowspan="2" bgcolor="#FFFFFF">
<a href="http://www.xxx.html">
<img src="immagini/2_18.png" width="55" height="40" border="0" alt=""></a></td>
<td rowspan="3">
<img src="immagini/prova_19.png" width="39" height="96" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="immagini/prova_20.png" width="39" height="79" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="1" height="23" alt=""></td>
</tr>
<tr>
<td>
<img src="immagini/prova_21.png" width="55" height="56" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="1" height="56" alt=""></td>
</tr>
<tr>
<td>
<img src="immagini/spaziatore.gif" width="156" height="1" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="14" height="1" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="57" height="1" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="11" height="1" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="63" height="1" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="105" height="1" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="36" height="1" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="55" height="1" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="39" height="1" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="39" height="1" alt=""></td>
<td>
<img src="immagini/spaziatore.gif" width="193" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
-
Miss. Lin, non dimenticare di indicare il giusto percorso dell'immagine...altrimenti il codice serve a poco ;)
Sono felice che qualcuno apprezzi GIMP....fa anche molto di più di una mappatura d'immagine ;)
Figurati, funziona benissimo infatti e poi è molto semplice da utilizzare.
p.s: La bellissima Miss Lin.
-
È questo link dove porta? <a href="www.xxxxxxxxxx.html"> penso sarebbe più giusto una cosa del genere..... <a href="www.xxxxxxxxxx.it/xxxxxx.html"> :-X
-
B.Shake, perchè non ti scarichi Gimp e fai la mappatura? Dopo che ti sei ritrovato il codice basta che lo inserisci in oggetto html ed il gioco è fatto.
Ti mostro il mio esempio x rendere l'idea.
http://www.sflabrador.it/links-contatti.html noterai che sull'immagine dei dati personali, se passi col mouse sull'indirizzo email, questo ti permette appunto di inviare una email (il tutto fatta con Gymp). Assicurati che le immagini abbiano dimensioni decenti e non immense.
-
B.Shake, perchè non ti scarichi Gimp e fai la mappatura? Dopo che ti sei ritrovato il codice basta che lo inserisci in oggetto html ed il gioco è fatto.
Ti mostro il mio esempio x rendere l'idea.
http://www.sflabrador.it/links-contatti.html noterai che sull'immagine dei dati personali, se passi col mouse sull'indirizzo email, questo ti permette appunto di inviare una email (il tutto fatta con Gymp). Assicurati che le immagini abbiano dimensioni decenti e non immense.
Un piccolo appunto. Nel sito che ti avevo suggerito, per i tag <area> sono utilizzati sia l'attributo ALT sia l'attributo TITLE.
Nel tuo codice hai inserito solo l'attributo ALT. Il suo contenuto (Scrivici una e-mail) somiglia più ad un tootltip da mostrare al passaggio del mouse. Non è questa la funzione di ALT: assolve a tale compito solo con Internet Explorer.
Se vuoi visualizzare un tooltip anche con FF e Chrome, devi inserire anche l'attributo TITLE.
-
...[...]... ... ... ... ma poi credo di non sapere bene come inserirlo con x9..
... ... [.. ...] ... ...
Ciao,
...
... vedo che è un intabellamento, quindi da verificare se avrà l'aspetto conforme sui vari browser...
... per come è strutturato il codice attuale, ... devi avere la cartella "immagini" nella ROOT del Sito...
... non funzionerà in Anteprima, ma devi esportare il Sito in una Cartella del PC...
... in WebSiteX5evolution devi inserire un Oggetto Codice HTML, largo almeno 770px, e gli devi assegnare l'altezza di almeno 435px, e nel pannello HTML incollarci tutto il codice compreso nei TAG commenti, cioè questi:
...
... potrebbe funzionarti in Anteprima se alleghi le immagini con l'Oggetto Codice HTML, indicando la cartella da usare, con la v.9 potresti mantenere la stessa, "immagini", dichiarandola al posto di quella di default "files", ... e facendo così la cartella "immagini" sarà creata automaticamente in ROOT...
...
... non vedo JavaScript, per cui non capisco cosa vorresti ottenere...
...
... ti faccio vedere un >> esempio (http://www.zspace.it/kolasim/wsx5_v8/mappaFabrianoRollOver/) che avevo fatto nel vecchio Forum, ... dal cui codice potresti trovarne giovamento...
... e per curiosità anche la >> versione SWF (http://www.zspace.it/kolasim/wsx5_v8/varie/fabriano1.html), incomparabile per risultati e velocità, fatta con SwishMax...
.
bye, sextus
.