SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    change image src?

    if i have an image and the id is star like <img id="star" src="blah">

    how can i change the image source with javascript?

    thanks
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    img = document.getElementById('star');
    img.src = "foobar";
    It's usually a good idea to pre-load images. This is how I preload images for my winamp remote buttons

    HTML Code:
    var Button = new Array();
    	Button[0] = new Image();
    	Button[0].src = "img/dev/button_send.jpg";
    	Button[1] = new Image();
    	Button[1].src = "img/dev/button_send_hover.jpg";
    	Button[2] = new Image();
    	Button[2].src = "img/dev/button_send_pressed.jpg";
    Then to change the image, I simply do this

    HTML Code:
    img = document.getElementById('star');
    img.src = Button[2].src;
    Current Project: Winamp - Online Remote

  3. #3
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks!
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No prob
    Current Project: Winamp - Online Remote

  5. #5
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    im getting an error

    my img tags look like this:

    HTML Code:
    <img id="star_216_1" align="absbottom" height="20" width="20" src="https://www.kranichs.com/images/starUp.gif" onclick="MM_goToURL('parent','update_stars.php?pid=216&stars=1');return document.MM_returnValue"" onmouseover="do_stars(216,1)" onmouseout="" />
    the reason i name them like star_216_1 is because the first number relates to which group of stars it is, and the second number relates to wich star in that group it is (1-4)

    and my function looks like this:

    Code:
    <script type="text/javascript" language="javascript">
    	var Button = new Array();
    	Button[0] = new Image();
    	Button[0].src = "https://www.kranichs.com/images/starUp.gif";
    	Button[1] = new Image();
    	Button[1].src = "https://www.kranichs.com/images/starDown.gif";
    
    	function do_stars(id,count){
    		var img = new Array();
    		for(i=1;i<=count;i++){
    			var starUp = 'stars_'+id+'_'+i;
    			img[i] = document.getElementById(starUp);
    			img[i].src = Button[0].src;
    		}
    		for(i=4;i>count;i--){
    			var starDown = 'stars_'+id+'_'+i;
    			img[i] = document.getElementById(starDown);
    			img[i].src = Button[1].src;
    		}
    	}
    	</script>
    im getting an error that says "'null' is null or not an object"
    i did alert(starUp) and it was right 'star_216_1' so im not sure what the problem is?

    the reason im doing it like this is becuase i have 4 buttons of stars side by side, and you can click on each star to rate something, and when you roll over star 2 for example i want star 1 and 2 to turn yellow(starUp) and star 3 and star 4 to turn grey(starDown)

    THANKS
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  6. #6
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok but if i alert(document.getElementById(starUp));

    it comes up null i guess thats the problem....starUp does equal the ID name so any reason on why this would come up null?
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  7. #7
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i got it to work...it was my fault i had called it 'star' in the id and 'stars' in the function

    so the rollover works now....but if anyone can offer any ideas on how to turn the 4 stars back to their oringal states after rollout id love to hear any ideas...thanks
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.


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
  •