Publicado em 17 de jan.

Botão Rollover com CSS

Pessoal, tenho duas imagens diferentes para um botão Quando passar o mouse quero que troque as imagens. No meu código estou colocando isso:

#menu{
position:absolute;
left:265px;
top:1px;
width:auto;
height:auto;
list-style:none;
margin:o;
padding:0;
}

#menu li{

display:inline;
}

#menu span {

 display: none;
 /*position: absolute;*/
}

#menu a {

 display: block;
 outline: none;
}

#menu a:hover span {

 display: block;
}

/Menu HOME/ #menu .home {

 width: 80px;
 height: 132px;
 background:url(btns_site/home.png) no-repeat;
 left: 30px;
 top: 49px;
}

#menu .home span {

 width: 80px;
 height: 132px;
 background: url(btns_site/home_over.png) no-repeat;
 left: 30px;
 top: 49px;
}

Porém, quando passo o mouse no iE7 na aparece a maõazinha e os botoes tem que fica um do lado do outro e mais, a primeira imagem do botao tem que sair.

Todo o código

<!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">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Botoes</title>
<style type="text/css">

<!--
*{

margin:0;
padding:0;
font-style:normal;
border:none;
}

body{

background-image:url(imagens/fundoLaranja.png);
background-repeat:repeat-x;
background-color:#FFA50C;
}
#conteudo{
width:600px;
height:620px;
background:url(imagens/sombra.png) repeat-y center top;
position:relative;
margin:0 auto;
}
#logo{
background-image:url(imagens/logoMarca.png);
width:160px;
height:50px;
position:absolute;
top:42px;
left:38px;
}
#rodape{
background:url(imagens/sombraRodape.png) repeat-y center top;
height:20px;
width:600px;
margin:0 auto;
text-align:center;
/*position:absolute;
top:600px;

left:78px;*/
}
/ Menu /

#menu{
position:absolute;
left:265px;
top:1px;
width:auto;
height:auto;
list-style:none;
margin:o;
padding:0;
}

#menu li{

display:inline;
}

#menu span {

 display: none;
 /*position: absolute;*/
}

#menu a {

 display: block;
 outline: none;
}

#menu a:hover span {

 display: block;
}

/Menu HOME/
#menu .home {

 width: 80px;
 height: 132px;
 background:url(btns_site/home.png) no-repeat;
 left: 30px;
 top: 49px;
}

#menu .home span {

 width: 80px;
 height: 132px;
 background: url(btns_site/home_over.png) no-repeat;
 left: 30px;
 top: 49px;
}

/Menu ALBUM/
#menu .album {

 width: 80px;
 height: 132px;
 background:url(btns_site/album.png) no-repeat;
 /*left: 82px;
 top: 49px;*/
}

#menu .album span {

 width: 80px;
 height: 132px;
 background: url(btns_site/album_over.png) no-repeat;
 /*left: 82px;
 top: 49px;*/
}

-->

</style>
</head>

<body>
<div id="conteudo">
	<p id="logo"></p>
 <ul id="menu">
 <li><a href="#" class="home"><span></span></a></li><li><a href="#" class="album"><span></span></a></li><!--<li><a href="#"><img src="btns_site/fundo1.png" alt="fundo" /></a></li><li><a href="#"><img src="btns_site/fundo1.png" alt="fundo" /></a></li>-->
 </ul>
</div>
<div id="rodape"><img src="imagens/rodape.png" alt="Rodapé" /></div>
</body>
</html>

Espero que alguem tenha uma solução.. Desde já agradeço!

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

FG Websites· 17 de jan.

Posta o link onde está hospedado..Fica mais fácl pra poder te ajudar

xavrim· 17 de jan.

Este site não está hospedado!

Paulo de Tarso F. M.· 21 de jan.

Humm... Acho que você não está sabendo estruturar estes links corretamente. Analisando seu código, parece que você está querendo usar a tag <span> desnecessariamente. Me parece que o que você está querendo fazer com esta tag é o que deve ser feito com a:hover... Tentarei te explicar.

Primeiramente, vamos estruturar os botões de modo que fiquem lado a lado e, além disso, alterem a imagem quando o mouse estiver sobre os mesmos...

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Código:

>
<!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">](http://www.w3.org/1999/xhtml%22)

	<head>

 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

 <title>TÍtulo do Site</title>

 <style type="text/css">

 

 div#conteudo {

 width: 500px;

 height: 500px;

 margin: 20px auto;

 background-color: #fc0;

 border: 4px solid #000;

 }

 div#conteudo ul {

 margin: 0;

 padding: 0;

 list-style-type: none;

 }

 div#conteudo ul li {display: inline;}

 div#conteudo ul li a {

 display: block;

 float: left;

 width: 120px;

 height: 30px;

 background-position: 0 0;

 text-indent: -9999px;

 }

 div#conteudo ul li a:hover {background-position: 0 -30px;}

 div#conteudo ul li a#home {background-image: url(imagem1.gif);}

 div#conteudo ul li a#album {background-image: url(imagem2.gif);}

 

 </style>

	</head>

	<body>

 <div id="conteudo">

 <ul>

 <li><a href="#" title="Home" id="home">Home</a></li>

 <li><a href="#" title="Álbum" id="album">Álbum</a></li>

 </ul>

 </div>

	</body>

</html>

Veja o exemplo on-line.

Neste exemplo foi utilizado a técnica CSS Sprites, que consiste em trabalhar com posicionamento de imagem de fundo para criar a troca de imagem... Mas na verdade, você tem apenas 1 imagem, formada pelas imagens dos dois estados - mouse sobre e mouse fora... Enfim, se quiser saber mais sobre isto, dê uma pesquisada mais específica...

Bom, acho que a partir deste exemplo que fiz dá para se ter uma noção melhor de como deve ficar isso que deseja... Sei lá, pelo que analisei, o que proponho é isso...

Qualquer coisa, volte a postar!

Abraço!

pcarantes· 25 de abr.

>
Humm... Acho que você não está sabendo estruturar estes links corretamente. Analisando seu código, parece que você está querendo usar a tag <span> desnecessariamente. Me parece que o que você está querendo fazer com esta tag é o que deve ser feito com a:hover... Tentarei te explicar.