Javascript - Changing an image with variables

Question

I'm trying to create a slide show but I'm having some difficulty. I've googled the problem and read loads of pages but I still can't get it to work. I'm doing this all in my header, then the header.php will be included on whichever page. I've tried setting the source to a string containing the location, creating an image before and then setting it to that image's source, and just trying odd things trying to get it to work.

The strange thing is when I call the updateSlider() function, the source of my image is null even though I can see it on the screen, and afterwards when I set it, it says there is a source but the image is the same.

But at the moment I'm just trying to change the image when I click a button and then I'm going to try and make the slide show. Here is the header.php code, you can see some of the different things I've tried in it:

<!DOCTYPE html>
<html>

   <head>
      <style type="text/css" media="all">@import "./includes/layout.css";</style>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">          
      </script>

      <script>
         var slideImages = new Array("includes/images/mmSlideImage1.png",    
            "includes/images/mmSlideImage2.png", "includes/images/mmSlideImage3.png");

        var slideImage = newImage();
        slideImage.src = slideImages[0];

        pic = document.createElement("img");
        pic.setAttribute("src", "includes/images/mmSlideImage2.png");
        pic.setAttribute("alt", "No Image");

        var url2 = "includes/images/mmSlideImage2.png";
        var img2 = new Image();
        img2.src = url2;

        function updateSlider() {
            console.log(document.getElementById("ht").getAttribute("src"));
            document.getElementById("ht").setAttribute("src", img2.src);
            console.log(document.getElementById("ht").getAttribute("src"));
        }
    </script>

</head>
    <body>
        <a href="index.html" class="logo" id="ht"> <img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" /></a>

        <button type="button" onclick="updateSlider()">Update Slider</button>

        <div id="nav">
            <a href=index.php class="navBarLink">Home</a>
            <a href=about.php class="navBarLink">About</a>
            <a href=gallery.php class="navBarLink">Gallery</a>   
            <a href=programs.php class="navBarLink">Programs</a>    
        </div>

Thank you in advance for any help!

==================================================================================

UPDATED CODE:

<!DOCTYPE html>
<html>

   <head>
      <style type="text/css" media="all">@import "./includes/layout.css";</style>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
      </script>

      <script>
         var url2 = "includes/images/mmSlideImage2.png";

         function updateSlider()  {
             console.log(document.getElementById("ht").getAttribute("src"));
             $('ht').attr('src', url2);
             console.log(document.getElementById("ht").getAttribute("src"));
         }
      </script>

   </head>
   <body>
        <a href="index.html" class="logo" id="ht"> <img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" /></a>

        <button type="button" onclick="updateSlider()">Update Slider</button>

On your updated code... you're missing the closing sign for jQuery's script tag. — André Leria
– André Leria, Commented Nov 17, 2013 at 12:15

André Leria · Accepted Answer · 2013-11-17 12:20:30Z

1

Simple. You're trying to give an anchor a image attribute. Give your img an id and fix it in the Javascript. For example, if you give it an "currentSlideImage" id:

$('#currentSlideImage').attr('src', url2);

BTW, I'd suggest you take a read on Unobstrusive Javascript.

answered Nov 17, 2013 at 12:20

André Leria

3923 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ali Sarfaraz · Accepted Answer · 2013-11-17 11:55:20Z

0

i am not sure why are you using new image when you are just changing src of an image tag.

the easiest way is to use jquery code

$('#imgTagID').attr('src', url2);

or in javascript

document.getElementById("imgTagID").src = url2;

answered Nov 17, 2013 at 11:55

Ali Sarfaraz

804 bronze badges

2 Comments

user1009573 Over a year ago

I just tried both the examples you recommended and I still can't get it to work. The console output I have is returning null both times as well. I removed some of the code to make it simpler and updated my post with one of your recommendations to show what I did.

Ali Sarfaraz Over a year ago

try the example above i stated some mins ago its working fine on my side

Ali Sarfaraz · Accepted Answer · 2013-11-17 22:20:41Z

Here you go you were just missing id Tag inside jquery i just tried it with online images

<!DOCTYPE html>
<html>

<head>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script>
var url2 = "http://www.thinkstockphotos.com.au/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg";

function updateSlider()  {
    //console.log(document.getElementById("ht").getAttribute("src"));
    $('#ht').attr('src', url2);
    //console.log(document.getElementById("ht").getAttribute("src"));
}
</script>

</head>
<body>
<a href="index.html" class="logo" > <img id="ht" src="http://www.nasa.gov/sites/default/files/images/743348main_Timelapse_Sun_4k.jpg" alt="Logo" width="970" height="278" /></a>

<button type="button" onclick="updateSlider()">Update Slider</button>
</body>
</html>

Collectives™ on Stack Overflow

Javascript - Changing an image with variables

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related