rollover e css: scarsi risultati

**Mirkodst** · 21-11-2006, 21:50

Ciao a tutti

sto cercando di creare un effetto rollover con due immagini attraverso i css ma non mi riesce.
La pagina è circa questa

Markup
<div id="contenitore">
<div id="roll"></div>
</div>

CSS
<style type="text/css">
div#roll a {background-image:url("percorso/immagine1") ;
width:250px;
height:500px;}
div#roll a:hover {background-image:url("percorso/immagine2") ;
width:250px;
height:500px;}
</style>

in questa maniera non riesco a visualizzare nessuna immagine! ho provato con diverse varianti lette qua e la, ma niente. L'unica cosa che fa apparire l'imm di background e metterla relativa all'id del div "contenitore", in questa maniera l'imm si ripete solo per l'alteza del div "roll"!

Sono alle prime armi e non ne vengo fuori, qualcuno mi sa indicare dove sbaglio?

Ciao Mirko

**fcaldera** · 22-11-2006, 00:33

prova
- togliendo gli apici alle immagini tra le parentesi
- definendo un display: block per il link (che è un elemento inline)
- assicurandoti che il percorso sia giusto e sia una path relativa a partire da dove si trova il il file con il tuo css

poi semplificherei il markup... un div per contenere un solo link mi sembra poco pratico, quindi:

Markup

codice:

<div id="contenitore">
  
</div>

CSS

codice:

<style type="text/css">
#roll  {
   background-image:url(percorso/immagine1) ;
   width:250px; 
   height:500px;
   display: block;
}

#roll:hover {
  background-image:url(percorso/immagine2) ;
}
</style>

**Mirkodst** · 22-11-2006, 10:31

grazie della risposta.

I link che devo mettere sono più di uno, e tutti con imm diverse, ecco il motivo del div, comunque avevo provato anche la tua soluzione senza risultati, ho provato anche a definire display, come mi hai consigliato, ma non cambia molto!

la cosa che non mi spiego è perchè se io imposto l'imm di background per il contenitore questa appare, ripetuta, ma solo per l'height del div, mentre se tolgo il div "roll" anche l'imm sparisce

**gra-fichetto** · 22-11-2006, 11:01

Un semplice esempio:

La tua pagina:

codice:

<?xml version="1.0"?>
<!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" xml:lang="it" lang="it">
<head>
<title></title>
<style type="text/css">
@import url("stile.css");
</style>
</head>

<body>
<div id="contenitore">
	<div id="roll"></div>
</div>
</html>

Il tuo CSS per i link:

codice:

#roll{
	width: 250px;
	height: 500px;
	border: 1px solid red
}

#roll a{
	background: url(images/bg-roll.gif) 0 0 no-repeat;
	display: block;
	width: 250px;
	height: 500px
	}
#roll a:hover{
	background: url(images/bg-roll.gif) 0 -500px no-repeat;
	}

PS
L'immagine che usi per lo stato "a" e "a:hover" è un'unica immagine di larghezza 250 e altezza 1000; #roll a:hover esegue lo spostamento di questa immagine di sfondo per simulare il rollover

**Mirkodst** · 22-11-2006, 13:26

Grande Gra-fichetto

ho capito l'errore !!! dovevo separare gli attributi del div roll dal div roll a!

La prossima volta speriamo di metterici più attenzione!

**gra-fichetto** · 22-11-2006, 13:36

Prego.

Discussione: rollover e css: scarsi risultati

Strumenti discussione

Ricerca discussione

Visualizza

rollover e css: scarsi risultati

Permessi di invio