时间戳

首页 > 解决方案 > 将鼠标悬停在不同的文本消息上时，在同一帧中显示不同的图像

javascript - 将鼠标悬停在不同的文本消息上时，在同一帧中显示不同的图像

问题描述

好吧，我很难过。我试图弄清楚如何将鼠标悬停在不同的单词上以在同一位置显示图像。因此，如果我单击比萨饼，我会看到比萨饼，但如果我单击汉堡，我会在显示比萨饼的同一帧中看到一个汉堡。这是我到目前为止所得到的。没有 jQuery。仅 JS 和 html。提前致谢。

JS

function displayImage(item) {        
  switch (item) {   
    case "pizza":
      document.getElementById(showImage).src = "pizza.jpg";     
  }
}

HTML

<h2>Main Course</h2>
  <ul>
    <li onmouseover="displayImage('pizza')">Pizza</li>
    <li></li>
  </ul>
  <div id="description">
  <iframe width="100%" height="415px" name="showImage" /></iframe>
</div>

标签： javascripthtmlcss

解决方案

您正在尝试获取元素，id但尚未id向元素添加元素。你应该使用document.getElementsByName("showImage");

如果它不起作用，那是因为您的图像不能与您的 js 文件位于同一文件夹中。下面的例子有效。我只是替换为在线图像。

function displayImage(item) {        
  switch (item) {   
    case "pizza":
      document.getElementById("showImage").src = "https://images.unsplash.com/photo-1496518908709-02b67989c265?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80";     
  }
}
<h2>Main Course</h2>
<ul>
  <li onmouseover="displayImage('pizza')">Pizza</li>
  <li></li>
</ul>
 <div id="description">
  <iframe width="100%" height="415px" id="showImage" /></iframe>
</div>

推荐阅读