I'm completely new to creating websites so I may not be using the correct terminology. I've searched with various terms and ideas but haven't found any solutions to help me ask my question effectively or find examples of what I'm looking for.
I have an image tag that acts as a link - when you click on the image, it opens a new page (not a new tab, but in the same tab).
What I want is for the next page that opens to directly show the image tag. I attempted using
<a id="">, <a href="#id"><a> is actually an <img>.
I'm trying to create a flip-book style effect with very basic knowledge of JavaScript. I have some JavaScript code that simulates turning a page (flipping it on the y-axis) on the image, but when the image is clicked to go to the next page, it just reloads at the top of the page and looks messy (requiring scrolling down to see the image again, and then clicking once more).
I've included the HTML/JavaScript code below, please let me know if additional information is needed!
<!--this is the page-flip JavaScript-->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="../flip-master/dist/jquery.flip.min.js"></script>
<script>
$(function()
$(".flip").flip({
trigger: 'click'});});
</script>
<main class="flip">
<div class="front">
<img src="../images/sketchbook3.jpg" alt="sketchbook page">
</div> <!--this is where i would like the page to open to upon loading,
the idea being clicking on the page "opens" to the next page, until the end
of the "book" . each flip is two images on one page, there are multiple pages
to make up the book-->
<div class="back">
<a href="sketchbook3.html"><img src="../images/sketchbook4.jpg" alt="sketchbook page with click to next page"></a>
</div>
</main>