尝试将文本和图像添加到 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.&nbsp;例如：gettip(`This 'string' can include "quotes"`)对于您的情况：onmouseover="gettip(`<img&nbsp;src='Images/homeworkpreview.jpg'><br><br><b>Due:</b>&nbsp;January&nbsp;27&nbsp;<br>&nbsp;<b>Points:</b>&nbsp;50&nbsp;<br>&nbsp;<br>&nbsp;<b>&nbsp;Description:&nbsp;</b>&nbsp;<br>&nbsp;Create&nbsp;a&nbsp;Homework&nbsp;page&nbsp;with&nbsp;a&nbsp;table&nbsp;with&nbsp;information&nbsp;about&nbsp;the&nbsp;projects&nbsp;for&nbsp;this&nbsp;semester.&nbsp;This&nbsp;will&nbsp;act&nbsp;as&nbsp;the&nbsp;hub&nbsp;for&nbsp;all&nbsp;of&nbsp;your&nbsp;projects&nbsp;to&nbsp;be&nbsp;linked&nbsp;to.`)"注意：这适用于约 95% 的用户。如果您需要更多报道，您可以按照此处的其他答案指示转义引号。

Answer 2

转义单引号后，您需要一些带有 id 的元素info，例如：function gettip(txt) {&nbsp; document.getElementById("info").innerHTML = txt;}function reset() {&nbsp; document.getElementById("info").innerHTML =&nbsp; &nbsp; "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.')"&nbsp; onmouseout="reset()">&nbsp; &nbsp; &nbsp; Homework&nbsp; &nbsp; </a><div id="info"></div>