javascript - 将鼠标悬停在不同的文本消息上时，在同一帧中显示不同的图像(Display different images in same frame when hovering over different text messages)

Question

Ok I'm stumped.(好吧，我很困惑。)

Im trying to figure out how to hover over different words to show an image in the same location.(我试图弄清楚如何将鼠标悬停在不同的单词上以在同一位置显示图像。) So if I click pizza I'll see a pizza but if I click burger I'll see a burger in the same frame the pizza was displayed.(因此，如果我单击“比萨饼”，我将看到一个比萨饼，但是如果我单击“汉堡”，我将在同一帧中看到一个汉堡，显示比萨饼。) Heres what I got so far.(这是我到目前为止所得到的。) No JQuery.(没有JQuery。) Solely JS and html.(仅有JS和html。) Thanks in advance.(提前致谢。) JS(JS) function displayImage(item) { switch (item) { case "pizza": document.getElementById(showImage).src = "pizza.jpg"; } } HTML(的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>   ask by Tahar Khan translate from so

Answer 1

You're trying to get an element by id but you haven't add an id to your element.(您正在尝试通过id获取元素，但尚未向其元素添加id 。)

You should use document.getElementsByName("showImage");(您应该使用document.getElementsByName("showImage");) If it doesn't work it is because your image must not be in the same folder as your js file.(如果它不起作用，那是因为您的图像不得与js文件位于同一文件夹中。) The below example works.(以下示例有效。) I just replaced with an online image.(我只是替换为在线图像。) 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>