SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Addict Phil-man's Avatar
    Join Date
    Nov 2000
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using Javascript to Apply One Element's Style to Another Element

    OK, my brain has apparently stopped functioning. If I want the background image assigned to one div element to be assigned to another div element as part of a function, why doesn't the following work?

    Code:
    test.div.style.backgroundImage=test.div2.style.backgroundImage;
    It works if I specify the actual background image within the function, so I know the image is there, and I know it's been properly assigned to div2, but div1's background image doesn't change.

    Thanks for any help!

  2. #2
    SitePoint Addict Phil-man's Avatar
    Join Date
    Nov 2000
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To clarify, "test" is an object, and test.div and test.div2 were assigned to document.getElementById("test1") and document.getElementByID("test2")...

  3. #3
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried something similar and it worked (IE7 and FF2). It may be a scope issue (finding the test object), or you may not have correctly selected elements in your document.

    If you're using Firefox with Firebug trying doing console.log(test) to see that all its properties are what you expect.

  4. #4
    SitePoint Addict Phil-man's Avatar
    Join Date
    Nov 2000
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply. Being the inexperienced Javascripter that I am, I didn't know you couldn't retrieve an element's style properties using the same syntax that you use for manipulating them.

    So, after much trial and error (mostly error), I have everything doing exactly what I want it to do (in Netscape 7, IE 7, and Firefox 2, anyway).

    If anyone cares to take a look at the URL below, I'd be interested in feedback on the methods used (i.e. markup, CSS, Javascript, use of PNGs), what can be done better, etc. The appearance and effect are what I want, but there are probably better/more efficient means to this end, especially since I had to keep hacking at it to get around all the errors I was getting . Don't worry about core.js, as that is unmodified from the original source (the Sitepoint book "Simply Javascript"). And to make things simple, I put the CSS and the rest of the Javascript in the document itself instead of linking to external docs. I also limited the "slides" to 2 and cut the time each one is displayed in half, to minimize your wait.

    http://www.netservicesgroup.com/test_page.htm

    Incidentally, I don't know Flash. Is there a compelling reason why I should do this in Flash instead of good old HTML/CSS/Javascript? Please say no.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •