Ir para conteúdo
Fórum Script Brasil

carcesar11

Membros
  • Total de itens

    1
  • Registro em

  • Última visita

Posts postados por carcesar11

  1. Pessoal eu sou novato estou tentando aprender javascript e sei que tenho um caminho longo a trilhar, mas estou precisando de ajuda para uma tarefa que tenho que enviar.  Eu já consigo usar o efeito do mouse (onmouseover e onmouseout) e mostrar a imagem. Mas eu tenho que mostrar duas coisas ao passar o mouse e escondê-las ao retirar o mouse: a imagem e o preço de cada um na sua coluna. Não sei também se já tenho que deixar o texto do preço inserido na coluna preço e escondo com uma imagem em branco, para depois mostrar o texto do preço sobre essa imagem vazia e que estaria escondendo o preço. É apenas uma ideia. Como só terão poucos elementos (exercício), então um banco de dados não seria necessário nesse caso. O código que estou tentando está abaixo. Mas por favor sou iniciante e me desculpem se tem algo errado. Como sabem na internet tem muita informação que as vezes facilitam, não complicam, mas embola as coisas de quem está aprendendo a engatinhar no assunto. Agradeço a ajuda e vocês.  

     

     

     

    <html>
    <head>
    <title>Exercícios</title>
    <style>
     
    td {
        background-color: #ffffff;
        border: 1px solid #3C1808;
        padding: 6px 12px 6px 12px;
        text-align: center;
        color: #573218;
    }
     
    td#tt {
        background-color: #3C1808;
        border: 1px solid #3C1808;
        padding: 6px 12px 6px 12px;
        text-align: left;
    }
     
    th {
        border: 1px solid #3C1808;
        padding: 6px 12px 6px 12px;
        text-align: center;
    }
    th#t01 {
        background-color: #907968;
        color: #ffffff;
        vertical-align: middle;
    }
     
    th#t02 {
        background-color: #EACEAC;
        color: #573218;
    }
     
    preço {
        color: #cc0000;
        vertical-align: middle;
    }
     
    a:link,a:visited { text-decoration: none; }
    a:hover,a:visited:hover { color: #ff0000; font-weight: bold; }    
     
     
    .imagem {  
        display: none;   
        position: absolute;
        color: white;   
        padding: 10px;
        top: 220px;
        left: 835px;
    }
     
    </style>
     
    </head>
    <body bgcolor="#3C1808"
    text="#F3EDA3" link="#FFFF33" vlink="#F3EDA3">
     
    <script language="javascript">
     
    function mostrar(id, visibilidade) {   
    document.getElementById(id).style.display = visibilidade;
    }
     
    </script>
     
     
     
     
     
    <table width="100%">
    <tr><td id=tt colspan="2">
    <img src="imagens/MalaRodasPeq.png" align="left" />
    <div align="right">
    <font face="verdana,liberation" color="#FFEEBB">
    <address>Rua da Bagagem, 10<br/>
    Tel: (21) 1234-5678<br/>
    <a href="mailto:contato@malalca.com.br">
    contato@malalca.com.br</a></address>
    </font></div>
    <font face="verdana,liberation" color="#DDCC99">
    <br/><br/>
    <hr color="#F3EDA3" width="480" align="left" size="3" noshade />
    </font></td></tr>
    </table>
     
    <table width="100%">
     
    <tr><td id=tt rowspan=6 width="180" valign="top"><br/>
    <font face="verdana,liberation" color="#FFEEBB">
    <ul type="square">
    <li>Inicial</li><br>
    <li>Gabinetes</li><br>
    <li>Fontes</li><br>
    <li>Acessorios</li><br>
    <li>Placas</li></ul>
    </font> </td>
     
    <th colspan="4" id=t01>G A B I N E T E S</th></tr>
    <tr>
    <th id=t01>Modelo</th><th width="280" id=t01>Tamanho</th><th id=t01>Foto</th><th id=t01>Preço</th></tr>
    <tr>
    <th id=t02>Saurus</th><td> <a href="#" onclick="return false;"></a>
     
    <a href="#" onMouseOver="mostrar('img1', 'inline');" onMouseOut="mostrar('img1', 'none');">Excepcionalmente Grande</a>
    <div id="img1" class="imagem"><img src="saurus.jpg" alt="img1" /></div>
     
     
    </td><td rowspan=4><img src="vazio.jpg"></td><td rowspan=4><img src="vazio.jpg"></td></tr>
    <tr>
     
    <th rowspan=3 id=t02>Vitória</th><td> <a href="#" onclick="return false;"></a>
     
    <a href="#" onMouseOver="mostrar('img2', 'inline');" onMouseOut="mostrar('img2', 'none');">G r a n d e</a>
    <div id="img2" class="imagem"><img src="vitoria.jpg" alt="img2" /></div>
     </td></tr>
     
    <tr>
    <td><a href="#" onclick="return false;"></a>
     
    <a href="#" onMouseOver="mostrar('img2', 'inline');" onMouseOut="mostrar('img2', 'none');">M é d i o</a>
    <div id="img2" class="imagem"><img src="vitoria.jpg" alt="img2" /></div>
     </td></tr>
     
    <tr>
    <td><a href="#" onclick="return false;"></a>
     
    <a href="#" onMouseOver="mostrar('img2', 'inline');" onMouseOut="mostrar('img2', 'none');">P e q u e n o</a>
    <div id="img2" class="imagem"><img src="vitoria.jpg" alt="img2" /></div>
     </td></tr>
     
     
    </table>
     
    </body>
    </html>
×
×
  • Criar Novo...