I am currently developing a dynamic game utilizing HTML, CSS, and jQuery. In the lower right corner of the screen, there is a question mark (which is an image file, not text). My objective is to display a help box when the question mark is clicked and held down. The box should disappear once the mouse is released. There are three distinct help boxes for each of the three pages.
The question mark image functions as the help button
.help-box represents all the help boxes across different pages: .growing-plants, .label-flower, and .types-animal.
This is my code:script.js file:
$('#help').mousedown(function() {
if (currentSection == 1) {
$('.growing-plants').removeClass("hidden");
} else if (currentSection == 2) {
$('.label-flower').removeClass("hidden");
} else if (currentSection == 3) {
$('.types-animal').removeClass("hidden");
}
});
$('#help').mouseup(function() {
if (currentSection == 1) {
$('.growing-plants').addClass("hidden");
} else if (currentSection == 2) {
$('.label-flower').addClass("hidden");
} else if (currentSection == 3) {
$('.types-animal').addClass("hidden");
}
});
style.css file:
#help {
position: absolute;
left:900px;
}
.help-box {
position: absolute;
top: 200px;
left: 220px;
z-index: 15;
}
.growing-plants {
overflow: hidden;
}
.label-flower {
overflow: hidden;
}
.types-animal {
overflow: hidden;
}
html file:
<img src="images/help-growing-plants.png" class="help-box growing-plants" alt="help" width="600" height="400">
<img src="images/help-label-flower.png" class="help-box label-flower" alt="help" width="600" height="400">
<img src="images/help-types-animal.png" class="help-box label-flower" alt="help" width="600" height="400">
Any assistance or recommendations would be greatly appreciated!!!!