SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jan 2003
    Location
    Toronto
    Posts
    234
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Basic Image Replacement

    I've been looking at all the various image replacement techniques..and they all seem unnecessarily complicated.

    I came up with:

    Code:
    function replaceLogo() {
    document.getElementById('header').innerHTML = '<img src="/images/logo-tci.gif" />';
    }
    It's just replacing the layer contents at a very basic level.

    This works just fine, I'm just wondering how well supported it would be across different browsers. Anyone know of a table of browsers that support innerHTML or see potential cross-browser issues with this technique?

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Netscape 6+ supports document.getElementById() and innerHTML, as does IE5+, Opera 7+, and Firefox.

    If you just want to change the src of an image there are better ways like giving the image an id and accessing it directly to change its src attribute.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function replaceLogo() {
    document.getElementById('header').getElementsByTagName('img')[0].src = "/images/logo-tci.gif"
    }
    or if header only contains 1 picture
    Code:
    <img id="header" src="originalPic.gif">
    <script>
    function replaceLogo() {
    document.getElementById('header').src = "/images/logo-tci.gif"
    }
    </script>
    You'll find the longer scripts are probably to preload the images, so when the function is called the images are brought in from the cache and not from the server, making it alot faster
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if


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
  •