hover per immaggini...si puo fare?

**lucaeffe** · 10-05-2009, 17:34

si puo dare a una immaggine che fa da sfondo l'effetto hover??

mattiamo ipotesi che nello sfondo ho un quadrato rosso,
come faccio a farlo diventare verde al solo passaggio del mouse???

è un po l'effetto che si usa per il menu,ho provato ma nn funziona!

CSS:

#sfondo_fisso{
background-image:url(image/template.jpg) no-repeat;
margin:0 0 0 15px;

}

#sfondo_fisso a:hover{
background:url(image/topo2.jpg);
}

**Gufo** · 10-05-2009, 18:01

Per un background non lo puoi fare

**lucaeffe** · 10-05-2009, 18:16

come faccio a inserire un immaggine se nn con background-image???

**Gufo** · 10-05-2009, 18:26

Originariamente inviato da lucaeffe
come faccio a inserire un immaggine se nn con background-image???

con il tag <img> e z-index:0;

**seifer is back** · 10-05-2009, 18:27

edit..

**lucaeffe** · 10-05-2009, 18:41

HTML

<div id="sfondo_fisso">[img]image/template.jpg[/img]</div>

CSS

#sfondo_fisso{
margin:0 0 0 15px;
padding:0;

}

#sfondo_fisso a, #sfondo_fisso a:visited{
padding:30px 32px;
}

#sfondo_fisso a:hover{

}

cosi è giusto?
poi nell'hover come faccio a mettere l'immaggine se nn con background-image?
nel <div id="sfondo_fisso"> ci va <a href="#">?
cosa è z-index?

**Gufo** · 10-05-2009, 19:23

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=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
#base {
	height: 200px;
	width: 200px;
	position: absolute;
	z-index: 0;
	left: 200px;
	top: 200px;
}
#over {
	display: block;
	height: 50px;
	width: 50px;
	position: absolute;
	z-index: 10;
	left: 250px;
	top: 250px;
}
#over a:hover {
	display: block;
	background: url(immagine2.jpg);
}
-->
</style>
</head>

<body>
<div id="base">
  [img]immagine.jpg[/img]
</div>
<div id="over">
	<a href="#" target="_self">
      	clicca qui!
      </a>
</div>
</body>
</html>

**lucaeffe** · 10-05-2009, 20:38

Grazie mille,ma purtroppo nn funziona!!
o meglio sono riuscito a sistemare l'immagine ma nn succede assolutamente nulla!!

HTML

<div id="topo1">[img]image/topo1.jpg[/img]</div>
<div id="topo2">
</div>

CSS

#topo1{

height: 150px;
width: 200px;
position: absolute;
z-index: 0;
left: 740px;
top: 425px;

}

#topo2{

display: block;
height: 50px;
width: 50px;
position: absolute;
z-index: 10;
left: 250px;
top: 250px;
}

#topo2 a:hover{
display:block;
background:url(image/topo2.jpg);
}

questo e l'effetto che voglio ottenere,ovvero la comparsa della nuvoletta

**Gufo** · 10-05-2009, 22:52

Questo ti va bene?

Discussione: hover per immaggini...si puo fare?

Strumenti discussione

Ricerca discussione

Visualizza

hover per immaggini...si puo fare?

Permessi di invio