0

次のコードでイメージマップを使用します。

<img name="team" src="team.jpg" width="2560" height="1600" border="0" usemap="#team" alt="" />

<map name="team">
<area shape="rect" coords="495,308,887,794" alt="" onMouseOver="document.team.src='team_a.jpg'" onMouseOut="document.team.src='team.jpg'" >
<area shape="rect" coords="1022,513,1342,897" alt="" onMouseOver="document.team.src='team_b.jpg'" onMouseOut="document.team.src='team.jpg'" >
<area shape="rect" coords="1510,480,1679,691" alt="" onMouseOver="document.team.src='team_c.jpg'" onMouseOut="document.team.src='team.jpg'" >
</map>

これは正常に機能しますが、多くの場合、画像の変更が「点滅」します。

コードに追加できるものはありますか? 画像をプリロードする必要がありますか? おそらく画像が大きすぎますか？

4

1 に答える 1

1

解決策は、画像をプリロードすることです。jQuery を使用している場合は、Lazyloadを利用できます。

とにかく、Javascript だけでなく、多くの代替手段があります。この記事ではかなりよく説明されています。

于 2013-10-16T17:35:49.567 に答える