|
|
Rank: AiutAmico
Iscritto dal : 10/19/2010
Posts: 66
|
Ciao a tutti, ho iniziato ad usare le Mappe Immagine: Ecco il listato:
<map name="Nome"><area shape="rect" coords=" 40, 203, 91, 3" href="index.html"> <area shape="rect" coords=" 39, 189, 3, 35" href="index.html" title="POCHETTE"></map> <img alt="Pochette,Cioccolatini Ripieni" title="Tenerelli e Ripieni" src="foto/POruhmCIOCliq.gif" width= 95 height= 205 usemap="#Nome" ismap>
Ora vorrei cambiare il colore dei Links (che ora sono blu) ..(e rimandano alla pagina iniziale perché sono ancora in fase di sperimentaz.) anzi: Tutta la mappa ha il bordo blu.. Come si può impostare il CSS in modo che la mappa non abbia bordo e (se si può) fare in modo che le varie AREAs abbiano un colore "link" e "visited"?
|
|
|
|
|
|
Rank: AiutAmico
Iscritto dal : 6/20/2008
Posts: 7,111
|
Per l'immagine bordata di blu dovrebbe essere sufficiente questa piccola modifica al codice: <img alt="Pochette,Cioccolatini Ripieni" title="Tenerelli e Ripieni" src="foto/POruhmCIOCliq.gif" width= 95 height= 205 border="0" usemap="#Nome" ismap>. Non so, infine, se sia possibile che le varie aree abbiano un colore "link" e "visited". Ciao.
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
archimede70 ha scritto:Ciao a tutti, ho iniziato ad usare le Mappe Immagine: Ecco il listato:
<map name="Nome"><area shape="rect" coords=" 40, 203, 91, 3" href="index.html"> <area shape="rect" coords=" 39, 189, 3, 35" href="index.html" title="POCHETTE"></map> <img alt="Pochette,Cioccolatini Ripieni" title="Tenerelli e Ripieni" src="foto/POruhmCIOCliq.gif" width= 95 height= 205 usemap="#Nome" ismap>
Ora vorrei cambiare il colore dei Links (che ora sono blu) ..(e rimandano alla pagina iniziale perché sono ancora in fase di sperimentaz.) anzi: Tutta la mappa ha il bordo blu.. Come si può impostare il CSS in modo che la mappa non abbia bordo e (se si può) fare in modo che le varie AREAs abbiano un colore "link" e "visited"? Ma non avevamo già affrontato questo problema? --> Bottoni animati..Con i CSS (il rimando è direttamente alla pagina 2: nel secondo intervento di quella pagina ti suggerivo come risolvere). Ciao!
|
|
Rank: AiutAmico
Iscritto dal : 10/19/2010
Posts: 66
|
wubullo ha scritto:Ma non avevamo già affrontato questo problema? --> Bottoni animati..Con i CSS (il rimando è direttamente alla pagina 2: nel secondo intervento di quella pagina ti suggerivo come risolvere).Ciao!
Ho usato un programma,lo ammetto,(ma solo per avere le coordinate) Ma mi aspettavo mi desse un tag contenente qualche<.......a.....href........ In quel caso avrei utilizzato l' A CLASS "pulsante" che mi avevi postato........ Ma qui non so cosa "classare" con gli attributi che voglio: La MAP me lo ha detto ECO (grazie ECO) ....ma poi cosa faccio? Devo inserire <a class="pulsante" href.....> all'interno di <area shape....>?  o creare una classe .rect per le aree rettangolari?? (SI,ovviamente quando ho capito cosa "classare" e come ricopio gli attributi che hai dato ad a class PULSANTE) .....ma purtroppo non ho capito cosa "classare" e come need help
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
HTML: <area id="pincopallo">...</area> <area id="lavispateresa">...</area> CSS: #pincopallo:link { color:#00FF00; } #pincopallo:visited { color:#00FF00; } #lavispateresa:link { color:#00FF00; } #lavispateresa:visited { color:#00FF00; } E' una roba sperimentale, che ho partorito su due piedi... Ma non so se funziona! Senti, facciamo una bella cosa: perché non ti crei una pagina sul sito che sia non raggiungibile dalla homepage, ma su cui tu fai le prove e che anche noi possiamo vedere (se ci dai l'indirizzo, anche via PM)? Lavorare sempre al buio è un po' difficile... 
|
|
Rank: AiutAmico
Iscritto dal : 10/19/2010
Posts: 66
|
OK, entro stasera faccio la "Stanza Segreta" con questi Esperimenti
a più tardi.............
Come Sempre, Troppo Gentile.
ciao
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
archimede70 ha scritto:OK, entro stasera faccio la "Stanza Segreta" con questi Esperimenti
a più tardi............. Perfetto: rimaniamo in attesa! archimede70 ha scritto:Come Sempre, Troppo Gentile. Figurati, non c'è di che! A presto.
|
|
Rank: AiutAmico
Iscritto dal : 10/19/2010
Posts: 66
|
Ho caricato la pag: www.pausacaffepg.it/secret.htm
Inoltre ho trovato questo, ho scaricato una release con 2 files .js: [b]jquery.maphilight.js e jquery.maphilight.min.js [ /b] dal sito http://plugins.jquery.com/node/1837/releasema non son riuscito a farlo funzionare.
Ho provato come diceva Wubullo (creando un .css a parte, ...eccolo) #LP:link { text-decoration: none; color: #eeeeee; } #LP:hover { color: #ffffff; } #LP:visited { color: #bbbbbb; }
ma non funziona. Inoltre sono riuscito a togliere il bordo della MAP mettendo border=0 nel tag <img.......> altrimenti non funziona. Passo la palla..........
|
|
Rank: AiutAmico
Iscritto dal : 10/19/2010
Posts: 66
|
PS: ho provato anche con class"LP" ma senza la sottoclasse "shape", non lo so scrivere...
ma credo si debba usare uno script .js
|
|
Rank: AiutAmico
Iscritto dal : 10/19/2010
Posts: 66
|
Cambiato: ho provato a farlo con i CSS (ho trovato un css che "simula le mappe") ed ho provato ad usarlo ma pur avendolo messo all'interno del DIV dell'immagine per il posizionamento mi appare sotto l'immagine (si vede perchè appaiono i "title" il CSS l'ho modificato così: #mappa { position: relative; border-color: #000000; border: 1pt; list-style-type: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 95px; height: 205px; } #mappa li { display: block; position: absolute; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #link_a { top: 65; left: 1; width: 40px; height: 110px } #link_a:hover { border-color:#ffffff; } #link_a:visited { border-color:#aaaaaa; } #link_b { top: 1px; left: 41px; width: 50px; height: 205px } #link_b:hover { color:#ffffff; } #link_b:visited { color:#aaaaaa; } #mappa a { display: block; width: 100%; height: 100%; color: #dddddd; } #mappa a:hover { color: #ffffff; } #mappa a:visited { color: #000000; } (è all'ind: www.pausacaffepg.it/secret.htm) Perchè non mi funzionano i bordi?? 
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
Ciao Archimede! Ho paura di essermi perso... Tu vuoi ottenere una cosa del genere? --> http://davidlynch.org/js/maphilight/docs/demo_usa.html (si tratta della demo del plugin JQuery che hai segnalato) In tal caso, ignora pure le indicazioni "sperimentali" che ti ho dato (inizialmente avevo capito un'altra cosa): bisogna che ricominciamo da capo... Attendo comunque una tua conferma, per evitare altre gaffe... 
|
|
Rank: AiutAmico
Iscritto dal : 10/19/2010
Posts: 66
|
ESATTO!
Senza riempimento, solo contorno...
ma l'idea è questa!
se è il Link che ho postato io
oltre ai 2 jquery.js
ci vuole anche una parte html (che non ho trovato)
Attendo Lumi..........
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
archimede70 ha scritto:ESATTO!
Senza riempimento, solo contorno... OK, perfetto. Scusami, sono io che sono un po' rintronato ultimamente...  Prima di risponderti nel merito della questione, due piccoli consigli generali (ovviamente, non vincolanti). 1) Quando si mappa un'immagine, per risparmiare tempo e mark-up, conviene utilizzare una sola immagine; in altri termini, tutte le micro-immagini che tu hai affiancato separatamente io le riunirei in un'unica grande immagine: questo, tra l'altro, ti permette di gestire il layout più facilmente (attraverso il programma di grafica), senza impazzire nell'allineamento dei singoli elementi attraverso i CSS. 2) Il mark-up ottimale e più fluido per una "mappa-immagine" è questo: Code:<img class="quella-che-vuoi-tu" src="tua_immagine.png" width="800" height="600" usemap="#pippo" /> <map name="pippo"> <!-- da notare che il 'name' del tag <map> e l'attributo 'usemap' del tag <img> devono avere lo stesso valore! --> <area href="#" title="Tavola" shape="poly" coords="1,2,3,4,5,6"></area> <area href="#" title="Sedia" shape="poly" coords="7,8,9,10,11,12"></area> <area href="#" title="Specchio" shape="circle" coords="13,14,15,16,17,18"></area> </map> N.B.: forma e coordinate sono messe a caso. Venendo ora alle nostre cose: archimede70 ha scritto:ma l'idea è questa!
se è il Link che ho postato io
oltre ai 2 jquery.js
ci vuole anche una parte html (che non ho trovato) I due file .js che trovi nella cartella scaricata dal sito di JQuery non basta linkarli, ma devi caricarli sul tuo sito! Inoltre, bisogna che tu carichi jquery.maphilight.js, jquery-1.4.2.min.js e jquery.metadata.min.js (questi ultimi due file sono contenuti nella cartella docs); la versione "minified" di maplight ( jquery.maphilight.min.js) non ti serve. Dopo aver caricato e linkato i file nella/e pagina/e del tuo sito, devi anche inizializzare lo script: tutto questo, però, deve avvenire prima della chiusura del tag </head> (ricontrolla bene il sorgente della tua pagina...  ). In sintesi, devi scrivere così: Code:<head>
<!-- metadati -->
<title>Secret room</title>
<!-- link ai file .CSS esterni -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.metadata.min.js"></script>
<script type="text/javascript" src="jquery.maphilight.js"></script>
<script>
$(function() {
$('.map').maphilight();
});
</script>
<!-- eventuali altre robe -->
</head> Questa istruzione $('.map').maphilight(); significa che lo script applica certe proprietà a ciò che nella pagina ha come classe CSS "map": puoi cambiare questo valore, ma ricorda che lo devi replicare nella classe del tag <img> da mappare. Fa' intanto questa lunga serie di cose preparatorie... Al termine di queste, ti dirò come rimuovere il riempimento, usare colori e spessori diversi per il bordo, ecc... A presto!
|
|
Rank: AiutAmico
Iscritto dal : 10/19/2010
Posts: 66
|
wubullo ha scritto:
1) Quando si mappa un'immagine, per risparmiare tempo e mark-up, conviene utilizzare una sola immagine; in altri termini, tutte le micro-immagini che tu hai affiancato separatamente io le riunirei in un'unica grande immagine: questo, tra l'altro, ti permette di gestire il layout più facilmente (attraverso il programma di grafica), senza impazzire nell'allineamento dei singoli elementi attraverso i CSS.
C'è un problema: (che ancora non è emerso): Nota che lo sfondo è una scaffalatura: Tante immagini mi servono per "sistemare" le varie cose nelle varie mensole (xes le bottiglie in quelle strette e alte) Se lo facessi intero ( 800x600) impazzirei. Mi sembrava la soluz. migliore per soddisfare il rapporto "Impatto Grafico/Peso Files" ora, quando ho riempito tutta la scaffalatura (con position:absolute) se su qualche computer con impostazioni grafiche differenti risulta tutto messo a caso Riconcepisco tutta la pagina (sfondo bianco e file Prodotti unico- .jpg anzichè .gif)
Ora vado ad impazzire con il .js Ciao
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
archimede70 ha scritto:ora, quando ho riempito tutta la scaffalatura (con position:absolute)
se su qualche computer con impostazioni grafiche differenti
risulta tutto messo a caso
Riconcepisco tutta la pagina (sfondo bianco e file Prodotti unico- .jpg anzichè .gif) Ottimo! Nel malaugurato caso in cui dovessi riconcepire la pagina e fare un'unica immagine, ti consiglierei di fare un .png con lo sfondo trasparente: così, l'immagine si adatterebbe a qualsiasi sfondo (nel tuo caso, lo scaffale sottostante). archimede70 ha scritto:Ora vado ad impazzire con il .js Alla prossima!
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
Ciao Archimede!
Ti segnalo che ho fatto una modifica nel mio penultimo intervento (sabato 4 dicembre 2010 18.25.29), laddove ti indicavo quali script caricare sul tuo sito e quale codice scrivere nell'<head> della pagina per farli funzionare.
Ho aggiunto una terza libreria, necessaria a personalizzare gli effetti su ogni singola porzione dell'immagine. Ho aggiornato pertanto anche il codice, che puoi utilizzare così come sta (aggiornando eventualmente la destinazione dei link, se carichi gli script in qualche cartella particolare).
A presto!
|
|
Rank: AiutAmico
Iscritto dal : 10/19/2010
Posts: 66
|
wubullo ha scritto:2) Il mark-up ottimale e più fluido per una "mappa-immagine" è questo: Code:<img class="quella-che-vuoi-tu" src="tua_immagine.png" width="800" height="600" usemap="#pippo" /> Qui non ho capito cosa mettere nel .css in (img.quella-che-vuoi-tu) wubullo ha scritto:Inoltre, bisogna che tu carichi jquery.maphilight.js, jquery-1.4.2.min.js e jquery.metadata.min.js (questi ultimi due file sono contenuti nella cartella docs); In sintesi, devi scrivere così: Code:<head>
<!-- metadati -->
<title>Secret room</title>
<!-- link ai file .CSS esterni -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.metadata.min.js"></script>
<script type="text/javascript" src="jquery.maphilight.js"></script>
<script>
$(function() {
$('.map').maphilight();
});
</script>
<!-- eventuali altre robe -->
</head> Qui, probabilmente ho scaricato una release diversa perchè non c'è ="jquery-1.4.2.min.js" ma ="jquery-1.2.3.pack.js" wubullo ha scritto:Questa istruzione $('.map').maphilight(); significa che lo script applica certe proprietà a ciò che nella pagina ha come classe CSS "map": puoi cambiare questo valore, ma ricorda che lo devi replicare nella classe del tag <img> da mappare. FATTO, (macello credo) perchè qualcosa non funziona Sono un po' perso Pubblico tutto e attendo il punto...
|
|
Rank: AiutAmico
Iscritto dal : 12/9/2009
Posts: 345
|
archimede70 ha scritto:Qui, probabilmente ho scaricato una release diversa perchè non c'è ="jquery-1.4.2.min.js"
ma ="jquery-1.2.3.pack.js" Ti conviene scaricare la versione 1.2.2, che integra molte funzionalità in più --> http://plugins.jquery.com/files/maphilight-1.2.2-0-gb10818c.zip. Qui dentro trovi tutti gli script che ti servono (compreso jquery-1.4.2.min.js): ti consiglio di sostituire anche jquery.metadata.min.js e jquery.maphilight.js, caricando sul sito le versioni aggiornate contenute nella cartella che ti ho fatto scaricare e sbarazzandoti delle precedenti. Alla fine, varrà ancora il codice: Code:<head>
<!-- metadati -->
<title>Secret room</title>
<!-- link ai file .CSS esterni -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.metadata.min.js"></script>
<script type="text/javascript" src="jquery.maphilight.js"></script>
<script>
$(function() {
$('.map').maphilight();
});
</script>
<!-- eventuali altre robe -->
</head> archimede70 ha scritto:wubullo ha scritto:2) Il mark-up ottimale e più fluido per una "mappa-immagine" è questo: Code:<img class="quella-che-vuoi-tu" src="tua_immagine.png" width="800" height="600" usemap="#pippo" /> Qui non ho capito cosa mettere nel .css in (img.quella-che-vuoi-tu) wubullo ha scritto:Questa istruzione $('.map').maphilight(); significa che lo script applica certe proprietà a ciò che nella pagina ha come classe CSS "map": puoi cambiare questo valore, ma ricorda che lo devi replicare nella classe del tag <img> da mappare. Al posto della classe "quella-che-vuoi-tu" devi mettere il nome... che vuoi tu, avendo l'accortezza di replicarlo in fase di inizializzazione dello script. Esempio: Commenta:<head> <!-- metadati --> <title>Secret room</title> <!-- link ai file .CSS esterni --> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery.metadata.min.js"></script> <script type="text/javascript" src="jquery.maphilight.js"></script> <script> $(function() { $('. archimede').maphilight(); }); </script> <!-- eventuali altre robe --> </head> <body> <img class=" archimede" src="tua_immagine.png" width="800" height="600" usemap="#pippo" /> <map name="pippo"> <area href="#" title="Tavola" shape="poly" coords="1,2,3,4,5,6"></area> <area href="#" title="Sedia" shape="poly" coords="7,8,9,10,11,12"></area> <area href="#" title="Specchio" shape="circle" coords="13,14,15,16,17,18"></area> </map> </body> Se hai altri dubbi, non esitare a chiedere. Alla prossima!
|
|
Rank: AiutAmico
Iscritto dal : 10/19/2010
Posts: 66
|
wubullo ha scritto: $(function() { $('. archimede').maphilight(); }); </script> <!-- eventuali altre robe --> <img class=" archimede" src="tua_immagine.png" width="800" height="600" usemap="#pippo" /> <map name="pippo">........</map> Ok,(credevo che $('.bla,bla') si riferisse alla mappa) Non mi è chiaro solo se la classe "img" (archimede) la devo definire io nel .css o se basta così com'è scritto nel file .html e il resto lo fa lui con i 3 .js Comunque faccio le modifiche e carico. Dopo mi guardi se va bene? (ma puoi vedere anche il .css o devo postarlo?) A presto.
|
|
|
Guest |