LOGIN:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Sexta-feira, 07/02/2003 - 03:00 - Por Robson Cavalcante
Seções relacionadas:

Efeito sobre imagens

Bem, como prometido semana passada, esta semana preparei uma matéria muito legal sobre efeito em imagens, trata-se de um efeito cuja função é de demonstrar se a imagem já foi ou não visualizada, como se sobre a imagem passasse-mos uma caneta marca texto. Seu funcionamento é bem simples e bem fácil de se implementar, a diferença está em se usar um script desenvolvido em Java Script, mais nada com muito segredo, então vamos lá.

Pegue o código abaixo e cole na seção de seu código HTML.

e logo abaixo segue nosso atributo em CSS, pegue-o e cole também no de seu HTML.


OBS: No CSS utilizamos o seguinte filtro alpha e seus 2 principais elementos onde:
Opacity: Valor inicial de nossa imagem, opacidade.
FinishOpacity: Valor Final de nossa imagem, opacidade.
Se desejar regular a opacidade inicial ou final, você só precisará trocar os valores iniciais e finaisde seu trabalho.

Pronto, agora temos a faca e o queijo na mão. Muito simples.
Vamos aplicar nosso efeito e ver como funciona.

Aplique sua imagem ao documento, ou seja, ao HTML, veja exemplo abaixo:

Obs: Você aplicará o estilo em CSS da seguinte forma, dentro da Tag img em HTML. O seu código com o atributo em CSS ficará assim:

img src="imagem.jpg" width="300" height="200" onmouseup=class="visite"
Repare acima o onmouseup=class="visite" dentro de nossa Tag img.

Em caso de dúvidas, entre em contato.

Semana que vem estarei mostrando como se utilizar CSS e Dreamweaver, duas forças poderosas unidades para uma só batalha.Até semana que vem pessoal.
Falow pessoal, um abraço!

Todos os artigos de Robson Cavalcante

4 comentários publicados

  • 1. erro na página

    Quarta-feira, 12/01/2005, por Antonio

    Existe um erro na página que não deixa ver o código a ser colado no html

    Responder comentário

  • 2. Código

    Quinta-feira, 23/06/2005, por Leandro Teixeira de Carvalho

    Onde está o código que para ser colado na página html?????

    Responder comentário

  • 3. Problema

    Sexta-feira, 05/08/2005, por Biohard

    no head fica assim.....

    function mOvr(src,clrOver) {
    if (!src.contains(event.fromElement)) {
    src.style.cursor = 'hand';
    src.bgColor = clrOver;
    }
    }
    function mOut(src,clrIn) {
    if (!src.contains(event.toElement)) {
    src.style.cursor = 'default';
    src.bgColor = clrIn;
    }
    }
    function mClk(src) {
    if(event.srcElement.tagName=='TD'){
    src.children.tags('A')[0].click();
    }
    }
    function openform(url) {
    var url = url + "?url=" + document.location;
    var NS = (document.layers) ? true : false;
    var IE = (document.all) ? true : false;
    if(NS) {
    window.open(url,"","scrollbars=no,menubar=no,personalbar=no,width=430,height=220,screenX=220,screenY=0");
    } else if(IE) {
    window.open(url,"","scrollbars=no,menubar=no,personalbar=no,width=430,height=220,left=220,top=0");
    }
    }
    function openfoto(url) {
    var url = url + "?url=" + document.location;
    var NS = (document.layers) ? true : false;
    var IE = (document.all) ? true : false;
    if(NS) {
    window.open(url,"","scrollbars=no,menubar=no,personalbar=no,width=430,height=220,screenX=220,screenY=0");
    } else if(IE) {
    window.open(url,"","scrollbars=no,menubar=no,personalbar=no,width=430,height=220,left=220,top=0");
    }
    }
    </script>
    <style type="text/css">
    <!--
    .visite
    {
    FILTER:alpha(Opacity=99,FinishOpacity=47,style=1,StartX=0,FinishX=2,StartY=0,FinishY=2)
    }
    -->
    </style>



    O pro acontece quando se chama onmouseup=class="visite" no console do firefox, explia o seguinte erro: Erro: class is a reserved identifier class="visite"

    Já diminuiu o erro!! É resolver o resto. Falow galera.

    Responder comentário

  • 4. Eskece

    Sexta-feira, 05/08/2005, por Biohard

    Pessoal, eskecam o post abaixo...

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

Sobre o autor

Robson Cavalcante trabalha com desenvolvimento de soluções web, dedicado principalmente a trabalhos com folhas de estilos.


Indique para um amigo

captcha

TI SHOP Produtos iMasters

  • Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
  • Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
  • DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
  • DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.