How to get a <img> tag the focus

Question

I have below code in html page:

<img id="image_java"  alt="image_not" src="images/java-icon.png">

in css page the below code:

#image_java: focus {
outline: 2px solid blue;
}

I have also tried:

img:focus{
outline: 2px solid blue;

}

but non of them seem to work, they are suppose to display a blue margin around the image when focus. Does any one know how to do that? thank you!!!

Answer 1

Actually you CAN focus an <img> - with the help of tabindex:

img:focus {
    outline: 2px solid blue;
}

<img src="http://www.w3schools.com/images/w3logotest2.png" tabindex="0">

Answer 2

If its an anchor tag you can also use

A:focus img{border: 2px solid blue;}