Question

我想要一个javascript方法来显示div中的图像，具体取决于点击的href链接。 enter image description here

我已经编写了一些代码但需要进一步开发。

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

Answer 1

保持简单。试试这个：

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

Answer 2

使用此

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

Answer 3

您也可以使用jQuery实现这一目标。一定要在文件中包含jQuery库。：）

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（将其添加到页面底部）：

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

@ Naveen，

您可以使用以下2个答案中的任何一个来实现解决方案。

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);
    }
}

获取更多帮助的链接：

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

点击一个href链接，div显示图像

4 个答案: