Tech in T: depth + breadth‎ > ‎Tools - Business‎ > ‎JavaScript‎ > ‎Demo‎ > ‎



Change image on mouse over.

<a href="" 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";

On mouse over change description paragraph.

        <script type="text/javascript">
            function writeText(txt)

        <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" />

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