Focus to an image of a HTML page

Question

I have 4 images that when I click them they show information under the images and when I click the last ones the images go under the page and whens the new page loads with that information I have to go down with scroller to see the image and information of the last image.

I want to put focus to the last image when the new page loading.

I do this but it's not working:

<script>
function setFocusToTextBox(){
    document.getElementById("abc").focus();
}
</script>

<img src="images/Practidose.fw.png" alt="" width="770" height="150" id="abc" onclick="setFocusToTextBox()"/>

Picture of the 4 images and when I click the last one I want to focus that image when the new page loads:

Answer 1

I am not fully sure of why you want to focus the image you are ON, but try

function setFocusToTextBox(){
    document.getElementById("abc").scrollIntoView();
}

If onload:

window.onload=function(){
    document.getElementById("abc").scrollIntoView();
}

Answer 2

.focus() can normally only be applied to links or form inputs.

However, you can use it on arbitrary elements by giving the element a tabindex attribute.

This is usually a good idea for accessibility reasons anyway if you want to make use of onClick handlers, as this will help keyboard navigation and other accessibility tools understand that your element is supposed to be clickable.