Javascript 在 HTML 矢量图上淡入淡出（onmouseover）

Question

我在 html 和 js 中有以下地图。它从一个图像切换到相同但具有另一种颜色的图像。但我希望图像淡入淡出（不透明度）。我进行了搜索，但由于某种原因无法将其他淡入淡出方法应用到我的方法中。我怎样才能做到这一点？这是一个例子：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 事件时重新加载图像有关，这并不理想。

另一种不仅可以解决您的问题，而且可以提高地图分辨率和速度的替代解决方案是使用 SVG 而不是一系列 PNG。如果你使用 SVG，你只需要一张地图图像，你可以像使用 CSS.

一样为各个区域（颜色和不透明度等）设置动画。

如果您有兴趣，请查看 this resource。

可以使用 Adobe Illustrator 轻松创建 SVG。从理论上讲，您甚至可以对其中一张 PNG 文件进行图像追踪，以节省时间。如果您没有 Illustrator，请查看 these tools。

Javascript 在 HTML 矢量图上淡入淡出（onmouseover）

Javascript Fade on HTML vectorial map (onmouseover)

html

javascript

jquery

onmouseover

fadein