i have a pre-course task in order to get accepted to the institute i'm applying to.. this is the task:
- Add two buttons: "Previous" and "Next" below the map. Clicking the "Next" button should change the pointer to the next city listed on your about page (i.e., a city you have lived in or want to visit). When the first of the series of locations is selected, the "Previous" button should disappear or be disabled, and when the last location is selected, the "Next" button should be the one blocked. Otherwise, both buttons should be visible. We encourage you to implement this using only one iframe.
this is what i did so far: https://ibb.co/jM3sLg6
this is the code:
<section class="sectionTwo">
<div class="mapButtons">
<ul class="mapNav">
<li class="mapOne"><a href="#">Prev</a></li>
<li class="mapTwo"><a href="#">Next</a></li>
</ul>
</div>
<h1 class="mapHeader"> cities i have visited:</h1>
<div class="mapouter"><div class="gmap_canvas"><iframe width="700" height="550" id="gmap_canvas" src="https://maps.google.com/maps?q=jerusalem&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="2" scrolling="no" marginheight="0" marginwidth="0"></iframe><a href="https://fmovies-online.net"></a><br><style>.mapouter{position:relative;text-align:right;height:550px;width:800px;}</style><a href="https://www.embedgooglemap.net">add google map to my website</a><style>.gmap_canvas {overflow:hidden;background:none!important;height:550px;width:800px;}</style></div></div>
</section>
enter code here
what should i do next? how can i make it happen? don't tell me the code i need to copy paste.. just instructions please.. i want to actually learn it. could someone give me a hand? more specifically: what should i do next? they want me to use only 1 iframe.. is it possible to link multiple locations to one iframe? and how should i write the click event on the buttons to go to the next or prev city? thank you!!