image map

[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;
}