我想用 javascript 将图像添加到链接中答案

【问题标题】：I want to add images to the links with javascript我想用 javascript 将图像添加到链接中
【发布时间】：2018-03-21 01:22:12
【问题描述】：

当您悬停链接时（每个链接都有不同的图像），图像必须显示在 div 中。我该怎么做？我必须用javascript而不是css来做，我不想使用innerHTML。

 window.addEventListener("load",function(){
            var backG=document.getElementById("b");
            backG.style.backgroundColor="#eee";       
            var h=document.getElementById("head");
            h.style.textAlign="center";
            h.style.margin="50px";
            var x=document.getElementById("ulist");
            x.style.textAlign="center";
            var lis=x.getElementsByTagName("li");   
            for(var i=0;i<lis.length;i++){
                lis[i].style.display="inline";
            } 
            var links=x.getElementsByTagName("a");
            for(var i=0;i<links.length;i++){
                links[i].style.textDecoration="none";
                links[i].style.border="1px solid black";
                links[i].style.padding="10px";
                links[i].style.color="blue";              
            }
            var boxDiv=document.getElementById("box");
            boxDiv.style.border="1px solid blue";
            boxDiv.style.width="500px";
            boxDiv.style.height="500px";
            boxDiv.style.margin="50px 525px";
            boxDiv.style.backgroundColor="white";
            });

<h1 id="head">Move Your Mouse Over Links For Different Images</h1>
<ul id="ulist">
    <li><a href="#link">image 1</a></li>
    <li><a href="#link">image 2</a></li>
    <li><a href="#link">image 3</a></li>
    <li><a href="#link">image 4</a></li>
</ul>
<div id="box">
</div>

【问题讨论】：

所以你添加了一个鼠标悬停事件......

标签： javascript html css image web

【解决方案1】：

这是一个有效的 sn-p。没有 jquery，没有 css，只有香草 js。请看看它是否适合你。框背景图像根据列表项内部元素的href 属性进行更新。背景位置、重复等属性可以根据需要进行调整。

var boxDiv = document.getElementById("box");
boxDiv.style.border = "1px solid blue";
boxDiv.style.width = "500px";
boxDiv.style.height = "500px";
boxDiv.style.backgroundColor = "white";

var list = document.getElementsByTagName("li");

for (var i = 0; i < list.length; i++) {
  list[i].addEventListener("mouseover", function(event) {
    //console.log(event.target.href);
    href = event.target.href;
    boxDiv.style.backgroundImage = 'url(' + href + ')';
  })
}

<h1 id="head">Move Your Mouse Over Links For Different Images</h1>
<ul id="ulist">
  <li><a href="https://via.placeholder.com/350x150">image 1</a></li>
  <li><a href="https://via.placeholder.com/200x150">image 2</a></li>
  <li><a href="https://via.placeholder.com/100x150">image 3</a></li>
  <li><a href="https://via.placeholder.com/350x450">image 4</a></li>
</ul>
<div id="box">
</div>

【讨论】：

谢谢！还有一件事，我是这个主题的新手，所以...当鼠标悬停在链接上时，如何更改链接的背景颜色？
不客气。要更改背景，只需使用 css :hover 伪类。例如：li:hover {background-color:red}

【解决方案2】：

您可以将 onmouseover 事件添加到绑定到这样一个函数的每个链接。

    <ul id="ulist">
    <li><a onmouseover='showImg(this)' href="#link">image 1</a></li>
    <li><a onmouseover='showImg(this)' href="#link">image 2</a></li>
     --> etc... <--
  </ul>

  <script>
  function showImg(obj) {
     var elem = document.createElement("img");
     //create img element

     elem.src = obj.href;
     //set img src from href of link that mouse is hovering over       

     document.getElementById('#imgDiv').appendChild(elem);
     //append img element to div
   }  
  </script>

【讨论】：

【解决方案3】：

我假设您想在任何链接上发生mouseover 事件时将 div 的背景更改为图像：

window.onload = function () {
  // your code here
  var boxDiv = document.querySelector("#box");
  boxDiv.style.border="1px solid blue";
  boxDiv.style.width="500px";
  boxDiv.style.height="500px";

  var links = document.querySelectorAll("a");
  links.forEach(function (e) {

    e.addEventListener("mouseover", function (event) {
      var imageUrl = event.target.getAttribute("data");
      boxDiv.style.backgroundImage = "url(" + imageUrl + ")";
    })

  });
};

<!DOCTYPE html>
<html>
<head>
  <title>title</title>
</head>
<body id="b">
<h1 id="head">Move Your Mouse Over Links For Different Images</h1>
<ul id="ulist">
  <li><a href="#link" data="https://images.pexels.com/users/avatars/293608/oleg-magni-245.jpeg">image 1</a></li>
  <li><a href="#link" data="https://images.pexels.com/users/avatars/224453/bruce-mars-661.jpeg">image 2</a></li>
  <li><a href="#link" data="https://images.pexels.com/users/avatars/68/tim-savage-370.jpeg">image 3</a></li>
  <li><a href="#link" data="https://images.pexels.com/users/avatars/91955/rawpixel-com-856.png">image 4</a></li>
</ul>
<div id="box">
</div>
<script type="text/javascript" src="yourscript.js"></script>
</body>
</html>

我将 JavaScript 代码移到一个单独的文件中只是为了让事情更清楚。

【讨论】：