Transparência,me Ajudem

Pedrinho · Julho 22, 2004

eu queria saber como fazer um efeito de transparência em um:

uma imagem que está 'linkada" e fica um pouco escura q o normal.. e quando você passa o mouse nela, ela volta ao normal..mas eu queria tipo ir clareando.

eu tenho um código q faz isso mas ele faz sem uma transição:

<head>

function makevisible(cur,which){

if (which==0)

cur.filters.alpha.opacity=100

else

cur.filters.alpha.opacity=50

}

</script>

</head>

depois isso:

style="filter:alpha(opacity=50)" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)" na imagem q você quer fazer isso

espero q vocês entenderam minha dúvida...

valeu , espero q me ajudem!!

iSoron · Julho 22, 2004

Script?

Movendo....

Illidan · Julho 22, 2004

hmmm, esse código é com CSS... acho que pra fazer do jeito que você quer (com uma transição gradual), teria que ser com javascript... bom, eu acho!

Já vi um JS que faz isso... vou fuçar aqui nos meus arquivos, qualquer coisa eu volto pra postar o código.

***** EDITANDO *****

Achei! Se quiser dar uma olhada nele funcionando, clique aqui!

Falou!

/************************************************************
* Script name: Link fader (http://design64.net/js/linkfader.html)
* Version: 1.0
* Date: 12.05.02
* Usage: Freeware - You may modify this script as you wish,
* as long as you don't remove this header comment.
*
* Script by: Fayez Zaheer (viol8r on #webdesign [irc.zanet.org.za])
* Email: fayez@design64.net
* Web site: http://design64.net
* Original idea: http://anarchos.xs.mw/fade.phtml
************************************************************/
// A grande vantagem deste script é que ele não modifica a cor
// original de seus links, nem modifica os atributos onmouseover e
// onmuseout - ele apenas ignora esses links. Se ainda assim quiser usar o
// efeito, adicione findLink(this.id) para o mouseover e clearFade()
// para o onmouseout. ex.:
// <a href="#" onmouseover="findLink(this.id); yourFunction()"
// onmouseout="clearFade(); yourSecondFunction()">
// Cor do efeito sem o sinal # (6 caracteres apenas!)
var fadeTo = "ffaa22";
// Incremento/decremento da cor do fade in
var fiBy = 6;
// Incremento/decremento da cor do fade in
var foBy = 10;
// Velocidade do efeito. Coloque mais que 10 para que valha a pena
var speed = 10;
// Nome das classes que não sofrerão o efeito
// var ignoreClass = "qualquervalor" se não quiser
// usar esse recurso. Alternativamente, adicione onmouseover="clearFade()"
// para o link que você não deseja o efeito.
var ignoreClass = "ignore";
// Fim da configuração. Não edite abaixo.
//
//
var opera, ie, dom, x = 0, oc, fader, ocs = new Array();
if (navigator.userAgent.indexOf("Opera") != -1) opera = true
else if (document.all && !opera) ie = true
else if (!document.all && document.getElementById) dom = true;
function convertRGB(z)
{
var newfcS = "", splitter = "";
splitter = z.split(",");
splitter[0] = parseInt(splitter[0].substring(4, splitter[0].length));
splitter[1] = parseInt(splitter[1]);
splitter[2] = parseInt(splitter[2].substring(0, splitter[2].length-1));
for (var q = 0; q < 3; q++)
{
splitter[q] = splitter[q].toString(16);
if (splitter[q].length == 1) splitter[q] = "0" + splitter[q];
newfcS += splitter[q];
}
return newfcS;
}
function currentColour(index)
{
var temp, cc;
if (opera) cc = document.links[index].style.color
else if (ie) cc = document.links[index].currentStyle.color
else if (dom) cc = document.defaultView.getComputedStyle(document.links[index], '').getPropertyValue("color");
if (cc.length == 4 && cc.substring(0, 1) == "#")
{
temp = "";
for (var a = 0; a < 3; a++)
temp += cc.substring(a+1, a+2) + cc.substring(a+1, a+2);
cc = temp;
}
else if (cc.indexOf("rgb") != -1) cc = convertRGB(cc)
else if (cc.length == 7) cc = cc.substring(1, 7)
else cc = fadeTo;
return cc;
}
function convert2Dec(hex)
{
var rgb = new Array();
for (var u = 0; u < 3; u++)
rgb = parseInt(hex.substring(u*2, u*2+2), 16);
return rgb;
}
function newRGB(f, n, d)
{
var change;
if (d == 1) change = fiBy
else change = foBy;
for (var g = 0; g < 3; g++)
{
if (n[g] > f[g] && n[g] - change >= 0) n[g] -= change;
if (n[g] < f[g] && n[g] + change <= 255) n[g] += change;
}
return n;
}
function fade(index, d)
{
var fc, nc, temp = new Array(), finished = false;
nc = convert2Dec(currentColour(index));
if (d == 1) fc = convert2Dec(fadeTo)
else fc = convert2Dec(ocs[x]);
temp = convert2Dec(currentColour(index));
nc = newRGB(fc, nc, d);
if ((nc[0] == temp[0]) && (nc[1] == temp[1]) && (nc[2] == temp[2]))
finished = true;
if (!finished) document.links[x].style.color = "rgb(" + nc[0] + "," + nc[1] + "," + nc[2] + ")"
else clearInterval(fader);
}
function findLink(over)
{
if (document.layers) return;
if (fader)
{
clearInterval(fader);
document.links[x].style.color = "#" + ocs[x];
}
if (over && !this.id) this.id = over;
x = 0;
while (!(this.id == document.links[x].id) && (x < document.links.length))
x++;
if (this.id == document.links[x].id)
{
oc = currentColour(x);
fader = setInterval("fade(" + x + ", 1)", speed);
}
}
function clearFade()
{
if (document.layers) return;
if (fader) clearInterval(fader);
fader = setInterval("fade(" + x + ", 0)", speed);
}
function init()
{
for (var i = 0; i < document.links.length; i++)
{
ocs = currentColour(i);
var currentOver = document.links.onmouseover;
var currentOut = document.links.onmouseout;
var ignoreIt = document.links.className == ignoreClass;
if (!ignoreIt) document.links.id = "link" + i;
if (!currentOver && !currentOut && !ignoreIt)
{
document.links.onmouseover = findLink;
document.links.onmouseout = clearFade;
}
}
}
if (opera || ie || dom) window.onload = init;

Entrar

Transparência,me Ajudem

Pergunta

Pedrinho

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

iSoron

Link para o comentário

Compartilhar em outros sites

Illidan

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades