オンマウスで画像（写真）を表示し、リンク先へ遷移する

文字にマウスをのせると画像を表示し、クリックでリンク先へ遷移するサンプルです。

<div style="position: relative;">

    <img src="香川県の地図画像のURL" width="600" height="350" alt="" />

    <div style="position:absolute; top:1px;width: 105px;">

        <div style="background:#FF6600; padding:4px;">

            <p>

                <span style="font-size: 120%"><span style="color:#FFFFFF;">　香川県</span></span>

            </p>

        </div>

    </div>

 

    <div style="position:absolute; top:120px; left:300px; width: 70px;">

        <p>

            <span style="background:#CCFFFF;">&#160;&#160;高松市&#160;&#160;</span>

        </p>

    </div>

 

    <div style="position:absolute; top:65px; left:355px; width: 70px;">

        <p>

            <a target="_blank" href="ウィキペディアの屋島のURL" onmouseover="image3.style.display='';" onmouseout="image3.style.display='none';"><span onmouseover=

            "image3.style.display='';" onmouseout="image3.style.display='none';">● 屋島</span></a> <img name="image3" src=

            "屋島の写真のURL" alt="トップ" width="180" height="80" style="display:none" id="image3" />

        </p>

    </div>

</div>