Por uma internet mais criativa e dinâmica

Faça Login ou Cadastre-se

Esqueci a senha

Arquitetura e Design
Banco de Dados
- Access
- DB2
- Interbase
- MySQL
- Oracle
- PostgreSQL
- SQL Server
Carreira
CMS e Framework
Desenvolvimento
Gerência de TI
Linguagens
- .NET
  - ADO.NET
  - ASP.NET
  - C#.NET
  - VB.NET
- ActionScript
- ASP
- ColdFusion
- CSS
- Delphi
- Java
  - Java para Mobile
  - Java para web
- Javascript
  - Ajax
  - JQuery
  - Prototype
- Perl
- PHP
- Ruby on Rails
- UML
- Visual Basic
- XHTML
- XML
Mídia e Marketing Digital
Redes e Servidores
- Apache
- Cisco
- Linux
- Segurança
- Windows Server
Tecnologia
- Gadgets
- TV Digital
- VoIP

CSS

Feeds

Newsletter

Sexta-feira, 07 de fevereiro de 2003 às 03h00

Efeito sobre imagens

Faça o curso: jQuery na Prática

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!

Interação

4 comentários

Antonio
12/01/2005 22h56

erro na página

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

Responder

Leandro Teixeira de Carvalho
23/06/2005 16h17

Código

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

Responder

Biohard
05/08/2005 23h47

Problema

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">

</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.