Vai al contenuto

mappare immagine (css+html)

duffy duck

Da duffy duck
in Web design e sistemisti

Messaggi raccomandati

Cicciokr

Cicciokr

Inviato
Inviato

non puoi mappare un immagina usata in modalità background.. si può mappare un immagine cosi messa <img src=""> per mappare un immagine usata in background è diverso.. devi creare dei layer div inserire delle img spacer trasparenti.. e emttere i link a queste img spacer.. ^^

Link al commento
Condividi su altri siti
Cicciokr

Cicciokr

Inviato
Inviato

ma veramente trasparente devi fare l'img che andrà posta sopra la sagoma di costui.. e che conterrà quindi diciamo il tooltip.. l'alt o come vuoi tu.. e per farla trasparente o usi i css o usi photoshop..

tecnica css:

.sagomatipo{

filter:alpha(opacity=25);

-moz-opacity:.25;

opacity:.25;

}

Link al commento
Condividi su altri siti
duffy duck

duffy duck

Inviato
  • Autore
Inviato

mi son perso, ho l'immagine di sfondo, adesso scontorno una persona, quindi ho background.jpg e persona1.jpg ok?

nel css devo mettere persona1.jpg come background di .sagomatipo ?

poi come faccio a fare in modo che quando passo il mouse sopra persona1 compaia un box con del testo?

grazie mille

Link al commento
Condividi su altri siti
Cicciokr

Cicciokr

Inviato
Inviato

oh mio dio.. ma lo sai cosa significa 'mappare' ?? crei dei tag <map> ocnd elel cordinate che stanno sopra un img.. tu l'img come la stai usando??? quando si dice background si intende lo sfondo di una pagina.. o di un div..

ma sinceramente non ho capito cosa stai combinando tu..

Link al commento
Condividi su altri siti
duffy duck

duffy duck

Inviato
  • Autore
Inviato

ciao, non so cosa significa mappare! Il mio problema era quello di volere una immagine, una foto con delle persone, che occupi l'intera pagina del sito e fare in modo che passando il mouse su una di queste persone venga fuori del testo.

cercando ho "capito" che questo problema si chiama mappare un'immagine però non so come si implementa ciò

se ti va di aiutarmi... l'immagine nella fattispecie è appunto una foto impostata come background del body (nel foglio di stile), ma volendo si può creare anche un div "contenitore" che occupi l'intera finestra se il fatto di essere direttamente nel body da problemi

ciao

edit.

non sapevo del tag map, ho visto l'esempio dove vengono usati cerchi e rettangoli per identificare le aree da mappare, si possono usare forme piu complesse per creare la sagoma in modo piu preciso?

Link al commento
Condividi su altri siti
Cicciokr

Cicciokr

Inviato
Inviato

come forme 'complesse' c'è la poly.. ovvero un poligono..

io per mappare uso dreamweaver.. perchè altrimenti con le cordinate è una mezza rottura..

per mac nn so quali programmi ci siano per fare ciò...

comunque se cerchi su google qualcosa trovi.. oppure se hai un programma di grafica.. penso mappi anch ele img..

Link al commento
Condividi su altri siti
duffy duck

duffy duck

Inviato
  • Autore
Inviato

ciao ciccio, intanto grazie per la disponibilità

oggi cercando ho trovato alcune cose che potevano fare al caso mio , alla fine son riuscito ad arrivare a questo risultato senza il tag map, ti copio un file index.html scritto per testare la mappatura

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <style type="text/css">
body{
margin:0;
padding:0;
width:100%;
height:100%;
font-family:Helvetica, Sans-Serif; 
font-weight:normal;
color:#fff; 
overflow:hidden;
}
#contenitore{
position:absolute;
margin:0;
padding:0;
width:100%;
height:100%;
}
#header{
position:absolute;
left:40px;
top:40px;
width:440px;
height:180px;
background:#000;
text-transform:uppercase;
z-index:1;
}

/*box relativi alla mappatura*/
#map{
display:block;
margin:0;
width:100%;
height:100%;
background: #bbb;
}
#map a{
color:#000;
text-decoration:none; 
}
#map a:hover{
overflow:visible;
cursor:arrow;
}
a#spot1{
display:block;
position:absolute;
left:10px;
top:10px;
width:200px;
height:0;
padding-top:300px;
overflow:hidden;
border:1px solid #FFFFFF;
}
a#spot1:hover{
margin-top:0;
margin-left:120px;
padding-top:0;
height:290px;
background:red;
overflow:visible;
opacity:.95;
z-index:2;
}

a#spot2{
position:absolute;
display:block;
left:230px;
top:20px;
padding-top:300px;
width:200px;
height:0;
overflow:hidden;
border:1px solid #FFFFFF;
}
a#spot2:hover{
margin-top:30;
margin-left:520px;
padding-top:0;
height:190px;
background:green;
overflow:visible;
z-index:2;
}
a#spot3{
display:block;
position:absolute;
width:170px;
height:0;
padding-top:70px;
overflow:hidden;
left:530px;
top:300px;
border:1px solid #FFFFFF;

}
a#spot3:hover{
margin-top:10;
margin-left:220px;
padding-top:0;
height:360px;
background:yellow;
overflow:visible;
z-index:2;
}	
   </style>
 </head>
 <body> 
 	<div id="contenitore">
 		<div id="header">
 			<h1>header</h1>
 		</div>
	<div id="map">
		<a id="map" href="#nogo"></a>
		<a id="spot1" title="" href="#nogo">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet ipsum id mi tincidunt dignissim et ac metus. Vestibulum sit amet blandit nunc. Sed vehicula suscipit vehicula. In ultricies tempus nibh, vitae blandit mauris interdum eu. Phasellus bibendum pulvinar sapien, et dapibus eros vestibulum eget.</p>
		</a>
		<a id="spot2" title="" href="#nogo">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</a>
		<a id="spot3" title="" href="#nogo">
			<p>Etiam sit amet laoreet orci. Sed in ipsum odio. Mauris at tellus eget erat ullamcorper condimentum sed sed velit. Nunc erat nunc, suscipit ut vehicula vitae, euismod vitae enim. Vestibulum ligula augue, vulputate vitae volutpat non, hendrerit in nisi. Duis tristique tortor eget lectus congue ornare.</p>
		</a>
	</div>
 	</div>
 </body>
</html>

ti va di dargli un'occhiata?

non mi piace molto quando muovo il mouse, i vari box non sono stabili ma lampeggiano e non capisco perchè.

per le forme "precise" penso si riesca anche con i semplici rettangoli

grazie

ps non ho dreamweaver, sto scrivendo con textwrangler (tipo blocco note ma evidenzia la sintassi) e credo le mapperò a mano per tentativi

Link al commento
Condividi su altri siti

Archiviato

Questa discussione è archiviata e chiusa a future risposte.

Vai alla lista discussioni
×
×
  • Crea Nuovo...