Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Need Help Cresting Java Script to change Image Source

  1. #1
    Join Date
    May 2010
    Posts
    3,851
    Rep Power
    17

    Exclamation Need Help Cresting Java Script to change Image Source

    I need help creating a javascript that will change the source for an image using the following


    Code:
    <img id="wrench" src="spanners.jpg"
    alt=".." width=".." height= ".." />
    
    
    document.getElementById("wrench").src=
    "monkey_wrench.jpg";

    The java script would run when i click a button that is tied to a specific picture and display that photo by change the source information.

    However I have tried a couple things but nothing seems to work... Can someone at least point me in the right direction.

  2. #2
    Join Date
    Feb 2005
    Posts
    1,227
    Rep Power
    0

    Default

    try using single quotes
    >>Insert something witty here<<

  3. #3
    Join Date
    Aug 2002
    Posts
    612
    Rep Power
    0

    Default

    Just a silly question.....Why would you want to change the image source?
    "To err is human - and to blame it on a computer is even more so."
    Alcatel One Touch PIXI 3 (4.5)
    LG Fortune 2

  4. #4
    Join Date
    Apr 2003
    Posts
    13,269
    Rep Power
    34

    Default

    Quote Originally Posted by kknight View Post
    Just a silly question.....Why would you want to change the image source?
    Click a link and a picture on the page changes.
    Click a picture and another picture appears (like a photo slide).
    Click a link and a picture appears.
    Mouse over a link and a picture changes.

    So many reasons.
    "The best software is the one that fits your needs." - A_A

    Virus free since: date unknown
    Anti-virus free since: August 2008

  5. #5
    Join Date
    Mar 2005
    Posts
    161
    Rep Power
    0

    Default

    wouldn't this requires ajax... Since the page not reloading.
    Owned:
    >> Samsung Galaxy Note 3; LG Optimus G; Nexus 4; Samsung Galaxy Ace Duos
    << Microsoft Surface RT; Dell Venue 8; Asus Transformer

  6. #6
    Join Date
    Mar 2011
    Posts
    485
    Rep Power
    0

    Default

    Quote Originally Posted by Wallizzle View Post
    wouldn't this requires ajax... Since the page not reloading.
    Not necessarily.

    I think you can use the

    onclick="callAFunction(this)"

    in your image tag and have that function update the img src....

    edit:

    Don't forget to preload your images.
    Last edited by datdread; Feb 2, 2014 at 11:30 AM.

  7. #7
    Join Date
    Jan 2006
    Posts
    283
    Rep Power
    0

    Default

    First I'd recommend that you use jQuery or Sizzle for selecting because in production that's what you'll be using anyway. If you're using jQuery swapping the src is dead simple:

    $('#link-selector').click(function(e){
    e.preventDefault();
    $('#wrench').attr('src', 'monkey_wrench.jpg');
    });
    "Fortune Favors the Bold" -Virgil

  8. #8
    Join Date
    Aug 2002
    Posts
    6,223
    Rep Power
    0

    Default

    Can you assign the src= to a variable and then assign the variable to another image using the onClick method?
    .
    PC - Ubuntu 15.04 64bit Desktop
    HP Pav G60-236US 3GB RAM Laptop, Ubuntu 15.04 64bit and Win7 Home

    "So Daddy, how come you telling me stealing not right when YOU copying DVDs? How come? How Come?"


    RIP Ramesh ...

  9. #9
    Join Date
    Mar 2011
    Posts
    485
    Rep Power
    0

    Default

    Quote Originally Posted by ramesh View Post
    Can you assign the src= to a variable and then assign the variable to another image using the onClick method?
    Nods. I believe so.

    get
    var imgsrc = document.getElementById("myImg").src;


    set
    document.getElementById("myOtherImg").src = imgsrc;


    ...or something like that.
    Last edited by datdread; Feb 2, 2014 at 07:21 PM.

  10. #10
    Join Date
    Mar 2005
    Posts
    161
    Rep Power
    0

    Default

    Quote Originally Posted by datdread View Post
    Not necessarily.

    I think you can use the

    onclick="callAFunction(this)"

    in your image tag and have that function update the img src....

    edit:

    Don't forget to preload your images.
    Ahhh, there we go... I know something like this was required... versus just calling images randomly, you gotta put them in memory first.
    Owned:
    >> Samsung Galaxy Note 3; LG Optimus G; Nexus 4; Samsung Galaxy Ace Duos
    << Microsoft Surface RT; Dell Venue 8; Asus Transformer

Posting Permissions

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