admin 管理员组

文章数量: 1086019

Currently, have functionality whereby mouseover will change the div to red upon placing the mouse over. I would like to change this to have an alert pop up instead, which displays the text held within the div.

I have tried calling a function to call the alert 

<img onmouseover='getAlert(this)' class='calPicSmile' src= 'img/" + calImg + ".png' height= '20' width= '20'>

as well as 

document.getElementsByClassName("calPicSmile").onmouseover = function() {getAlert()};
function getAlert(){
  alert('test');
}


if (counter == day && month == curMonth && year == curYear) {

  htmlContent += "<td class='dayNow alert' id='" + counter + monthIDName + "'  onMouseOver='this.style.background=\"#FF0000\"; this.style.color=\"#FFFFFF\"' " + "onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#FF0000\"'>" + counter + "<img class='calPicSmile' src= 'img/" + calImg + ".png' height= '20' width= '20'>" + "</td>";

} else {

  htmlContent += "<td class='monthNow alert' id='" + counter + monthIDName + "' onMouseOver='this.style.background=\"#FF0000\"'" + " onMouseOut='this.style.background=\"#FFFFFF\"'>" + counter + "<img class='calPicSmile' src= 'img/" + calImg + ".png' height= '20' width= '20'>" + "</td>";

}

Currently, have functionality whereby mouseover will change the div to red upon placing the mouse over. I would like to change this to have an alert pop up instead, which displays the text held within the div.

I have tried calling a function to call the alert 

<img onmouseover='getAlert(this)' class='calPicSmile' src= 'img/" + calImg + ".png' height= '20' width= '20'>

as well as 

document.getElementsByClassName("calPicSmile").onmouseover = function() {getAlert()};
function getAlert(){
  alert('test');
}


if (counter == day && month == curMonth && year == curYear) {

  htmlContent += "<td class='dayNow alert' id='" + counter + monthIDName + "'  onMouseOver='this.style.background=\"#FF0000\"; this.style.color=\"#FFFFFF\"' " + "onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#FF0000\"'>" + counter + "<img class='calPicSmile' src= 'img/" + calImg + ".png' height= '20' width= '20'>" + "</td>";

} else {

  htmlContent += "<td class='monthNow alert' id='" + counter + monthIDName + "' onMouseOver='this.style.background=\"#FF0000\"'" + " onMouseOut='this.style.background=\"#FFFFFF\"'>" + counter + "<img class='calPicSmile' src= 'img/" + calImg + ".png' height= '20' width= '20'>" + "</td>";

}

  • javascript
  • html
  • css
Share Improve this question edited Aug 22, 2017 at 17:03 Ivan 40.9k8 gold badges73 silver badges117 bronze badges asked Aug 22, 2017 at 16:33 Hugh O DwyerHugh O Dwyer 111 gold badge1 silver badge9 bronze badges 3
  • There's an error in your code. It doesnt work at all. You should fix it then we can help with your question."Uncaught ReferenceError: counter is not defined" – Tom O. Commented Aug 22, 2017 at 16:37
  • it does work, but I didnt want to supply the entire code. Will update now – Hugh O Dwyer Commented Aug 22, 2017 at 16:39
  • why don't you update your code at jsbin – Ashish sah Commented Aug 22, 2017 at 16:44
Add a ment  | 

2 Answers 2

Reset to default 3 

<html>
<body>
<script>
function Alert(e){
 alert(e.target.innerText);
};

</script>

<div onmouseover="Alert(event)">Hover Me</div>

</body>
</html>

Is this you want?

Without you having to post full code, are you trying to achieve something like this?

function getAlert(image) {
  alert('Here\'s an alert!')
}
<img onmouseover='getAlert(this)' class='calPicSmile' src='https://images-production.global.ssl.fastly/uploads/photos/file/117262/michae-scott-quotes-5.jpg?auto=press&crop=top&fit=clip&h=500&q=55&w=698' height='100' width='140'>

本文标签： javascriptHow to display an alert on mouseover eventsStack Overflow

版权声明：本文标题：javascript - How to display an alert on mouseover events - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744070057a2528321.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。