1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.
  2. A secção Microsoft/Windows encontra-se actualmente em processo de reestruturação.
    Remover anúncio

IMAGE ZOOM: dúvida sobre imagens num website

Discussão em 'Windows Desktop e Surface' iniciada por crossroads, 19 de Outubro de 2005. (Respostas: 5; Visualizações: 1021)

  1. crossroads

    crossroads Power Member

    Boas a todos!
    Precisava da vossa opinião, quem souber, sobre um website. Queria ajudar a minha namorada a fazer um site. Eu tenho algum espaço num servidor e depois é só preciso arranjar um domínio, mas entretanto queria ajudá-la a fazer o site.
    Ela tem conhecimentos de Dreamweaver mas não dá para tudo :). Em primeiro lugar, queria um site dinâmico.
    1- O problema é que ela precisa de meter muitas imagens (por acaso não de fotografia mas de pintura) e hoje falaram-me nums image gallery.
    2- Ela tb andava a pensar numa maneira que ao clicar sobre a imagem aparecesse um detalhe deste. Já vi isso em alguns sites, que agora não consigo encontrar, mas não sei como fazê-los.

    Gostav então de perguntar a quem souber a opinião sobre isto e algum que outro conselho para o site que se lembrarem.

    Obgd!
     
    Última edição: 20 de Outubro de 2005
  2. migueluxo

    migueluxo [email protected] Member

    a cena de passares por cima da imagem e aparecer detalhe sobre a mesma faz-se facilmente com javascript "penso que será a forma mais simples" , quando ao site dinamico, se procurares na net existe 1001 templates para o efeito é so mudificares.
     
  3. Feiticeiro

    Feiticeiro Power Member

  4. Delta

    Delta Suspenso

    ===============================================
    insere este código entre as TAGS <header>...</header>
    ===============================================

    <script>
    function showDetalhe(largura,altura,x,y,mensagem) {
    var DivRef = document.getElementById('messageContainer');
    var IfrRef = document.getElementById('DivShim');
    DivRef.style.top=y;
    DivRef.style.left=x;
    document.getElementById('messageBox').width=largura;
    document.getElementById('messageBox').height=altura;
    document.getElementById('messageText').innerHTML = mensagem;
    IfrRef.style.width = DivRef.offsetWidth+1;
    IfrRef.style.height = DivRef.offsetHeight;
    IfrRef.style.top = DivRef.style.top;
    IfrRef.style.left = x-1;
    IfrRef.style.zIndex = DivRef.style.zIndex - 1;
    IfrRef.style.visibility='visible';
    DivRef.style.visibility='visible';
    }

    function hideDetalhe() {
    var DivRef = document.getElementById('messageContainer');
    var IfrRef = document.getElementById('DivShim');

    IfrRef.style.visibility='hidden';
    DivRef.style.visibility='hidden';

    }

    </script>


    =================
    insere este código logo a seguir à TAG <BODY>
    =================

    <iframe id="DivShim" style="Z-INDEX: 101; LEFT: 168px; VISIBILITY: hidden; WIDTH: 152px; POSITION: absolute; TOP: 272px; HEIGHT: 34px"
    src="javascript:false;" frameBorder="0" scrolling="no"></iframe>
    <div id="messageContainer" style="BORDER-RIGHT: #d7e5f2 2px outset; BORDER-TOP: #d7e5f2 2px outset; Z-INDEX: 103; LEFT: 496px; VISIBILITY: hidden; BORDER-LEFT: #d7e5f2 2px outset; BORDER-BOTTOM: #d7e5f2 2px outset; POSITION: absolute; TOP: 272px">
    <table id="messageBox" style="PADDING-RIGHT: 5px;PADDING-LEFT: 5px;PADDING-BOTTOM: 5px;MARGIN: 0px;CURSOR: pointer;PADDING-TOP: 5px"
    height="1" width="5" bgColor="#4267b2">
    <tr>
    <td align="center"><span id="messageText" style="COLOR: #FFFFFF;FONT-SIZE: 11px;FONT-WEIGHT: bold; FONT-FAMILY: Arial;">Mensagem</span></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    </tr>
    </table>
    </div>


    =======================
    depois em qualquer imagens que introduzas, fazes assim :
    =======================

    <img src="imagens/LogoAzul2.GIF" onmouseout="hideDetalhe()" onmouseover="showDetalhe(200,30,100,100,'logotipo do IFADAP/INGA')"/>


    onde a rotina showDetalhe recebe estes parâmetros :

    largura,altura, coordenada X, coordenada Y, mensagem do detalhe da figura

    simples
     
  5. crossroads

    crossroads Power Member

    Obrigado a todos! vou experimentar!

    EDIT: já experimentei e não cheguei a perceber bem o que era isso Delta. Editei aquilo e apenas me aparecia uma imagem azul enorme com o texto "logotipo do IFADAP/INGA" sobre a imagem que tinha colocado lá. Mas não vi nenhum zoom. Terei feito aquilo mal?

    Eu procurava alguma coisa deste estilo: http://www.veer.com/zoom/
    Este exemplo foi feito em flash mas não sei onde arranjar o código. Além de procurar uma coisa free ou open source, procurava uma coisa parecida em flash ou em javascript (se houver outro avisem-me, plz)

    Obg!
     
    Última edição: 20 de Outubro de 2005
  6. Mitnick

    Mitnick Power Member

    Isso e feito com Flash... e uma solucao um pouco mais complicada... alguem mais experiente nesse campo ha de te explicar com se faz
     

Partilhar esta Página