Logo Hardware.com.br
halfcab
halfcab Novo Membro Registrado
5 Mensagens 1 Curtida

Zoom Effect dentro de tabela.

#1 Por halfcab 13/01/2016 - 09:31
Fala galera, preciso de uma ajuda de vocês...

Estava reformulando o site da empresa do meu pai e o site em uma das páginas é formado por tabelas.

Consegui arrumar boa parte, mas ele pediu para que eu criasse uma parte com imagem e usar o zoom effect nela. Bolei um code e ele funciona normal, o problema é que não consigo posicionar o zoom para o lado esquerdo e nem mesmo fazer esse zoom ficar fora da tabela, ele da zoom dentro.



Eu até identifiquei que o fato dele não sair da table é que ele está programado lá dentro, mas não consegui pensar em outro modo de programar.

Se conseguirem me ajudar a concertar e/ou programar de outro modo que atenda a ideia, agradeço a todos...
tabela zoom effect site pai empresa tabela zoom effect reformulando
Shinayder
Shinayder Veterano Registrado
669 Mensagens 118 Curtidas
#2 Por Shinayder
13/01/2016 - 10:11
Fala Jovem, bão?

Cara, tem bastante errinho corriqueiro no seu código, por exemplo, pra que você definiu o width e height na tag HTML das suas imagens se também as definiu no CSS?

Analisa seu código e você vai ver que da pra melhorar muita coisa, eu já corrigi algumas coisas, e esta ai do jeito que você precisa, vê se é isso e vai nos avisando, abraços.



<!DOCTYPE html>

<html>

    <head>

        



        <style>

            .pic

            {

                width:100px;

                height:100px;

                border: 1px solid;

            }

            .picbig

            {

                position: absolute;

                width:0px;

                /*z-index:2;*/

            }

            .pic:hover + .picbig

            {

                width:    600px;

                height:   400px;

                left:        300px;

                bottom: 200px;

                border: 1px solid;

            }

        </style>

    </head>

    <body>

        <table width="1180" border="1">          

                <tr>

                    <td width="190" rowspan="14" align="center" valign="middle">

                        <span class="TAMANHO">

                            <img class="pic" src="Equipamentos/Superaquecedor Xerogel.JPG" alt="" />

                            <img class="picbig" src="Equipamentos/Superaquecedor Xerogel.JPG" alt="" />

                        </span>

                    </td>

                </tr>

        </table>

    </body>

</html>
Phenon X4 Black Box Edition 3.4 64bits | Memoria DDR3 8Gb | Nvidea Geforce GTS 450 1GB| HD Samsung SATA 500Gb e Samsung SATA 1 Tb rindo_atoa.gif
NoteBook: Em Analise nao_sei.gif
http://www.stormclouds.com.br/
halfcab
halfcab Novo Membro Registrado
5 Mensagens 1 Curtida
#3 Por halfcab
13/01/2016 - 12:41
Shinayder disse:
Fala Jovem, bão?

Cara, tem bastante errinho corriqueiro no seu código, por exemplo, pra que você definiu o width e height na tag HTML das suas imagens se também as definiu no CSS?

Analisa seu código e você vai ver que da pra melhorar muita coisa, eu já corrigi algumas coisas, e esta ai do jeito que você precisa, vê se é isso e vai nos avisando, abraços.



<!DOCTYPE html>

<html>

    <head>

        



        <style>

            .pic

            {

                width:100px;

                height:100px;

                border: 1px solid;

            }

            .picbig

            {

                position: absolute;

                width:0px;

                /*z-index:2;*/

            }

            .pic:hover + .picbig

            {

                width:    600px;

                height:   400px;

                left:        300px;

                bottom: 200px;

                border: 1px solid;

            }

        </style>

    </head>

    <body>

        <table width="1180" border="1">         

                <tr>

                    <td width="190" rowspan="14" align="center" valign="middle">

                        <span class="TAMANHO">

                            <img class="pic" src="Equipamentos/Superaquecedor Xerogel.JPG" alt="" />

                            <img class="picbig" src="Equipamentos/Superaquecedor Xerogel.JPG" alt="" />

                        </span>

                    </td>

                </tr>

        </table>

    </body>

</html>


Então cara, concertou o que eu precisava...

Mas o problema é que, preciso fazer isso para mais da uma linha do programa, ou seja, serão mais de uma imagem. No code que tu me passou, fará com que todas as linhas exibam a imagem nas mesmas "coordenadas", assim, uma linha que esteja lá em baixo, exibirá a imagem lá em cima...

Mas valeu por ajudar man :v
© 1999-2024 Hardware.com.br. Todos os direitos reservados.
Imagem do Modal