image map

[squalogu]

Ciao, conoscete un plugin simile a questo?

Codice: [Seleziona]

http://www.youtube.com/watch?v=vQHTTDGA-bo

ho gia visto imagemapster, ma non mi convince.


grazie

[claudio65]

 Da quel che vedo nel video non serve un plugin, per mappare un'immagine si possono utilizzare diversi HTML editor, personalmente uso Dw, ma nulla osta ad usare uno degli innumerevoli esistenti.
L'unico accorgimento che devi adottare prima di incollare l'immagine mappata nei tuoi articoli o moduli è quello di impostare a nessuno  l'editor nella configurazione globale di Joomla.
 

[squalogu]

ok grazie. non riesco solo a capire come poter inserire un scritta cliccabile sopra l'immagine come in questo sito: pugliae.com


come mappare un immagine lo so fare (quindi selezionare e attivare una porzione di immagine e poterci cliccare sopra e arrivare alla pagina che ho linkato)



sai indicarmi come procedere?

[claudio65]

 Nella pagina che indichi anziché mappare l'immagine sono state mappate le scritte, quindi anziché le porzioni d'immagini selezioni le scritte ed il gioco è fatto. 
 

[squalogu]

ok. le scritte però sono stare inserite con un editor immagine come gimp ad esempio o in html, perchè la scritta non mi sembra un immagine..


scusa la confusione ma non riesco a inquadrare la cosa

[claudio65]

Se visioni la pagina con Firebug il codice della scritta Isole Termiti risulta come segue:

Codice: [Seleziona]

<a style="left:100px;top:11px;" title="Hotels Isole Tremiti" href="/hotel/isole-tremiti/">Isole Tremiti</a>events=Object { mouseenter={...}, mouseover={...}, mouseleave={...}, altri elementi...}handle=function()
quindi le scritte sono state inserite come codice non come immagine

[squalogu]

esatto....


mi sai indicare come posso fare.. la mia domanda è proprio questa


grazie!

[claudio65]

Scrivendo il codice come lo puoi vedere con firebug in quella pagina

[squalogu]

il fatto è che non conosco linguaggi di programmazione...


non penso si possa fare con qualche plugin vero?


sai consigliarmi qualche alternativa?

[claudio65]

Sinceramente non conosco alcun plugin che assolva tale compito, in genere la mappatura la faccio con un editor , il mio consiglio è di provarci con un editor  lo stesso ti assisterà nella stesura del codice

[squalogu]

ah dici Firebug?

[squalogu]

passami la domanda, firebug è un plugin di crhome? o joomla?

[maicolstaip]

http://lmgtfy.com/?q=cosa+%C3%A8+firebug

[claudio65]

Santi motori di ricerca 

[squalogu]

era per fugare ogni dubbio huahua 


vedi allegato


cmq grazie

[allegato eliminato automaticamente dopo un anno]

[squalogu]

un componente aggiuntivo per firefox!   

[claudio65]

Firebug plugin per Firefox esiste in versione più lite anche per Chrome

[squalogu]

ma posso spudoratamente copiare?


sai se devo fare variazioni anche al mio CSS principale o basta solo che editi il codice HTML (che ho individuato in riferimento alla mappa.

[squalogu]

Ok, sono riuscito a implementare il codice HTML, ora mi manca la partè più importante…
Come faccio a posizionare le scritte sopra l’immagine, nella parte che mi interessa??

[allegato eliminato automaticamente dopo un anno]

[squalogu]

mi blocco sempre qua..


help..

[luketto]

ti crei nel CSS i relativi selettori e poi li vai a implementare nell'html che hai creato
ti conviene spostarteli con firebug nella posizione che ti serve, ti segni i valori e li metti nel css. io farei così.
è roba di float, margin, padding... cose così.

[squalogu]

ok...... devo fare mente locale 

[squalogu]

Ciao Luketto,


sto studiando dei tutorial su Firebug.


Ho individuato il codice corretto che mi interessa:


questa è la mia immagine:

Codice: [Seleziona]

<img src="images/sardinia.png" width="381" height="450" border="0"




dove ho aggiunto di seguito:

Codice: [Seleziona]



<ul id="maplist">
<li>
<span style="left:43px;top:157px"></span>
<a style="left:49px;top:100px;" title="Hotels Alghero" href="/hotel/alghero/">Alghero</a>
</li>
<li>
<span style="left:270px;top:292px"></span>
<a style="left:276px;top:290px;" title="Hotels Arbatax" href="/hotel/arbatax/">Arbatax</a>
</li>
<li>
<span style="left:86px;top:326px"></span>
<a style="left:92px;top:323px;" title="Hotels Arborea" href="/hotel/arborea/">Arborea</a>
</li>
<li>
<span style="left:89px;top:380px"></span>
<a style="left:55px;top:377px;" title="Hotels Arbus" href="/hotel/arbus/">Arbus</a>
</li>
<li>
<span style="left:135px;top:71px"></span>
<a style="left:98px;top:69px;" title="Hotels Badesi" href="/hotel/badesi/">Badesi</a>
</li>
<li>
<span style="left:232px;top:34px"></span>
<a style="left:162px;top:28px;" title="Hotels Baja Sardinia" href="/hotel/baja-sardinia/">Baja Sardinia</a>
</li>
<li>
<span style="left:73px;top:214px"></span>
<a style="left:44px;top:209px;" title="Hotels Bosa" href="/hotel/bosa/">Bosa</a>
</li>
<li>
<span style="left:268px;top:126px"></span>
<a style="left:274px;top:123px;" title="Hotels Budoni" href="/hotel/budoni/">Budoni</a>
</li>
<li>
<span style="left:174px;top:444px"></span>
<a style="left:132px;top:443px;" title="Hotels Cagliari" href="/hotel/cagliari/">Cagliari</a>
</li>
<li>
<span style="left:256px;top:213px"></span>
<a style="left:262px;top:210px;" title="Hotels Cala Gonone" href="/hotel/cala-gonone/">Cala Gonone</a>
</li>
<li>
<span style="left:41px;top:461px"></span>
<a style="left:44px;top:460px;" title="Hotels Carloforte" href="/hotel/carloforte/">Carloforte</a>
</li>
<li class="">
<span style="left:107px;top:82px"></span>
<a style="left:49px;top:80px;" title="Hotels Castelsardo" href="/hotel/castelsardo/">Castelsardo</a>
</li>
<li>
<li class="">
<li class="">
<li>
<li class="">
<span style="left:235px;top:97px"></span>
<a style="left:241px;top:94px;" title="Hotels Loiri Porto San Paolo" href="/hotel/loiri-porto-san-paolo/">Loiri Porto San Paolo</a>
</li>
</ul>



ho visto che modificando: 

Codice: [Seleziona]

left:235px;top:97px cambio la posizione del link

ma non nel mio caso.
forse devo stabilire la posizione dell'immagine all'interno del css? non capisco come?

[squalogu]

help

come creo i settori ?

li implemento nel CSS o HTML

[claudio65]

http://lmgtfy.com/?q=corso+html

[squalogu]

di html mi occorre solo questa indicazione, attualmente non ho le possibilità di seguire un corso.
ringrazio chi mi volesse indicare come stabilire i settori..


grazie

[tomtomeight]

Secondo me, senza offesa, ti servono pure un paio di occhiali, se non riesci a leggere bene e confondi selettori con settori. In ogni caso dal corso puoi leggerti, usando sempre gli occhiali, solo la parte che ti interessa. 

[squalogu]

 


ok quindi mi studio la parte che riguarda i selettori (da inserire nel css?)

[squalogu]

Ciao! ho provato ad usare e inserire i seguenti codici, precedentemente consigliati da giusebos.,
ma non capisco perchè i link rimangono sempre fuori dall'immagine, a quanto ho capito l'immagine penso debba risultare come background?

Codice: [Seleziona]

<div class="caption">   <img src="esempio2.jpg" alt="" />   <span>      <strong>Lorem ipsum</strong>      Lorem ipsum dolor sit amet consectetuer eros      vivamus porta interdum venenatis.   </span><>

Codice: [Seleziona]

.caption {    font-family: Verdana, sans-serif;    font-size: 10px;    float: left;    margin: 0;    padding: 0;    position: relative;    overflow: hidden;} .caption img {    float: left;    margin: 0;    padding: 0;    background: #fff;    border: none;} .caption span {    float: left;    margin: 0;    padding: 10px;    width: 100%;    color: #dedede;         background: #222; /* browser che non supportano rgba */    background: rgba(0,0,0,0.7);    position: absolute;    left: 0;    bottom: 0;} .caption span strong {    font-weight: bold;    font-size: 11px;    text-transform: uppercase;    display: block;    padding-bottom: 5px;
}