一个 href 链接点击和 div 显示图像答案

【问题标题】：a href link clicked and div displays image一个 href 链接点击和 div 显示图像
【发布时间】：2014-03-23 16:29:08
【问题描述】：

我想要一个 javascript 方法在 div 中显示图像，具体取决于单击了哪个 href 链接。

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

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

【问题讨论】：

你有什么问题？
我的问题是如何根据点击的ahref链接在div中显示图像？

标签： javascript html css image

【解决方案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>

【讨论】：

它确实提供了所需的结果。我知道我把代码复杂化了。 rOOKIE 尝试感谢提供更好可行的解决方案。
@user1810449 大多数时候，保持简单效果最好。

【解决方案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;
}

【讨论】：

@user1810449 你记得改变 pic1.png 和所有这些东西吗？您确定图片的链接正确吗？

【解决方案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>

【讨论】：

【解决方案4】：

@纳文，

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

答案1：

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

答案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]; // img[i] refers to the current URL.

        container.appendChild(img);
    }
}

【讨论】：