DOM



Example

Change image on mouse over.

<a href="http://www.w3schools.com" target="_blank">
<img border="0" alt="Visit W3Schools!" src="b_pink.gif" id="b1"
onmouseOver="mouseOver()" onmouseOut="mouseOut()" /></a>
---------------------------------------------------------
<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="b_blue.gif";
}
function mouseOut()
{
document.getElementById("b1").src ="b_pink.gif";
}
</script>

On mouse over change description paragraph.

<html>
    <head>
        <script type="text/javascript">
            function writeText(txt)
            {
                document.getElementById("desc").innerHTML=txt;
            }
        </script>
    </head>

    <body>
        <img src="planets.gif" width="145" height="126"
             alt="Planets" usemap="#planetmap" />

        <map name="planetmap">
            <area shape ="rect" coords ="0,0,82,126"
                  onMouseOver="writeText('The Sun and the gas giant planets like Jupiter
                      are by far the largest objects in our Solar System.')"
                  href ="sun.htm" target ="_blank" alt="Sun" />

            <area shape ="circle" coords ="90,58,3"
                  onMouseOver="writeText('The planet Mercury is very difficult to study
                      from the Earth because it is always so close to the Sun.')"
                  href ="mercur.htm" target ="_blank" alt="Mercury" />

            <area shape ="circle" coords ="124,58,8"
                  onMouseOver="writeText('Until the 1960s, Venus was often considered a
                      twin sister to the Earth because Venus is the nearest planet to us, and
                      because the two planets seem to share many characteristics.')"
                  href ="venus.htm" target ="_blank" alt="Venus" />
        </map>

        <p id="desc"></p>

    </body>
</html>












Comments