skip to Main Content

Okay so I just began with doing HTML/CSS/PHP for school. I made a webpage by just adding one image (made in Photoshop) and putting it in an image map. I have 2 buttons and they both are clickable and need to redirect to another page. All my webpages contain only one image. Now my question is, how to jump to another page and reaching the bottom of this image (bottom of the page) when clicking on one of the buttons? (If I click on one of the buttons it automatically loads the next page at the top)

Hope one of you guys can help me out here!

EDIT:

added images from comments because they contains the code:

enter image description here

and

enter image description here

3

Answers


  1. You have to add an element with an id below that image and then add the id to the link.

    This is the link:

    <a href="otherpage.html#bottom">Link to image</a>
    

    This is the other page:

    <img src="img/yourimage.png" /><div id="bottom"></div>
    
    Login or Signup to reply.
  2. Under your image, just add a element with an id property and add an anchor in the button url.

    Page1.php :

    <a href="page2.php#image-bottom">Go to bottom</a>
    

    Page2.php :

    <img src="image.png" alt="image">
    <span id="image-bottom"></span>
    
    Login or Signup to reply.
  3. If im understanding you correctly, you want your link to go to a specific
    scroll point down the target page.
    So instead of loading target.html and being at the top of the page
    you want to be somewhere lower on the page. or have some lower content
    be at the top of the screen when loaded.

    in the starting_page.html your link currently looks like this

     <a href='target_page.html'>click here</a>
    

    change that to

     <a href='target_page.html#Position_1_on_page'>click here</a>
    

    and then edit your target_page.html and put

     <div id='Position_1_on_page'></div>
    

    now when someone clicks that link it will load the target_page.html and scroll
    it down so that the div called Position_1_on_page will be the topmost element
    on the page once it loads

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search