[CSS] Impostare mappatura come sfondo

[predator_166]

Salve a tutti! Mi hanno consigliato di postare qua per ricevere una risposta

Vorrei impostare un'immagine divisa in sezioni (mappata) come sfondo , in modo da poterci scrivere sopra . Vi link la mia discussione iniziata sul forum grafica per chiarirmi meglio .

--->Click<---

Vi ringrazio in anticipo

Edo

Il codice della mia immagine mappata è questo

<center>[img]Images/sfondo.jpg[/img]</center>
<map name="sfondo">
<area shape="poly" coords="86,571,151,507,168,524,105,589,86,571" href="" alt="">
<area shape="poly" coords="122,576,199,500,217,519,138,597,121,578,12 5,574" href="" alt="">
<area shape="poly" coords="168,574,238,503,256,521,186,591,168,573" href="" alt="">
<area shape="poly" coords="201,578,331,448,348,466,219,596,201,578" href="" alt="">
<area shape="poly" coords="263,593,368,482,350,467,240,577,259,596,26 5,590" href="" alt="">
<area shape="poly" coords="367,491,281,576,298,594,383,509,366,492,36 4,494" href="" alt="">
<area shape="poly" coords="338,594,414,518,396,501,320,577,338,594" href="" alt="">
</map>

[Notorious]

Hai provato, per scriverci sopra, ad usare un div, con posizionamento assoluto, con z-index maggiore di quello della mappa immagine?

EDIT: se puoi, cerca di evitare di usare le mappe immagini "vecchio stile", in quanto non sono poi così accessibili; bastano i CSS e un elenco non ordinato di link. Se vuoi un esempio, guarda la home del mio sito (lì lo stesso sfondo viene condiviso dalla "mappa immagine" e da altre cose, come vuoi fare tu). L'unico inconveniente è che dovresti rinunciare alle aree poligonali (la tecnica usa solo aree rettangolari).

[predator_166]

Originariamente inviato da Notorious
Hai provato, per scriverci sopra, ad usare un div, con posizionamento assoluto, con z-index maggiore di quello della mappa immagine?

mmmm sinceramente no , non saprei come fare

EDIT: se puoi, cerca di evitare di usare le mappe immagini "vecchio stile", in quanto non sono poi così accessibili; bastano i CSS e un elenco non ordinato di link. Se vuoi un esempio, guarda la home del mio sito (lì lo stesso sfondo viene condiviso dalla "mappa immagine" e da altre cose, come vuoi fare tu). L'unico inconveniente è che dovresti rinunciare alle aree poligonali (la tecnica usa solo aree rettangolari).

Sarei anche disposto a perdere le aree poligonali , dato che posso fare tanti rettangolini ^^ l'unica cosa è che non ho mai usato i Css per queste cose e quindi non saprei come fare ^^ si sono proprio un neofita

Ti ringrazio cmq

Edoardo

[Notorious]

Originariamente inviato da predator_166

Sarei anche disposto a perdere le aree poligonali , dato che posso fare tanti rettangolini ^^ l'unica cosa è che non ho mai usato i Css per queste cose e quindi non saprei come fare ^^ si sono proprio un neofita

Beh, se sei disposto a usare i rettangoli allora...
A parte che le mappe con l'attributo ALT indicato dovrebbero essere accessibili, ma adesso sembra vada di moda usare gli elenchi di link.

Se vuoi ti posto un po' di guide:
guida 1: questa l'ho scritta io un po' di tempo fa ... oltre alla mappa immagine utilizza anche degli effetti di rollover, sempre solo coi CSS (quindi i "rettangolini" hanno larghezza doppia rispetto all'area che occupano nella mappa, perché nel lato destro hanno l'immagine di rollover... se ti interessa, dai un'occhio a quest'altra guida dove vedi meglio cosa intendo per rettangolini "doppi", altrimenti salta la parte relativa al rollover)
guida 2 (inglese)
guida 3

Adesso faccio un po' di prove per aggiungere del testo sopra alla mappa

[predator_166]

Ti ringrazio per tutto ma forse non sono bravo io ma non sono riuscito a capire dove trovare per mettere l'immagine come sfondo ^^ cioè per farla e metterla come immagine qualunque ci riesco , l'unica è che non riesco a metterla come sfondo

[Notorious]

Ti riferisci al tuo esempio iniziale o all'esempio che ti ho postato io? :master:

PS: sono riuscito a mettere del testo sopra alla mappa immagine, poi ti dico come fare

[predator_166]

Originariamente inviato da Notorious
Ti riferisci al tuo esempio iniziale o all'esempio che ti ho postato io? :master:

PS: sono riuscito a mettere del testo sopra alla mappa immagine, poi ti dico come fare

Aspetto con ansia

[Notorious]

Questo è il codice HTML; il codice CSS l'ho messo per comodità dentro l'HTML, ma sarebbe meglio metterlo in un file css esterno.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prova mappa immagine</title>
<style type="text/css">
<!--


#map_container {
	/*per fare assumere come origine (0,0)
	(degli elementi absolute che conterrà) il
	suo angolo superiore destro*/
	position: relative;
	background-color: #0000FF;
}

#testoSopra {
	background-color:#FFFF00;
	position: absolute;
	z-index: 2;
	/* posizione rispetto al map_container */
	left: 23px;
	top: 30px;
	
	/* Impostare le dimensioni per
	limitare il testo - oppure commentarle*/
	width: 100px;
	/*height: 200px;*/
}

/* inizio codice mappa */

/* proprietà generali */
#imagemap1 {
	width: 148px;
	height: 300px;
	margin: 0px;
	padding: 0px;
	background-repeat: no-repeat;
	list-style: none;
	position: relative; /* sarà il (0,0) per gli elementi 
	absolute contenuti */
	background-color: green;
}

#imagemap1 li {
	position: absolute;
	margin: 0px;
	padding: 0px;
}

#imagemap1 a {
	display: block;
	background-color: #CCCCCC;
}

/* proprietà specifiche delle singole aree cliccabili
NB: la posizione è rispetto a #imagemap*/

#link1 {
	left: 20px;
	top: 6px;
}
#link1 a {
	width: 118px;
	height: 117px;
}
#link2 {
	left: 20px;
	top: 159px;
}
#link2 a {
	width: 114px;
	height: 119px;
}

/*FINE MAPPA*/

-->
</style>
</head>

<body>



Prova scorrimento testo</p>


(ingrandire il testo con ctrl++ e ctrl+-, ctrl+0 lo riporta normale)</p>


  </p>
<div id="map_container">
	<div id="testoSopra">
		Testo sopra la mappa
ATTENZIONE: non rende cliccabili le aree sotto
	</div>
	<ul id="imagemap1">
		<li id="link1"><span>Testo1</span>
		<li id="link2"><span>Testo2</span>
	[/list]
</div>

</body>
</html>

Ho messo un div contenitore, #map_container, per far assumere alla mappa e #testosopra lo stesso sistema di riferimento. E' molto importante dare lo z-index (praticamente è come l'ordine dei layer nei programmi di grafica), e position: relative; a chi deve contenere degli elementi con posizionamento assoluto. Se vuoi puoi limitare le dimensioni di #map_container con le stesse dimensioni di #imagemap1.
Fai attenzione ad una cosa: il testo SOPRA la mappa, copre i link sotto, quindi io starei attento a non coprire le aree cliccabili ;-)
Ho colorato (con la proprietà background-color, che puoi togliere) i vari elementi:
map_container: blu
mappa: verde
aree cliccabili: grigio
e il testo sopra la mappa di giallo.

Per mettere le immagini di sfondo, aggiungi agli elementi la proprietà background-image: url(esempio.jpg);

A questo punto per ulteriori informazioni ti (ri)consiglio la lettura della guida

EDIT: devi mettere la proprietà background-image: url(esempio.jpg); ad #imagemap1; se vuoi gli effetti di rollover, devi metterla anche a tutti i collegamenti, cioè #link1 a, #link2 a, etc...

[Notorious]

Scusa, ho visto adesso l'immagine che volevi mappare, e non avevo capito cosa intendessi con "testo sopra".
Quell'immagine, per quella tecnica che volevo farti usare io, non va bene, a causa di quei link "diagonali"; se fossero stati verticali, già si sarebbe potuta usare (con gli ovvi vantaggi, dell'accessibilità, ma soprattutto del rollover), perché quella tecnica è limitata ad aree rettangolari.

Comunque ho scaricato la tua immagine, usato il tuo codice (ho cambiato una maiuscola al nome del file) e a me funziona (non capisco perché a te no )

<center>[img]Images/Sfondo.jpg[/img]</center>
<map name="sfondo">
<area shape="poly" coords="86,571,151,507,168,524,105,589,86,571" href="" alt="">
<area shape="poly" coords="122,576,199,500,217,519,138,597,121,578,125,574" href="" alt="">
<area shape="poly" coords="168,574,238,503,256,521,186,591,168,573" href="" alt="">
<area shape="poly" coords="201,578,331,448,348,466,219,596,201,578" href="" alt="">
<area shape="poly" coords="263,593,368,482,350,467,240,577,259,596,265,590" href="" alt="">
<area shape="poly" coords="367,491,281,576,298,594,383,509,366,492,364,494" href="" alt="">
<area shape="poly" coords="338,594,414,518,396,501,320,577,338,594" href="" alt="">
</map>

PS: mi raccomando: nei nomi delle directory e dei file, Esempio è diverso da esempio!

[predator_166]

Originariamente inviato da Notorious
Comunque ho scaricato la tua immagine, usato il tuo codice (ho cambiato una maiuscola al nome del file) e a me funziona (non capisco perché a te no )

Cosa intendi che funziona? ^^ la mappatura si funziona , ma non riesco a trovare un modo per scrivere sopra (per es a dx del logo in alto a sx dovrebbero esserci i contenuti , nello spazio vuoto per farti capire)

Grazie mille per tutto quello che hai fatto e complimenti per la guida

Edo