Immagine espandibile

**Giubass** · 14-03-2008, 13:22

Ciao ragazzi, fino ad oggi avevo utilizzato il seguente css per espandere un immagine o meglio in fase di rollover caricavo un'immagine più grande.

codice:

#Bannerino {
position:relative;
margin-top:8px;
margin-left:20px;
height:60px;
width:120px;
z-index:8
}
			   
#Bannerino img { border:none }
#Bannerino a { display:block }
#Bannerino a:hover img, #Bannerino a:active img { display:none }
#Bannerino a:hover, #Bannerino a:active {
height:240px;width:240px;
background:url(../immagine_roll.gif)
}

Con questo css l'immagine si espande partendo dall'angolo superiore sinistro, a me interesserebbe invece partire dall'angolo superiore destro.

Spero di essere stato chiaro, grazie.

**UmaThurman** · 14-03-2008, 13:27

Non so se ho ben capito cosa vuoi fare ma prova con

codice:

background:url(../immagine_roll.gif) right top;

**Giubass** · 14-03-2008, 14:31

Originariamente inviato da UmaThurman
Non so se ho ben capito cosa vuoi fare ma prova con

codice:

background:url(../immagine_roll.gif) right top;

Così non va, si comporta in egual modo.

Forse non mi sono espresso bene, io vorrei che l'immagine visualizzata in rollover si apra partendo da destra verso sinistra cioè partendo dall'angolo superiore destro dell'immagine originale.

**Giubass** · 14-03-2008, 15:52

Ragazzi avevo dimenticatodi dire una cosa importante, l'immagine che si visualizzerà in rollover è grande il doppio, mi spiego meglio:

codice:

#Bannerino {
position:relative;
margin-top:5px;
margin-left:15px;
height:60px;
width:120px;
z-index:10
}
			   
#Bannerino img { border:none }
#Bannerino a { display:block }
#Bannerino a:hover img, #Bannerino a:active img { display:none}
#Bannerino a:hover, #Bannerino a:active {
height:240px;
width:120px;
background:url(../banner/img_240x120.gif);
}

<div id="Bannerino">
   [img]/banner/img_120x60.gif[/img]
</div>

Per semplificare le cose, in questa immagine è spiegato tutto, nella figura 1 è rappresentato quello che avviene con il css postato sopra, mentre nella figura 2 quello che vorrei che si verificasse.

P.s. Ovviamente l'immagine di rollover copre per intero l'immagine iniziale.

Aspetto con ansia qualche suggerimento

**UmaThurman** · 14-03-2008, 16:42

Sì, non avevo capito.
Prova così, dovrebbe funzionare.

codice:

#Bannerino img {
border:none;
position:absolute;
top:0;
right:0; }

**Giubass** · 14-03-2008, 17:21

Ho provato così come mi hai detto tu ma non funge

:

codice:

#Bannerino {
position:relative;
margin-top:5px;
margin-left:15px;
height:60px;
width:120px;
z-index:10
}		   
#Bannerino img {
border:none;
position:absolute;
top:0;
right:0;
}
#Bannerino a { display:block }
#Bannerino a:hover img, #Bannerino a:active img { display:none}
#Bannerino a:hover, #Bannerino a:active {
height:240px;
width:120px;
background:url(../banner/img_240x120.gif);
}

**UmaThurman** · 14-03-2008, 17:48

Raddoppia anche le dimensioni del contenitore

codice:

#Bannerino {
position:relative;
margin-top:5px;
margin-left:15px;
height:120px;
width:240px;
z-index:10
}

**Giubass** · 14-03-2008, 18:30

Originariamente inviato da UmaThurman
Raddoppia anche le dimensioni del contenitore

codice:

#Bannerino {
position:relative;
margin-top:5px;
margin-left:15px;
height:120px;
width:240px;
z-index:10
}

Facendo quello che mi dici tu succede questo:link

**UmaThurman** · 14-03-2008, 18:40

Erano invertite le dimensioni dell'hover.
Così funziona

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
#Bannerino {
position:relative;
margin-top:5px;
margin-left:200px;
height:120px;
width:240px;
z-index:10
}
			   
#Bannerino img { 
position:absolute;
border:none;
top:0;
right:0;
}
#Bannerino a { display:block }
#Bannerino a:hover img, #Bannerino a:active img {display:none }
#Bannerino a:hover, #Bannerino a:active {

height:120px;
width:240px;

background:url(240x120.gif);
}
-->
</style>
</head>
<body>
<div id="Bannerino">
   [img]120x60.gif[/img]
</div> 
</body>
</html>

**Giubass** · 14-03-2008, 18:43

Ok grazie avevo sbagliato a fare copia e incolla, adesso funziona

Grazie

Discussione: Immagine espandibile

Strumenti discussione

Ricerca discussione

Visualizza

Immagine espandibile

Permessi di invio