Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Daniel Halén
Daniel Halén
608 Points

javascript change source to image

I want when click on a image the source should change to that image. if i click on another image the source should be updated.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <!-- Css -->
        <style>


        img
            {
                width: 100px;
                height: 90px;
                border-radius: 10px;
                border-style: inset;
                }
            td {
                position: relative;
            }

    .select::before {
                content: "";
                display: block;
                width: 100px;
                height: 90px;
                position: absolute;
                top:26px ;
                left: 35px;
                background-color: rgba(255, 53, 53,1);
                opacity: 0.1;
                z-index: 99;
                border-radius: 10px;
                border-style:inset;
            }




        img:hover
            {
                border-color:yellow;
            }
        th
            {   
                font-size: 2em;
                background-color: #f9ddff;
            }
        body
            {   
                font-family: san-serif;
                font-size: 1em;
                text-align: center;
                background-color: slateblue;
            }
        table
            {   
                background-color: white;
                width: 69%;
            }
        td
            {   
                padding: 25px;
            }
            <!-- End css -->
        </style>
    </head>
    <body>
        <table  align="center">

            <tr>
                <td><a href="#" target="_self"><img src="http://placehold.it/100x90"></a></td>
                <td><a href="#" target="_self"><img src="http://placehold.it/100x90"></a></td>
                <td><a href="#" target="_self"><img src="http://placehold.it/100x90"></a></td>
                <td><a href="#" target="_self"><img src="http://placehold.it/100x90"></a></td>
                <td><a href="#" target="_self"><img src="http://placehold.it/100x90"></a></td>

            </tr>

            <tr>
                <td><a href="#" target="_self"><img src="http://placehold.it/100x90"></a></td>
                <td><a href="#" target="_self"><img src="http://placehold.it/100x90"></a></td>
                <td><a href="#" target="_self"><img src="http://placehold.it/100x90"></a></td>
                <td><a href="#" target="_self"><img src="http://placehold.it/100x90"></a></td>
                <td><a href="#" target="_self"><img src="http://placehold.it/100x90"></a></td>
            </tr>   
        </table>    

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <script>
            $(document).ready(function() {
                $('td').click(function() {
                    $('td').removeClass('select');

                    $(this).addClass('select');


                });
            });
        </script>

    </body>


</html>
Daniel Halén
Daniel Halén
608 Points

this source show be updated with a new image when press on a image:

 <img src="/application/modules/forum/images/avatars/default.jpg">

4 Answers

Sergey Podgornyy
Sergey Podgornyy
20,660 Points
Sergey Podgornyy
Sergey Podgornyy
20,660 Points

try this code:

       $(document).ready(function() {
        $('td').click(function() {
          var $imageElement = $('img', this).eq(0);
          $imageElement.attr('data-old', $imageElement.attr('src'));

          // return old image source for other images
          $('td img').each(function(index, elem) {
            $(elem).attr('src', $(elem).attr('data-old'));
          });

          // set new source
          $imageElement.attr('src', 'http://placehold.it/100x100');
        });
      });

Hope it could be useful for you

Daniel Halén
Daniel Halén
608 Points
Daniel Halén
Daniel Halén
608 Points

if i want placeholder.it image to be diffrent. how can i add source as image1, image2 etc?

$imageElement.attr('src', 'http://placehold.it/100x100');
Sergey Podgornyy
Sergey Podgornyy
20,660 Points

I do not understand how you want to change image sources... Where data should come from? I just hardcoded 'http://placehold.it/100x100' and return old path for other images

Daniel Halén
Daniel Halén
608 Points
Daniel Halén
Daniel Halén
608 Points

Now i have like this:

<tr>
                <td><a href="#" target="_self"><img src="http://placehold.it/100x90"></a></td>
                <td><a href="#" target="_self"><img src="http://placehold.it/100x90"></a></td>
                <td><a href="#" target="_self"><img src="http://placehold.it/100x90"></a></td>
                <td><a href="#" target="_self"><img src="http://placehold.it/100x90"></a></td>
                <td><a href="#" target="_self"><img src="http://placehold.it/100x90"></a></td>

            </tr>

but if i want like this:

<tr>
                <td><a href="#" target="_self"><img src="http://placehold.it/image1></a></td>
                <td><a href="#" target="_self"><img src="http://placehold.it/image2"></a></td>
                <td><a href="#" target="_self"><img src="http://placehold.it/image3"></a></td>
                <td><a href="#" target="_self"><img src="http://placehold.it/image4"></a></td>
                <td><a href="#" target="_self"><img src="http://placehold.it/image5"></a></td>

            </tr>

<tr>
                <td><a href="#" target="_self"><img src="http://placehold.it/image6></a></td>
                <td><a href="#" target="_self"><img src="http://placehold.it/image7"></a></td>
                <td><a href="#" target="_self"><img src="http://placehold.it/image8"></a></td>
                <td><a href="#" target="_self"><img src="http://placehold.it/image9"></a></td>
                <td><a href="#" target="_self"><img src="http://placehold.it/image10"></a></td>

            </tr>

with 10 diffrent pictures. if i press one image old source should change to that new one i pressed on.

Daniel Halén
Daniel Halén
608 Points
Daniel Halén
Daniel Halén
608 Points

I still need help change the source per image.