Question

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

{{1}}

Answer 1

您可以将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>

Answer 2

我认为您希望在任何链接上发生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代码移到一个单独的文件中只是为了让事情更清楚。

Answer 3

这是一个工作片段。没有jquery，没有css，只有vanilla js。请看看它是否适合您。根据列表项的内部元素中的href属性更新框背景图像。可以根据需要调整背景位置，重复和其他属性。

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: