How to load a new image on click?

Question

I have a <div> tag which contains an <ul> with three <li>s with an <a> in each of them. I have another <div> tag which contains one default image.

$(document).ready(function() {
  $(".vas").click(function() {
    $("#banner div").hide();
    $("#vas").show();
  });
  $(".anb").click(function() {
    $("#banner div").hide();
    $("#anb").show();
  });
  $(".tam").click(function() {
    $("#banner div").hide();
    $("#tam").show();
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
  <img src="../images/nagam1.png">
  <ul>
    <li><a href="#" class="vas" id="vas" name="vas" onclick="getId(this.id)">Vasantha</a></li>
    <li><a href="#" class="anb" id="anb" name="anb" onclick="getId(this.id)">Anbalagan</a></li>
    <li><a href="#" class="tam" id="tam" name="tam" onclick="getId(this.id)">Tamilmani</a></li>
  </ul>
</div>
<div id="banner">
  <img src="../images/family.jpg">
</div>

When clicking every link, how can I make the corresponding image load in <div id="banner">, i.e. hiding the last image and loading the new corresponding image in it?

Where’s your `getId` function? This is trivial with jQuery: select the image and set a new `src`. What’s the relevance of the picture you included in your post? Inline event handlers like `onclick` are [not recommended](https://stackoverflow.com/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](https://stackoverflow.com/a/43459991/4642212) way of registering events. Always [use `addEventListener`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_—_dont_use_these) or jQuery’s [`.on`](https://api.jquery.com/on/). — Sebastian Simon, Oct 20 '20 at 05:26
@user4642212 According to MDN (developer.mozilla.org/en-US/docs/Web/Guide/HTML/…) event attributes should be avoided. But, I couldn't find anything about them being deprecated. I do however agree addEventListener is better because you can attach multiple events to an element without a lot of nesting — Jonny, Oct 20 '20 at 05:37
@Jonny I didn’t say “deprecated”. They’re “obsolete” in the sense that they’re superseded (or “obsoleted”) by the newer event mechanisms. If you know a better word, I’d love to hear your suggestion. Maybe rephrasing my canned comment to use the word “superseded” is a good start. — Sebastian Simon, Oct 20 '20 at 05:44
@user4642212 no your right I was just pointing out that it is a preferred method not to use Inline event handlers like onclick, but not depreciated or necessarily wrong to do so. The user is new and I was trying to explain how you are more confined using inline methods that is the main reason they aren't preferred — Jonny, Oct 20 '20 at 05:53

score 2 · Answer 1 · answered Oct 20 '20 at 05:33

You could do something like this:

$(document).ready(function () {

    $('.nav-img-click').on('click', function(event){
        event.preventDefault();
        
        // on click hide all data-js-images inside #banner div
        $('#banner [data-js-img]').hide(); 
        
        // show the one which maches the "name" 
        $('#banner img[data-js-img="' + $(this).attr('name') + '"').show(); 
    });
})

[data-js-img] {
  display: none; /* hide all images which have data-js-img */
}

[data-js-img="default"] {
  display: inline-block; /* but show the data-js-img=DEFAULT */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">

      <img src="https://picsum.photos/200/30">

        <ul>

          <li><a href="#" class="nav-img-click" name="vas">Vasantha</a></li>

          <li><a href="#" class="nav-img-click" name="anb">Anbalagan</a></li>

          <li><a href="#" class="nav-img-click" name="tam">Tamilmani</a></li>

       </ul>

  </div>

  <div id="banner">

       <img data-js-img="default" src="https://picsum.photos/200">
       
       <img data-js-img="tam" src="https://loremflickr.com/320/240/dog">
       <img data-js-img="anb" src="https://loremflickr.com/g/320/240/paris">
       <img data-js-img="vas" src="https://loremflickr.com/320/240/brazil,rio">

  </div>

hello caramba, THANK YOU VERY MUCH it is working exact what I need, I implemented and worked out, EXCELLENT JOB. and I need your help till finish this web page. I inspect your code on you page and implemented as your html and css thanks again. and please keep in touch. see you again. --Ramanan — Ramanan Nathamuni, Oct 20 '20 at 06:27

nima ansari · Answer 2 · 2020-10-20T06:31:24.810

1

You can do like this :

Html:

    <div id="header">
        <img src="../images/nagam1.png">
          <ul id="imageLinks">
            <li><a href="#" id="Image-1">Vasantha</a></li>
            <li><a href="#" id="Image-2">Anbalagan</a></li>
            <li><a href="#" id="Image-3">Tamilmani</a></li>
         </ul>
    </div>
    <div>
         <img id="myBanner" src="Image-1.jpg">
    </div>

Script:

    <script>
        $(document).ready(function () {
            $("#imageLinks a").click(function () {
                $("#myBanner").attr("src",this.id+".jpg");;
            });
        });
    </script>

edited Oct 20 '20 at 06:31

answered Oct 20 '20 at 05:32

nima ansari

434
9
19

Why not simply `$("#banner img")`? The ID is right there on the `
`.
– Sebastian Simon Oct 20 '20 at 05:33
@user4642212 yeah, this is an approach too. – nima ansari Oct 20 '20 at 05:48
Please **explain** *what* and *why* you did it this way. – Roy Oct 20 '20 at 06:17
I prefer specificity in my code. for example consider your name is X, and you are in a room called Y, and your room is inside a house called Z, when I want to call you, I simply say :"X come on", not "X in Y in Z, come on!". and what happen if you go to a room called U? I should change my naming! @Roy – nima ansari Oct 20 '20 at 06:29
Even if you prefer specificity in your code, someone who asks a question here might not understand what's going on. Therefore adding an explanation what you did and why you did it will give him/her guidelines to look for (in the future). – Roy Oct 20 '20 at 06:35
If your first comment is about the first comment that "user4642212" asked, that was my explanation. but if it was about my answer to "Ramanan Nathamuni", yes you are right. @Roy – nima ansari Oct 20 '20 at 06:43
@nimaansari _“I should change my naming”_ — sounds like a good reason _not_ to give IDs to every single element. It’s not generalizable. – Sebastian Simon Oct 20 '20 at 06:46

score 1 · Accepted Answer · answered Oct 20 '20 at 06:15

Html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
   <div class="logo">LOGO</div>
   <ul class="nav">
      <li><a href="javascript:;" class="vas" id="vas" name="vas">Vasantha</a></li>
      <li><a href="javascript:;" class="anb" id="anb" name="anb">Anbalagan</a></li>
      <li><a href="javascript:;" class="tam" id="tam" name="tam">Tamilmani</a></li>
   </ul>
</div>
<div id="banner">
   <img class="banner-img" src="https://images.pexels.com/photos/4098987/pexels-photo-4098987.jpeg?cs=srgb&dl=pexels-taryn-elliott-4098987.jpg&fm=jpg">
</div>

Css

ul,
li {
   list-style: none;
}
a {
   text-decoration: none;
}

#header {
   display: flex;
   align-items: center;
   height: 40px;
}

#header .logo {
   width: 100px;
   height: 100%;
   text-align: center;
   line-height: 40px;
   background: pink;
}

#header .nav {
   display: flex;
   height: 100%;
   justify-content: center;
}

.nav li {
   width: 100px;
   height: 100%;
   text-align: center;
   line-height: 40px;
}
.nav a {
   color: #000;
}

.nav a:hover {
   color: #ccc;
}

.banner-img {
   width: 1000px;
}

Javascript

$(document).ready(function () {
   const imgUrls = {
      vas:
         "https://images.pexels.com/photos/1596564/pexels-photo-1596564.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
      anb:
         "https://images.pexels.com/photos/316776/pexels-photo-316776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
      tam:
         "https://images.pexels.com/photos/3045635/pexels-photo-3045635.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
   };
   const navItems = $(".nav li");
   const imgBox = $(".banner-img")[0];
   navItems.on("click", function (el) {
      imgBox.src = imgUrls[el.target.id];
   });
});

codepen.io

YES evild, good, your answer is fulfilled my requirement, I implemented already with another fried caramba the above answer. THANKS for your response. keen in touch — Ramanan Nathamuni, Oct 20 '20 at 07:24

How to load a new image on click?

3 Answers3