(Resolvido) Imagem fica escondida no IE

[telmodom]

Boas pessoal! Sendo este o meu primeiro post neste forum devo dizer que este forum está muito porreiro!

Passando ao meu problema.

Eu tenho 2 div's, uma com alguma transparencia outra que contem uma imagem.

O meu objectivo seria mostrar a div com a imagem por cima da div transparente! Isto no FF,chrome e opera funciona as mil maravilhas!Agora no IE (sou principiante e já odeio o IE lol) a imagem "aparece" mas fica escondida! Eu não a vejo mas se carregar com o rato na zona que ela era suposto estar visível consigo guardar no meu pc e visualizar a foto sem problemas.

declaração das divs

div que contem a foto
<div onclick = 'showclose();' class='divfoto' id='divshowfoto'><img style='border:0px solid #FFF;'id='imagemDentroDiv' /></div>

div transparente
<div onclick='showclose();' id = 'divTransparente' class='rounded-box'>
 <!-- Corners --> 
 <div class='top-left-corner'>  
  <div class='top-left-inside'>
   bull 
  </div> 
 </div>
 <div class='bottom-left-corner'>
  <div class='bottom-left-inside'>
   bull 
  </div>
  </div>
 <div class='top-right-corner'>
  <div class='top-right-inside'>
    bull 
  </div>
 </div>
 <div class='bottom-right-corner'>
  <div class='bottom-right-inside'>
    bull
  </div>
 </div>
 <!-- Content -->
 <div class='box-contents'>
                                
 </div> <!-- end div.box-contents -->
</div> <!-- end div.rounded-box -->

Estilos

.divfoto
{
  position:absolute; 
  visibility:hidden;
  display:none;
  z-index:1000;
  border:10px solid red;
  
  filter:alpha(opacity=1);
  -moz-opacity:1;
  khtml-opacity:1;
  opacity:1;
  
}

div.rounded-box {   
    background-color: #333222;
    margin: 3px;
    position:absolute;
    display:none;
    visibility:hidden;
    width:580px;
    height:600px;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    khtml-opacity:0.5;
    opacity:0.5;
    z-index:99;
}
div.top-left-corner, div.bottom-left-corner,
div.top-right-corner, div.bottom-right-corner
{
  position:absolute; 
  width:20px; 
  height:20px;
  background-color:#FFF; 
  overflow:hidden;
}
div.top-left-inside, div.bottom-left-inside,
div.top-right-inside, div.bottom-right-inside
{
  position:relative; 
  font-size:150px; 
  font-family:arial;
  color: #333222; 
  line-height: 40px;
}
div.top-left-corner 
{ 
  top:0px; 
  left:0px; 
}
div.bottom-left-corner 
{
  bottom:0px; 
  left:0px;
}
div.top-right-corner 
{
  top:0px; 
  right:0px;
}
div.bottom-right-corner 
{
  bottom: 0px; 
  right:0px;
}
div.top-left-inside 
{
  left:-8px;
}
div.bottom-left-inside 
{
  left:-8px; top:-17px;
}
div.top-right-inside 
{
  left:-25px;
}
div.bottom-right-inside 
{
  left:-25px; top:-17px;
}
div.box-contents {
    position: relative; padding: 8px; color:#000;
}

codigo js

function showBig(foto){
    var divTransparente = document.getElementById('divTransparente'); //div transparente
    var divfoto=  document.getElementById('divshowfoto');  //div que contem a foto
    var imagemDentroDiv = document.getElementById('imagemDentroDiv');   //a imagem 
    
    
                              
      //mostrar div transparente
      divTransparente.style.display='inline';
      divTransparente.style.visibility = 'visible';      
      
      //div que contem a foto
      divfoto.style.display='inline';
      divfoto.style.visibility = 'visible';
      
      //tratar a foto directametne
    // imagemDentroDiv.style.display='block';
    // imagemDentroDiv.style.visibility='visible';
      
      
      //tratar o caminho da foto
      var newimg  = new Image();
      var pathArrayFoto = explode('/',foto);
      newimg.src = 'imagens/large/'+pathArrayFoto[pathArrayFoto.length-1];     
       
      //tratar o tamanho da div que contem a imagem
      divfoto.style.width = newimg.width;
      divfoto.style.height= newimg.height;
      
      
      //adicionar o caminho da foto ao tag imagem
      imagemDentroDiv.src = newimg.src;  
 }

Espero ter explicado o suficiente do meu problema se for preciso mais alguma coisa digam sff.

De certeza que isto é uma solução rapida, mas sendo eu ainda um pequeno noob no js não consigo dar com o problema e vinha aqui pedir uma ajudinha!

Obrigado

[Danilo Moraes]

Por um acaso isso que tu ta tentando fazer, é aquele efeito de "inativo/ativo" como se a imagem fosse um icone? Eu vi algo parecido com isso num jogo chamado narutogame...

Seria isso?

T+

[telmodom]

Por um acaso isso que tu ta tentando fazer, é aquele efeito de "inativo/ativo" como se a imagem fosse um icone? Eu vi algo parecido com isso num jogo chamado narutogame...

Seria isso?

T+

O que eu estou tentando fazer é: Tenho um "botão"(tanto pode ser uma imagem,como um botão), que quando é pressionado mostre duas divs uma com a transparência outra , que fica por cima, com a imagem!

O que está a acontecer é que a imagem existe na div, só que não é visível..

Se alguém tiver uma ideia sobre o que pode estar a acontecer..

NOTA: No FF,Chrome e opera roda sem problemas

Acabei por descobrir...

Nos estilos para a div que continha a foto temos que retirar:

filter:alpha(opacity=1);

-moz-opacity:1;

khtml-opacity:1;

opacity:1;

Pelos visto o IE não suporta estas instruções muito bem.

o que importa é que está resolvido!

Obrigado e certamente é um forum que vou voltar muitas vezes!

Editado Setembro 10, 2009 por telmodom