1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Opacity change in ff

Discussion in 'JavaScript' started by ssll1, Aug 14, 2006.

0
  1. #1
    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()">
    HTML:
    in my script tags

    function setOpac()

                {
			<img src= "images/card1.GIF" alt= "Card One" style= "opacity:opacity-0.2">		
		}
    HTML:
    obviously this doesn't work...any tips?

    Many thanks in advance :D
     
    ssll1, Aug 14, 2006 IP
  2. mjamesb

    mjamesb Member

    Messages:
    88
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    48
    #2
    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'
    }
     
    mjamesb, Aug 15, 2006 IP
    ssll1 likes this.
  3. knopix

    knopix Peon

    Messages:
    122
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    you're putting html code into the javascript function, which is illegal
    like mjamesb, you need to refer to the image with an id
     
    knopix, Aug 16, 2006 IP
  4. ssll1

    ssll1 Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    oh yep thanks. I got that all working now.
     
    ssll1, Aug 16, 2006 IP
  5. ccoonen

    ccoonen Well-Known Member

    Messages:
    1,606
    Likes Received:
    71
    Best Answers:
    0
    Trophy Points:
    160
    #5
    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;
     
    ccoonen, Aug 17, 2006 IP