Javascript HTMLベクトル地図上でフェードアウト（onmouseover）

Question

私はhtmlとjsで次のマップを持っています。 1つの画像から別の画像に切り替わります。しかし、私は画像がフェードインして消えていくことを望みます（不透明度）。私は検索をしましたが、何らかの理由で他のフェードメソッドを私のものに適合させることができませんでした。どうすればこれを達成できますか？ これは一例です：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

あなたが知らなかった場合には、任意のフェージング効果を実装していないを提供してきたコード。フェードするためにCSSを使用している場合は、そのコードも含めることができます。

あなたの質問には、理想的ではないすべてのmouseover/mouseleaveイベントでイメージをリロードしているということが関係しているかもしれません。

あなたの問題を解決するだけでなく、マップの解像度とスピードを向上させる代替ソリューションは、一連のPNGではなくSVGを使用することです。 SVGを使用する場合は、マップイメージを1つだけ必要とし、CSSでの操作と同様に、個々のリージョン（色や不透明度など）をアニメートできます。

興味があればthis resourceをご覧ください。

SVGは、Adobe Illustratorで簡単に作成できます。理論的には、自分のPNGをトレースして、時間を節約することさえできます。 Illustratorをお持ちでない場合は、代わりにthese toolsをご覧ください。