Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Daniel Emiliano

Problemas com banner que troca de imagem

Por , em Desenvolvimento frontend

Recommended Posts

Daniel Emiliano    0

Daniel Emiliano
Postado

Eu preciso fazer em um site, um banner que abaixo dele tenha três botões no formato de imagem.

Ao passar o mouse sobre tais botões, a imagem do banner muda.

 

Eu cheguei a programar isso com css e no Firefox funcionou certinho.

O problema é que no IE as imagens do banner não estão mudando.

 

Alguém sabe de algum hack ou comentário condicional pra resolver esse problema ?

já tentei de tudo e não consigo fazer funcionar no IE

 

 

O link da página de testes que fiz é:

www.flexport.com.br/teste/banner

Compartilhar este post

Link para o post
Compartilhar em outros sites

inforsis    1

inforsis
Postado

posta aí o código que ta usando...

cassiano óliver

Tudo que é necessário para analisar o problema esta contido no link que o Daniel Emiliano postou acima. Basta salvar a página como um documento html. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel Emiliano    0

Daniel Emiliano
Postado

A página que eu poste só tem o cógigo que usei e mais nada.

Em todo caso, ta aqui o código:

 

<html>
 <head>
  <title>Teste do banner</title>

  <style type="text/css">
   body {
   text-align:center;
   padding:0;
   margin:0;
   }
  
   .topo {
   width:641px; 
   margin:0 auto;
   text-align:left; 
   }
  
   .banner { 
   background: #fff url('images/fixa.gif') no-repeat center; 
   width: 641px; 
   height: 187px; 
   position: relative; 
   top: 0px;
   float: right; 
   border: 0px none;
   }
  
   ul.fotos {
   position: relative;
   list-style: none;  
   width: 641px;
   padding: 0;
   margin: 0; 
   }

   .fotos:after {
   display: block;
   content: ".";
   height: 0;
   font-size: 0; 
   visibility: hidden;
   clear: both;
   }
 	
   ul.fotos li {
   height: 84px;
   float: left; 
   border: 0px none;
   margin: 0px 
   }
  
   ul.fotos li img {
   border: 0px none;
   }

   ul.fotos li span img {
   border: none;
   width: 641px;
   height: 187px;
   }

   ul.fotos a {
   display: block;
   } 

   ul.fotos a span {
   display: none;
   }

   ul.fotos a:hover span {
   display: block;
   position: absolute; 
   top: 0px; 
   left: 0px; 
   border: 0px none;
   }
  </style>
 </head>
 <body>
  <div class="topo">
   <div class="banner"></div>
	<ul class="fotos"> 
	 <li><a href="#"><img src="images/01small.gif" alt="" /><span><img src="images/01.gif" alt=""  /></span></a></li>
	 <li><a href="#"><img src="images/02small.gif" alt="" /><span><img src="images/02.gif" alt=""  /></span></a></li>
	 <li><a href="#"><img src="images/03small.gif" alt="" /><span><img src="images/03.gif" alt=""  /></span></a></li>
	</ul>
   </div>
  </div> 
 </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito