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>";
}-
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
2 Answers
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'>