Develop Reference

Remove PNG Background to have multiple layers of PNG that can be hovered

So I'm making some sort of interactive map for a roleplaying game I have, where I want to be able to hover a country and it can scale up a bit and have a hover effect and so you can be able to click on it and it will give you main info of the country and stuff. Now the issue comes that I'm trying to check if there is a way to have multiple PNG layered up on HTML, CSS, JS and avoid having the transparent background of the top layer hover only that specific one. I'm trying to check if there is a way for the code to detect only the colored area of the img or if this is not possible.
I've tried layering with the z-index, but that doesn't really resolve the issue.

highlight an image except for a radius around mouse on hover

The effect I want to achieve is an image in a div that has a coloured highlight on top (with some opacity to see through it) and when you hover over that image a certain radius around the mouse will have the highlight removed (think of shining a torch over a greyed out image to reveal a brighter around around the torchlight)
I don't know where to start with this because I wasn't sure about dynamically styling a portion of a div without setting proportional properties in css. I know i can achieve a 'blocky' version of this with on hover and styling sections of a div on hover but that means i would have to constrain the styling to seperate div elements and it would not be 'fluid' so I'm looking for some pointers to a js solution I can write (possibly on mouseover call a function that gets mouse position and gets radius around it but then I wasn't sure how to dynamically style that radial area?)
Are there any functions that allow this type of styling within a dynamic area?

The solution you're looking for might be achieved through CSS but using JavaScript mouse events can also help.
Like discussed in the comments section, you can use help of the mousemove event to somehow achieve what you desire.
For other users reference, here is the link to the codepen https://codepen.io/edupoch/pen/GIhJq
In the codepen above, instead of the zoomin cursor image, you can use some gif image with the effect you want and apply it using the above code.

Combining hover mouseover with image-map

I am trying to create a hover mouseover effect where the onMouseOver item is a single image with three separate links.
I'm using a standard onMouseOver, onMouseOut effect and trying to combine it with an image map like this one.
The closest I can get is a MouseOver effect where the links show only when the image is in onMouseOut, and doesn't show the links when it's onMouseOver. In short, is there a way to combine these two effects so it shows the image map links on the onMouseOver image so that the two effects are working together?
Here is an example showing the problem I'm trying to work through. To fully get the gist of the problem, try hovering your mouse over the image slowly from top to bottom.

The best way to do something like this is with CSS and the :hover selector.
image {
background-image:url('image1.png');
}
image:hover {
background-image:url('image2.png');
}
Of course, you'll need more styles here and appropriately selected elements to make this work the way you'd like.

Crossfading Submit Button on Hover

I want to customize my submit button so that, when the mouse hovers over it, it crossfades to a new background-image position in my sprite. I can easily get it to switch to that position, but I'd like to have it slowly fade instead.
There are tons of articles on how to do this for simple links, but they all essentially position the other images over the button area, and then fade opacities correspondingly. This doesn't seem possible with a submit button, since input elements don't seem to be able to contain child elements (ie. the other background sprites). Ideas?

I am not sure if this is what you are looking but take a look anyway
http://snook.ca/archives/javascript/jquery-bg-image-animations
DEMO: http://snook.ca/technical/jquery-bg/
anyway, you can still add a click listener event using jquery to any div and make it act like a submit button.
$("div.submit").click(function() {
document.forms[0].submit();
});
add the css, for the mouse over
div.submit:hover {
pointer: cursor;
}

I don't know for sure but if you make the buttons container (a div sized to exactly match the button) you can give it a background image and then fade out the buttons opacity. Can you give an example of the two states you are trying to blend between? It would help give a more specific answer.

There is no consistent way to do this in CSS across all major browsers.
For something like that, you really want jQuery.
Here's a working jsFiddle that shows one example of how you can do this. Just update the fade var to change the timing of the fades.

Best way to preload images when unhover state is text?

I am aware that using CSS sprites is the way to go when you use images for both states, but what about when you have text as the unhovered state & an image on hover?
There a few ways I can think of, but wondering which method is the best in peoples opinions?
I can think of doing it via JavaScript or loading it via a hidden CSS element.

Are you using CSS Sprites for other relevant images on your website?
If not, then you should do it.
Have your "other relevant images" and "menu images" in the same sprite image.
Even if it's just for one other image, it will mean your :hover menu images are automatically preloaded.

You can use the same sprite, just set the sprite to a transparent section, or background-position out of the button, and when in hover, set it to the right place and text-indent the text, if the button image has the text on it.
Most browsers won't preload hidden images.