First, the head is not the best place for scripts. Instead, put them in external .js files and include them just before the closing </body> tag.
In your code, you are doing:
var x = document.getElementsByTagName("img");
That will return a NodeList (not a single element). You then go on to treat it as though you're acting on a single element:
But that won't work because x is a NodeList.
Here's an updated approach which does what you want. Note, I was rushed for time and I specify event handlers in my script file vs. attaching event listeners. If I was to do this correctly, I would replace the img.onmouseover and img.onmouseout code with event listeners instead. That way, if someone modifies the HTML to define onmouseover or onmouseout inline (as you have in your example), it won't overwrite the handler (you can have multiple event listeners, but there's only one handler). HTML File