I am currently working on a billing application for the web and I require a tab menu bar structure. Each tab has 2 images to indicate active and inactive states. Below is the code snippet.
<html>
<head>
<style>
.gold1 { position:absolute; top: 10px; left: 10px; z-index: 1; }
.gold2 { position:absolute; top: 10px; left: 10px; z-index: 1; }
.gray1 { position:absolute; top: 10px; left: 10px; z-index: 1; }
.gray2 { position:absolute; top: 10px; left: 10px; z-index: 1; }
</style>
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("gold1")) {
image.src = "gray1.svg";
} else {
image.src = "gold1.svg";
}
}
function changeImage1() {
var image = document.getElementById('myImage1');
if (image.src.match("gray2")) {
image.src = "gold2.svg";
} else {
image.src = "gray2.svg";
}
}
</script>
</head>
<body>
<img src="gray2.svg" id="myImage1" onclick="changeImage1()" class="gray2"/>
<img src="gold1.svg" id="myImage" onclick="changeImage()" class="gold1"/>
</body>
</html>
Currently, clicking on an image toggles between the two but I need it to effectively switch between active and inactive states.
edit 01
<script src="https://localhost/bg_out/jquery.min.js"></script>
<script>
$("#infoToggler img").click(function() {
$(this).attr('src',$(this).attr('class')+'.svg');
});
This jQuery script has been added to achieve the desired functionality.
<div id="infoToggler">
<img src="gray3.svg" id="myImage2" class="gray2"/>
<img src="gray2.svg" id="myImage1" class="gray2"/>
<img src="gold1.svg" id="myImage" class="gold1"/>
</div>
Here is the corresponding HTML file.