CODEWITHSUNDEEP
javascripthtmlcss
Hugh O Dwyer
Hugh O Dwyer

Reputation: 11

How to display an alert on mouseover events

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>";

}

Upvotes: 0

Views: 13088

Answers (2)

Tom O.
Tom O.

Reputation: 5941

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.net/uploads/photos/file/117262/michae-scott-quotes-5.jpg?auto=compress&crop=top&fit=clip&h=500&q=55&w=698' height='100' width='140'>

Upvotes: 2

Rajez
Rajez

Reputation: 4067

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

</script>

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

</body>
</html>

Is this you want?

Upvotes: 3

Related Questions