Question

我在html和js中有以下地图。它从一个图像切换到相同但使用另一种颜色。但我希望图像淡入淡出（不透明）。我做了一个搜索，但由于某种原因，我们无法将其他淡入淡出方法调整到我的中。我怎么能做到这一点？这是一个例子：{{3}}

<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）

1 个答案: