Results 1 to 7 of 7
  1. #1
    Javascript Image Change

    Member Since
    Jan 17, 2008
    Posts
    16
    Specs:
    MacBook Pro: 2.16 GHz 2GB ram
    Question Javascript Image Change
    I have found a code that changes the background image of a page. Is it possible to adapt it to change an image on the page?

    Code:
    <script language="JavaScript">
    <!--
    
    // Copyright 2001 by www.CodeBelly.com
    // Please do *not* remove this notice.
    
    var backImage = new Array();
    
    backImage[0] = "../gallery_pages/images/stupid/full-32 King Stupid Main Set.JPG";
    backImage[1] = "../gallery_pages/images/stupid/full-33 King Stupid Control Desk.jpg";
    backImage[2] = "../gallery_pages/images/stupid/full-34 King Stupid Main Set Rev..JPG";
    
    function changeBGImage(whichImage){
    if (document.body){
    document.body.background = backImage[whichImage];
    }
    }
    
    //-->
    </script>
    Can you help?

  2. #2
    Javascript Image Change
    Thyamine's Avatar
    Member Since
    Apr 23, 2007
    Location
    Coatesville, PA
    Posts
    377
    Specs:
    MBP 15", 2.33 GHz, 2Gb
    There are a lot of ways to change the image on a page. This is simply using javascript to refer to the document background object. You can do the same thing with an image by giving it an ID (a name), and then use Javascript to find it and change the src.

    I couldn't find the right tutorial I wanted to link to, but you can certainly google it and find one that makes sense to you.

  3. #3
    Javascript Image Change
    knightlie's Avatar
    Member Since
    Mar 22, 2007
    Location
    UK
    Posts
    1,463
    Specs:
    Lenovo Z560 Hackintosh -:- '06 iMac -:- iPod Touch 2ndGen
    Code:
    var img;
    
    img = document.getElementById('imageID');
    img.src = 'http://website.com/image.jpg';
    That's off the top of my head, but it's something similar. The IMG tag needs an id="imageID" for this to work:

    Code:
    <img id="imageID" src="image.jpg" />
    You can also pre-load the new image into a variable and assign it later, but the code is slightly different. As Thyamine said there are bazillions of tutorials on the web for doing this
    [URL="http://beadia.net"]Beadia[/URL - Jewelry Business Management Software]
    I judge you when you use poor grammar.

  4. #4
    Javascript Image Change
    Thyamine's Avatar
    Member Since
    Apr 23, 2007
    Location
    Coatesville, PA
    Posts
    377
    Specs:
    MBP 15", 2.33 GHz, 2Gb
    What Knightlie has entered is pretty much what you need.

    One thing to note, case sensitivity can be important, and I have a tendency to type getElementByID (capital ID) instead of getElementById, and it always takes me forever to track down where the heck the javascript error I'm getting is from.

  5. #5
    Javascript Image Change
    giulio's Avatar
    Member Since
    Mar 19, 2007
    Location
    NY USA
    Posts
    1,813
    Specs:
    iMac 5.1 | iMac 7.1 | iPod Touch | iPod Nano
    Less code:

    document.getElementByID('yourimageID').src='/media/image.jpg';
    Or if you're using prototype/scriptaculous, even less:

    $('yourimageID').src='/media/image.jpg';
    schweb This has to be one of the best threads ever in MF history...
    Cherokee This gets my vote for most innovative thread on Mac-Forums... ever.

  6. #6
    Javascript Image Change

    Member Since
    Jan 17, 2008
    Posts
    16
    Specs:
    MacBook Pro: 2.16 GHz 2GB ram
    I kind of get the logic, but It isn't working for me.

    In the head, I have:
    Code:
    <script language="JavaScript">
    document.getElementByID('imageID').src='../gallery_pages/images/stupid/full-32.JPG';  
    </script>
    And the Body:
    Code:
    <img id="imageID" src="../gallery_pages/images/stupid/full-32.JPG"/>
    and
    Code:
    <a href="javascript:'imageID'.src='../gallery_pages/images/stupid/full-33 King Stupid Control Desk.jpg'"><img src="../gallery_pages/images/stupid/thumbs15/thumb-full-33" border="0" /></a>
    What needs correcting? Oh, and you have been a big help so far

  7. #7
    Javascript Image Change
    Thyamine's Avatar
    Member Since
    Apr 23, 2007
    Location
    Coatesville, PA
    Posts
    377
    Specs:
    MBP 15", 2.33 GHz, 2Gb
    getElementByID should be getElementById (lowercase d).

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Tried to Change My Login Image
    By smart4aday77 in forum OS X - Operating System
    Replies: 6
    Last Post: 07-22-2010, 05:39 AM
  2. Change style sheet by javascript
    By michelangelo in forum Web Design and Hosting
    Replies: 0
    Last Post: 05-01-2008, 07:12 PM
  3. JavaScript based real-time image blur
    By giulio in forum Web Design and Hosting
    Replies: 1
    Last Post: 07-27-2007, 01:41 AM
  4. Change What An Image Opens With
    By XMARLTONX in forum OS X - Operating System
    Replies: 3
    Last Post: 05-16-2007, 01:32 AM

Posting Permissions

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