Opacity change in ff

[ssll1]

Hello. I was wondering if anyone could help me.

I'm working with javascript and I have 3 different images when I click on one image the opacity should decrease from 100 to 80 etc...

But I am using firefox and I'm not worrying about IE at the moment.

<img src= "images/card1.GIF" alt= "Card One" style= "opacity:1" onclick = "setOpac()">


in my script tags

function setOpac()

{
<img src= "images/card1.GIF" alt= "Card One" style= "opacity:opacity-0.2">
}

obviously this doesn't work...any tips?

Many thanks in advance :D

[mjamesb]

You need to give your image an id like "Image1" then do this


<img id="Image1" src= "images/card1.GIF" alt= "Card One" style= "opacity:1" onclick = "setOpac()">

function setOpac()
{
document.getElementById("Image1").style.opacity = '.2'
}

[knopix]

you're putting html code into the javascript function, which is illegal
like mjamesb, you need to refer to the image with an id

[ssll1]

oh yep thanks. I got that all working now.

[ccoonen]

to get it crossbrowser, don't set the opacity with javascript. change the css class name with javascript - and have the css modify it's opacity.

For example, you can create a css class called .op80 {/* set all versions of opacity like IE's Transparency filter, opacity, etc... */} and make one for .op100.

Then your javascript just has to do a document.getElementById("obj").className = obj80;