正在尝试将文本和图像添加到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

您可以使用backticks(`(，这将允许您在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>