Here is the coded implementation using bootstrap:
<div class="map-images">
<img src="images/map/level0.png" title="image 1" alt="Ground floor" id="image1" class="image-toggle"/>
<img src="images/map/level1.png" title="image 2" alt="floor 1" id="image2" class="image-toggle" style="display:none;"/>
<img src="images/map/level2.png" title="image 3" alt="floor 2" id="image3" class="image-toggle" style="display:none;"/>
<img src="images/map/level3.png" title="image 4" alt="floor 3" id="image4" class="image-toggle" style="display:none;"/>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary image-toggler" data-image-id="#image1" data-link="first">
<input type="radio" name="options" id="option1" href="#lvl0-overview"> Ground Floor
</label>
<label class="btn btn-primary image-toggler" data-image-id="#image2" data-link="second">
<input type="radio" name="options" id="option2" href="#lvl1-overview"> Floor 1
</label>
<label class="btn btn-primary image-toggler" data-image-id="#image3" data-link="third">
<input type="radio" name="options" id="option3" href="#lvl2-overview"> Floor 2
</label>
<label class="btn btn-primary image-toggler" data-image-id="#image4" data-link="fourth">
<input type="radio" name="options" id="option4" href="#lvl3-overview"> Floor 3
</label>
</div>
The corresponding JavaScript code:
<script type="text/javascript">
$('.image-toggler').click(function(){
$('.image-toggle').hide();
$($(this).attr('data-image-id')).show();
});
</script>
The current functionality involves changing the displayed image based on button clicks. The goal is to include an onclick feature that will reveal a floor description below the buttons.
A layout example of what is needed:
-------------
| Floor |
| overview | <-image swapping here based on button click
| |
| |
-------------
button1 button2 button3
--------------
| floor |
| description | <-Change divs based on the current floor.
| |
| |
--------------
Specifically seeking advice on incorporating this using CSS and additional resources. Attempted by adding href tags to <input> elements, but encountering issues. What steps should be taken next?