When a hyperlink is clicked, an image appears in the div

Question

When a hyperlink is clicked, an image appears in the div

Can someone help me with a javascript method that can display an image in a div based on which href link is clicked?

I've started writing some code, but I think it needs further development.

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

javascript html css image

Answer 1

Answer №1

Keep it simple and efficient with the following code:

<script type="text/javascript">
function swapImage(img){
  var placeholder = document.getElementById("imageHolder");
  placeholder.src = img;
}
</script>

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

Answer 2

Keep it simple and efficient with the following code:

<script type="text/javascript">
function swapImage(img){
  var placeholder = document.getElementById("imageHolder");
  placeholder.src = img;
}
</script>

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

Answer 3

Answer №2

utilize the following

XHTML

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

ECMAScript

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

Answer 4

utilize the following

XHTML

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

ECMAScript

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

Answer 5

Answer №3

If you prefer, you can also use jQuery to accomplish this task. Just remember to include the jQuery library in your project. :)

Here is an example of how you can achieve this:

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

<div id="div">

</div>

Simply add the following jQuery code at the end of your HTML file:

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

Answer 6

If you prefer, you can also use jQuery to accomplish this task. Just remember to include the jQuery library in your project. :)

Here is an example of how you can achieve this:

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

<div id="div">

</div>

Simply add the following jQuery code at the end of your HTML file:

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

Answer 7

Answer №4

@ Naveen,

If you're looking for a solution, you have two options to choose from:

Solution 1:

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

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

      var docFrag = document.createDocumentFragment();

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

          img.src = url;

          docFrag.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>

Solution 2:

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];

        container.appendChild(img);
    }
}

For more assistance, check out this helpful link:

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

Answer 8

@ Naveen,

If you're looking for a solution, you have two options to choose from:

Solution 1:

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

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

      var docFrag = document.createDocumentFragment();

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

          img.src = url;

          docFrag.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>

Solution 2:

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];

        container.appendChild(img);
    }
}

For more assistance, check out this helpful link:

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

When a hyperlink is clicked, an image appears in the div

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

I'm looking to create a JavaScript function that will extract each element from a div and then apply a corresponding CSS block to activate it

`Incompatibility issue between HTML, CSS and Chrome browser`

Recording the descending data points (excluding the dragged positions) from the bootstrap slider

When you add new objects to VueJS Store, they are simply substituted for the existing objects

Creating a responsive layout that sets the window height to 100% and automatically adjusts sibling divs when the content within parent divs exceeds the defined height

What is the best way to update a specific value in an object without affecting the rest of

Only one submenu can be opened at a time & click to close

I'm looking to develop a custom CKEditor plug-in that will allow users to easily drag and drop elements within the editor interface

How to utilize PHP $_SESSION variables with jQuery for error handling and page redirections

The list retrieved via ajax appears to be void of any elements, despite the array size being accurately reflected

What is the best way to refresh a React ES6 component following an AJAX response?

Achieving CSS transition effects using the .appendChild function in JavaScript

Sticky sidebar following a complete-page header

Displaying incorrect text format on a TextView using Html.fromHtml()

Flexbox that adjusts to any browser height, ensuring full responsiveness

Creating a dropdown feature for menu items in Vue when the number or width of items exceeds the menu bar's limits

What is the best way to update the state of a particular slider component?

Modify URL parameters using history.pushState()

Changing the border color of an HTML input is easy with these simple steps:

How can I retrieve the HEX code of a color from an image when hovering or clicking?