a href link clicked and div displays image

Question

I would like a javascript method to display image in div depending on which a href link is clicked. enter image description here

I have written some code but it needs developing further.

<script type="  ">
function changeImg(){
    var image1 = new Image();
    image1.src='car.png'
    var imghol = document.getElementById("imageHolder");
    var elements = document.getElementById("FS");
    if(elements.onclick = function()){
        imghol = image1;
    }
</script>

<div class="ADS2"><h2>Vehicle Part</h2><p>Please select a part you wish to find;
<div class="vertical_menu">
<ul>
<li><a id="FS" href="#home" onclick="changeImg">Front Side</a></li>
<li><a id="RS" href="#news">Rear Side</a></li>
<li><a id="S" href="#contact">Side</a></li>
<li><a id="US"href="#about">Under Side</a></li>
<li><a id="I" href="#about">Interior</a></li>
</ul>
</div>
<div class="imageholder">

</div>
</div>

my question is how to display image in a div depending on which ahref link is clicked? — user1810449, Mar 23 '14 at 16:43

score 3 · Accepted Answer · answered Mar 23 '14 at 16:52

Keep it simple. Try this:

<script type="text/javascript">
function changeImg(image){
  var imghol = document.getElementById("imageHolder");
  imghol.src = image;
}
</script>

<div class="ADS2">
    <h2>Vehicle Part</h2>
    <p>Please select a part you wish to find;</p>
    <div class="vertical_menu">
        <ul>
            <li><a id="FS" href="javascript:" onclick="changeImg('car.jpg');">Front Side</a></li>
            <li><a id="RS" href="javascript:" onclick="changeImg('rear.png')">Rear Side</a></li>
            <li><a id="S" href="javascript:" onclick="changeImg('caside.png')">Side</a></li>
            <li><a id="US" href="javascript:" onclick="changeImg('under.png')">Under Side</a></li>
            <li><a id="I" href="javascript:" onclick="changeImg('interior.png')">Interior</a></li>
        </ul>
    </div>
    <div class="imageholder"><img id="imageHolder" /></div>
</div>

It does provide the desired result. I understand I was over complicating the code. rOOKIE attempts Thanks for providing a better workable solution. — user1810449, Mar 23 '14 at 17:04
@user1810449 Most of the time, keeping it simple works the best. — Racil Hilan, Mar 23 '14 at 17:07

score 0 · Answer 2 · answered Mar 23 '14 at 16:41

0

use this

HTML

<a onclick="changeImg('pic1.png')">Link 1</a>
<a onclick="changeImg('pic2.png')">Link 2</a>
<a onclick="changeImg('pic3.png')">Link 3</a>
<a onclick="changeImg('pic4.png')">Link 4</a>
.....
<div class="imageholder">
<img id="change_img_target" />
</div>

Javascript

function changeImg(url) {
    document.getElementById("change_img_target").src = url;
}

answered Mar 23 '14 at 16:41

Aister

359
1
6

@user1810449 did you remember to change the pic1.png and all those things? Are you sure the link to the images are correctly? – Aister Mar 23 '14 at 17:05

score 0 · Answer 3 · answered Mar 23 '14 at 16:51

You can also achieve this with jQuery. Be sure to include the jQuery library in your file. :)

HTML:

<a href="#" onclick="return changeImg('pic1.png')">Link 1</a>
<a href="#" onclick="return changeImg('pic2.png')">Link 2</a>

<div id="div">

</div>

jQuery (add this to the bottom of your page):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        function changeImg(url) {
            var image = "<img src='url' />";
            $("#div").html(image);
        }
    });
</script>

score 0 · Answer 4 · edited May 23 '17 at 10:30

@ Naveen,

You can achieve the solution using any of the following 2 answers.

Ans1:

<script type="text/javascript">
  function preloader()
  {
      var imgs = ['chart1.jpg','chart2.jpg','chart3.jpg','chart4.jpg','chart5.jpg']; // take array of images

      var container = document.getElementById('photos');

      var docFrag = document.createDocumentFragment();

      imgs.forEach(function(url, index, originalArray) {
          var img = document.createElement('img');

          img.src = url;

          docFragenter code here.appendChild(img);
      });

      container.appendChild(docFrag);
  }
</script>

<body onload="preloader();">
  <div>
    <table width="100%" style="height: 100%;" border="0">
      <tr>
        <td>
          <p id="photos" onclick="preloader()" />
        </td>
      </tr>
    </table>`
  </div>

Ans2:

function preloader()
{
    var imgs=['chart1.jpg','chart2.jpg','chart3.jpg','chart4.jpg','chart5.jpg'];

    var container = document.getElementById('photos');

    for (var i = 0, j = imgs.length; i < j; i++) {
        var img = document.createElement('img');

        img.src = imgs[i]; // img[i] refers to the current URL.

        container.appendChild(img);
    }
}

Link for more Help:

How to add a list of images to the document from an array of URLs?

a href link clicked and div displays image

4 Answers4