http://www.milliondollarhomepage.com/

[fmortara]

come hanno fatto questo layout?
http://www.milliondollarhomepage.com/

questo è il codice di ogni link...

<area shape="rect" coords="590,240,610,260" href="http://rapidresponse.directtrack.com/sw/19120/CD9/" title="get a free ring tone for your cell phone! "target="_blank"/>

come si disegna questa tabella, considerando che non è semplice HTML?

[*pragma]

ciao ho questi vecchisimi appunti
Per "mappa" si intende un'immagine sulla quale l'implementatore ha individuato delle zone rese sensibili: il puntatore assume la forma di manina allo sfioramento di queste zone ed al click corrisponde il rimando ad una pagina oppure ad un'immagine oppure a quant'altro possa essere linkato.
Per comunicare al Browser che su quell'immagine sono presenti delle zone attive occorre inserire nel tag: <IMG> l'attributo: usemap="#nome_mappa".

Successivamente l'implementatore comunica al Browser (sempre attraverso il codice HTML):

la forma delle zone attive: rect, circle, poly (poligonale chiusa detta anche linea spezzata).
dove sono le zone attive e le dimensioni delle stesse (con il ricorso a coordinate).
il Link che corrisponde al click del mouse.
Ecco un esempio del codice corrispondente:
[img]nome_file.jpg[/img]

<MAP name="nome_mappa">

<AREA shape="rect" coords="72,24 , 93,46" href="nome_pagina.html">
<AREA shape="circle" coords="231,112,12" href="nome_pagina.html#àncora">
<AREA shape="poly" coords="217,100 , 200,109 , 192,113 , 185,120 , 180,128 , 200,132 , 210,132 , 217,120 , 223,118 , 218,110 , 217,100 href="nome_immagine.gif">
</MAP>

Per individuare le coordinate si ricorre al programma Paint:
Start-->Programmi-->Accessori-->Paint.
Si trascina l'immagine sulla zona bianca della finestra che si è aperta (oppure sul programma Paint: Modifica-->Incolla da...., si ricerca e si seleziona l'immagine scelta dopo aver indicato come estensione "Tutti i file immagine" e si da l'OK).
Sulla barra di stato, man mano che si fa muovere il puntatore sull'immagine, è possibile leggere (in basso a destra) le coordinate del punto. E' consigliabile tracciare delle linee colorate come contorno delle zone che devono essere rese attive. Per la forma "rect" le coordinate indicano il vertice in alto a sinistra e quello in basso a destra, per la forma "circle" le coordinate indicano la posizione del centro e la misura del raggio, per la forma "poly" sono indicate le posizioni dei vertici.

ciao

[fmortara]

fatto!

Grazie mille!

ma ho un piccolp problema:
se faccio cosi:

<div id="MAPPA" style="padding:0px; width:1000; height:1000; background-image:url('img/map_sf.gif')">
	[img]img/mappa.gif[/img]
		<map style="padding:0px" name="link">
			<area shape="rect" coords="220,0,420,100" href="http://modelle" target="_blank" title="ModellieModelle.it">
			<area shape="rect" coords="0,0,200,100" href="http://modelle" target="_blank" title="ModellieModelle.it">
		</map>
</div>

ottengo un piccolo spazio alla fine della tabella,
per non ottenerlo dovrei fare in questo modo:

<div id="MAPPA" style="padding:0px; width:1000; height:1000; background-image:url('img/map_sf.gif')">[img]img/mappa.gif[/img]<map style="padding:0px" name="link"><area shape="rect" coords="220,0,420,100" href="http://modelle" target="_blank" title="ModellieModelle.it"><area shape="rect" coords="0,0,200,100" href="http://modelle" target="_blank" title="ModellieModelle.it"></map></div>

cioè mettere tutto il codice in una sola riga...
come si può risolvere?

ho provato ad impostare uno stile per img margin: 0px, ma non va lo stesso...

come posso fare?

[*pragma]

ho provato a salvare senza inserire immagine.
Ti suggerisco solo un tentativo:
definisci sia il bordo della immagine style="border:solid #fff 0px;" che le dimensioni anche della immagine oltre che del div

ciao

[fmortara]

risolto, problema di internet explorer...