Using Javascript to change a cell background image

Discussion in 'Javascript' started by Mark, Jul 29, 2006.

  1. Mark

    Mark Guest

    IE creates an object of every ID'd HTML tag (so it appears), and each
    object sets a property for any parameter I set in the tag. For example,
    my HTML might be: <td id='cell1' background='myimg.jpg' width='30'> ...
    </td> which IE will use to create a Javascript object called 'cell1'
    with properties of background and width, like so:
    cell1.background would have a value of 'myimg.jpg' and cell1.width would
    have a value of 30.

    I can change the width of the cell in my Javascript function using:
    document.getElementById('cell1').width = 25;
    and I can change the background using
    document.getElementById('cell1').background = "yourimg.jpg";

    But this doesn't work in all browsers because they (FireFox, for
    example) doesn't create an object property (such as "width" and
    "background") for each tag with an ID.

    How do I get around this using non-IE browsers? I want my Javascript to
    be able to change the background image of a table cell. It works in IE,
    but not FireFox. I haven't tried others yet.

    Mark
     
    Mark, Jul 29, 2006
    #1
    1. Advertising

  2. Mark

    Randy Webb Guest

    Mark said the following on 7/29/2006 10:19 AM:
    > IE creates an object of every ID'd HTML tag (so it appears), and each
    > object sets a property for any parameter I set in the tag. For example,
    > my HTML might be: <td id='cell1' background='myimg.jpg' width='30'> ...
    > </td> which IE will use to create a Javascript object called 'cell1'
    > with properties of background and width, like so:
    > cell1.background would have a value of 'myimg.jpg' and cell1.width would
    > have a value of 30.


    Welcome to the quirks and stupidity of IE.

    > I can change the width of the cell in my Javascript function using:
    > document.getElementById('cell1').width = 25;
    > and I can change the background using
    > document.getElementById('cell1').background = "yourimg.jpg";
    >
    > But this doesn't work in all browsers because they (FireFox, for
    > example) doesn't create an object property (such as "width" and
    > "background") for each tag with an ID.


    No browser does it other than IE, that I know of.

    > How do I get around this using non-IE browsers? I want my Javascript to
    > be able to change the background image of a table cell. It works in IE,
    > but not FireFox. I haven't tried others yet.


    Use CSS and then change it's style properties:

    <td id="cell1" style="background-image:myimg.jpg;width:30px">

    document.getElementById('cell1').style.backgroundImage = 'newImage.jpg';
    document.getElementById('cell1').style.width = '22px';

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
     
    Randy Webb, Jul 29, 2006
    #2
    1. Advertising

  3. Mark

    Mark Guest


    > Use CSS and then change it's style properties:
    >
    > <td id="cell1" style="background-image:myimg.jpg;width:30px">
    >
    > document.getElementById('cell1').style.backgroundImage = 'newImage.jpg';
    > document.getElementById('cell1').style.width = '22px';
    >

    Thanks! This does the trick!

    Mark
     
    Mark, Jul 30, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    1
    Views:
    5,250
    Rhino
    May 2, 2006
  2. HB
    Replies:
    4
    Views:
    20,818
    Mark Rae
    May 7, 2006
  3. RJ
    Replies:
    1
    Views:
    244
    Eliyahu Goldin
    Feb 17, 2005
  4. Peter Williams
    Replies:
    3
    Views:
    204
  5. Jim
    Replies:
    2
    Views:
    157
Loading...

Share This Page