I need help with the following - I have a background image and another(small image) on top of that image, and this small image works like a button, when I click on it the background image changes to another image, also when I hover my mouse over this button, this small image should change as well. I have 3 events happening, one for switching the background image(1), one for mouse over(2) and one for mouse out(3). All that is working, but not exactly as I need. On my small button image I have text before/after, when I hover over the button the small image changes from before to after, and that makes sense, I click on it and the background image changes as well, now I need that this small button will show text in reverse - after and when I hover, change to before, but it doesn't happen, I need to connect event 2/3 with event 1, so if I change main/background image, the small button will know when to show before and when after. I have two working functions, each works separately, but I need to somehow connect them into working together:
<div class="container">
<img src="asset1.jpg" id="getImage">
<input type="image" id="image" onclick="switchimage()" onmouseover="setNewImage()" onmouseout="setFinalImage()" src="button3.png">
</div>
<script>
function switchimage() {
var Image_Id = document.getElementById('getImage');
if (Image_Id.src.match("asset1.jpg")) {
Image_Id.src = "asset2.jpg";
}
else {
Image_Id.src = "asset1.jpg";
}
}
function setNewImage()
{
document.getElementById('image').src ="button4.png";
}
function setFinalImage()
{
document.getElementById('image').src ="button3.png";
}
</script>
So without all the information, I think this is close to what you mean to do:
var asset1img = "https://picsum.photos/id/1000/300/100"
var asset2img = "https://picsum.photos/id/1001/300/100"
var button3img = "https://picsum.photos/id/1003/40/40"
var button4img = "https://picsum.photos/id/1004/40/40"
function switchImage(clickEvent) {
var span = document.getElementById(clickEvent.target.dataset.targetTxtId);
span.textContent = (span.textContent === "Before" ? "retfA" : "Before");
var img = document.getElementById(clickEvent.target.dataset.targetImgId);
img.src = (img.src === asset1img ? asset2img : asset1img);
}
function setButtonImage(mouseEvent) {
var button = mouseEvent.target;
button.src = (button.src === button3img ? button4img : button3img);
}.container {
position: relative;
}
.container #buttonContainer {
position: absolute;
top: 20px;
left: 20px;
height: 100%;
}
.container #buttonContainer input {
vertical-align: middle;
}<div class="container">
<img src="https://picsum.photos/id/1000/300/100" id="imgImage1">
<div id="buttonContainer">
<input type="image" id="imageBtn"
onclick="switchImage(event)"
data-target-img-id="imgImage1"
data-target-txt-id="spnText1"
onmouseover="setButtonImage(event)"
onmouseout="setButtonImage(event)"
src="https://picsum.photos/id/1003/40/40" />
<span id="spnText1">Before</span>
</div>
</div>