Javascript Fade on HTML vectorial map (onmouseover)

Question

I have the following map in html and js. It switches from one image to the same but with another colour. But I'd like the images to fade in and fade out (opacity). I did a search but haven't been able to adapt the other fade methods into mine for some reason. How can I accomplish this? This is an example: http://www.subito.it/

<script>
        function change_image( id )
        {
            $( '#italia' ).attr( 'src', 'images/' + id + '.png');
        }
        function hide_image()
        {
            $( '#italia' ).attr( 'src', 'images/ItaliaTutorial.png');
        }  

        function preload( images ) {
        $( images ).each( function () {
            $( '<img/>' )[ 0 ].src = this;
        });
        }
        preload([
    'images/Sardegna.png',
    'images/Abruzzo.png',
    'images/Basilicata.png',
    'images/Calabria.png',
    'images/Campania.png',
    'images/EmiliaRomagna.png',
    'images/FriuliVeneziaGiulia.png',
    'images/Lazio.png',
    'images/Liguria.png',
    'images/Lombardia.png',
    'images/Marche.png',
    'images/Molise.png',
    'images/Piemonte.png',
    'images/Puglia.png',
    'images/Sicilia.png',
    'images/Toscana.png',
    'images/TrentinoAltoAdige.png',
    'images/Umbria.png',
    'images/ValledAosta.png',
    'images/Veneto.png'
        ]);
    </script>

<area onmouseover="change_image( 'Sicilia' );" onmouseout="hide_image();" shape="rect" alt="" coords="381,783,593,918" href="http://##Sicilia">

Answer 1

The code you have provided does not implement any fading effects, in case you were not aware. If you are using CSS to fade, you may want to include that code as well.

As for your question, it may have something to do with the fact that you are reloading images with every mouseover/mouseleave event, which is not ideal.

An alternative solution that will not only solve your issue, but improve the resolution and speed of your map would be to use SVGs rather than a series of PNGs. If you use an SVG, you would only need one map image and you can animate the individual regions (color and opacity among other things) similarly to how you would do it with CSS.

Check out this resource if you are interested.

SVGs can be created with Adobe Illustrator quite easily. In theory, you could even image trace one of your PNGs to save yourself some time. If you do not have Illustrator, check out these tools instead.