尝试将文本和图像添加到 onmouseover

Question

我还是一个新手，正在尝试将图像添加到项目的描述中。理论上，当用户将鼠标悬停在项目上时，旁边的列中会显示图像和描述。我知道我在使用双引号和单引号时做错了什么，但我不确定它是什么。            function gettip(txt)            {                document.getElementById('info').innerHTML=txt;            }function reset(){    document.getElementById('info').innerHTML="Roll over a link for information on the project! "}<a href="Homework.html"                onmouseover="gettip('<img src='Images/homeworkpreview.jpg'><br><br><b>Due:</b> January 27 <br> <b>Points:</b> 50 <br> <br> <b> Description: </b> <br> Create a Homework page with a table with information about the projects for this semester. This will act as the hub for all of your projects to be linked to.')"                onmouseout="reset()"> Homework </a> 

Answer 1

您可以使用反引号 (`)，这将允许您在txt. 例如：gettip(`This 'string' can include "quotes"`)

对于您的情况：

onmouseover="gettip(`<img src='Images/homeworkpreview.jpg'><br><br><b>Due:</b> January 27 <br> <b>Points:</b> 50 <br> <br> <b> Description: </b> <br> Create a Homework page with a table with information about the projects for this semester. This will act as the hub for all of your projects to be linked to.`)"

注意：这适用于约 95% 的用户。如果您需要更多报道，您可以按照此处的其他答案指示转义引号。

Answer 2

转义单引号后，您需要一些带有 id 的元素info，例如：

function gettip(txt) {

  document.getElementById("info").innerHTML = txt;

}

function reset() {

  document.getElementById("info").innerHTML =

    "Roll over a link for information on the project! ";

}

<a href="Homework.html" onmouseover="gettip('<img src=\'Images/homeworkpreview.jpg\'><br><br><b>Due:</b> January 27 <br> <b>Points:</b> 50 <br> <br> <b> Description: </b> <br> Create a Homework page with a table with information about the projects for this semester. This will act as the hub for all of your projects to be linked to.')"

  onmouseout="reset()">

      Homework

    </a>

<div id="info"></div>