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,796
    Rep Power
    0

    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.
    CLICK-> Online Gamer Tags ** Job - Business Applications Associate ** CLICK-> Lenovo P580 ||Surface Pro 4 128GB || DESKTOP-> IF THE TRUTH HURTS CLOSE THE THREAD
    If being a nerd means I make more money than you by just walking into a room, while still having a wife and social life... then it SUCKS To Be YOU !

  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
    610
    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)

  4. #4
    Join Date
    Apr 2003
    Posts
    13,097
    Rep Power
    28

    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 2009

  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
    464
    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 10:30 AM.

  7. #7
    Join Date
    Jan 2006
    Posts
    262
    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,207
    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?"


    Changes to posting in Classifieds

  9. #9
    Join Date
    Mar 2011
    Posts
    464
    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 06: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
  •