« precedente successivo »
Pagine: 1   Vai giù

Autore Topic: Realizzare immagine cliccabile  (Letto 5879 volte)

Miss. Lin

  • Utente inesperto
  • **
  • Post: 189
Realizzare immagine cliccabile
« il: 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à.
Connesso

essedi

  • Anziani
  • Utente esperto
  • *
  • Post: 418
Re:Realizzare immagine cliccabile
« Risposta #1 il: 18 Gennaio, 2013, 18:21:06 »
Citazione 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à.


Due indirizzi per due metodi

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

http://www.essedi.altervista.org/_sito/con-css.html
Connesso

Miss. Lin

  • Utente inesperto
  • **
  • Post: 189
Re:Realizzare immagine cliccabile
« Risposta #2 il: 21 Gennaio, 2013, 12:39:21 »
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.
Connesso

B.Shake

  • Nuovo arrivato
  • *
  • Post: 36
Re:Realizzare immagine cliccabile
« Risposta #3 il: 17 Febbraio, 2013, 17:11:53 »
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  ;)
Connesso

milux

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 1779
    • 3MD
Re:Realizzare immagine cliccabile
« Risposta #4 il: 17 Febbraio, 2013, 18:16:57 »
Citazione da: B.Shake - 17 Febbraio, 2013, 17:11:53
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..
Connesso
**OS : Windows 7 - 63Bit (uno è andato perso e non lo trovo..) + W10
**Website X5 :  Evo 10(active) - Evo 11(active) - 13(active)
**Wysiwyg Web Builder 12 (passa al lato oscuro..)
**Hosting : LINUX
**Editor : Notepad ++ / Geany

XC

  • Nuovo arrivato
  • *
  • Post: 63
Re:Realizzare immagine cliccabile
« Risposta #5 il: 17 Febbraio, 2013, 19:05:26 »
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. 
« Ultima modifica: 17 Febbraio, 2013, 19:12:26 da XC »
Connesso
Non è che noi non osiamo fare le cose perché sono difficili, anzi, sono difficili perché non osiamo.

B.Shake

  • Nuovo arrivato
  • *
  • Post: 36
Re:Realizzare immagine cliccabile
« Risposta #6 il: 18 Febbraio, 2013, 00:18:52 »
Citazione da: milux - 17 Febbraio, 2013, 18:16:57



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>
Connesso

Miss. Lin

  • Utente inesperto
  • **
  • Post: 189
Re:Realizzare immagine cliccabile
« Risposta #7 il: 18 Febbraio, 2013, 00:20:27 »
Citazione da: XC - 17 Febbraio, 2013, 19:05:26
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.
Connesso

boschetti.mirko

  • Utente inesperto
  • **
  • Post: 134
Re:Realizzare immagine cliccabile
« Risposta #8 il: 19 Febbraio, 2013, 09:21:20 »
È 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
Connesso

Miss. Lin

  • Utente inesperto
  • **
  • Post: 189
Re:Realizzare immagine cliccabile
« Risposta #9 il: 19 Febbraio, 2013, 10:00:39 »
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.
Connesso

essedi

  • Anziani
  • Utente esperto
  • *
  • Post: 418
Re:Realizzare immagine cliccabile
« Risposta #10 il: 19 Febbraio, 2013, 12:16:17 »
Citazione da: Miss. Lin - 19 Febbraio, 2013, 10:00:39
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.
 
Connesso

empiricus

  • Utente inesperto
  • **
  • Post: 152
Re:Realizzare immagine cliccabile
« Risposta #11 il: 19 Febbraio, 2013, 15:53:44 »
Citazione da: B.Shake - 18 Febbraio, 2013, 00:18:52
...[...]... ... ... ... 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 che avevo fatto nel vecchio Forum, ... dal cui codice potresti trovarne giovamento...


... e per curiosità anche la >> versione SWF, incomparabile per risultati e velocità, fatta con  SwishMax...
 


.
 
bye, sextus





.
Connesso
empiricus
Pagine: 1   Vai su
« precedente successivo »