• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 3. Swapping Out Image Maps > Multiple Image Maps in HTML

Multiple Image Maps in HTML

Let's begin by coding the page as a normal Web page with rollovers. It looks like Example 3-1 (notice the three images at the bottom).

Example 3-1. Home page with rollovers

<html>
<head>
<title>Welcome to Shelley Biotech!</title>

<style type="text/css">
#header { position: absolute; left: 36; top: 31; }
#nav { position: absolute; left: 0; top: 122; }
#gal { position: absolute; left: 515; top: 74; }
#submenu { position: absolute; left: 33; top: 163; }
</style>

<script language="JavaScript">
// preload images

newsOn = new Image()
newsOn.src = "images/nav_news_on.gif"
newsOff = new Image()
newsOff.src = "images/nav_news_off.gif"

productsOn = new Image()
productsOn.src = "images/nav_products_on.gif"
productsOff = new Image()
productsOff.src = "images/nav_products_off.gif"

researchOn = new Image()
researchOn.src = "images/nav_research_on.gif"
researchOff = new Image()
researchOff.src = "images/nav_research_off.gif"

storeOn = new Image()
storeOn.src = "images/nav_store_on.gif"
storeOff = new Image()
storeOff.src = "images/nav_store_off.gif"

aboutOn = new Image()
aboutOn.src = "images/nav_about_on.gif"
aboutOff = new Image()
aboutOff.src = "images/nav_about_off.gif"

function rollOver (imgName)
{
    document.images[imgName].src =
      eval(imgName + "On.src")
}

function rollOut (imgName)
{
    document.images[imgName].src =
      eval(imgName + "Off.src")
}

</script>

<body bgcolor="#FFFFFF">

<div id="header"><img src="images/shelley.gif"></div>

<div id="gal"><img src="images/freak_gal.jpg"></div>

<div id="nav">
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><img src="images/nav_begin.gif"></td>
      <td><a href="#"
        onMouseOver="rollOver('news')"
        onMouseOut="rollOut('news')"><img
        src="images/nav_news_off.gif"
        name="news" border="0"></a></td>
      <td><a href="#"
        onMouseOver="rollOver('products')"
        onMouseOut="rollOut('products')"><img
        src="images/nav_products_off.gif"
        name="products" border="0"></a></td>
      <td><a href="#"
        onMouseOver="rollOver('research')"
        onMouseOut="rollOut('research')"><img
        src="images/nav_research_off.gif"
        name="research" border="0"></a></td>
      <td><a href="#"
        onMouseOver="rollOver('store')"
        onMouseOut="rollOut('store')"><img
        src="images/nav_store_off.gif"
        name="store" border="0"></a></td>
      <td><a href="about.html"
        onMouseOver="rollOver('about')"
        onMouseOut="rollOut('about')"><img
        src="images/nav_about_off.gif"
        name="about" border="0"></a></td>
    </tr>
</table>
</div>

<div id="submenu">
<img src="images/white_block.gif" name="submenuImg"
    border="0">

<map name="productsMap">
<area shape="rect" coords="286,44,422,101"
    href="prod/replicator.html">
<area shape="rect" coords="139,126,282,175"
    href="prod/easycreature.html">
<area shape="rect" coords="88,48,196,75"
    href="prod/biohomelab.html">
</map>

<map name="researchMap">
<area shape="rect" coords="142,134,432,161"
    href="research/capping.html">
<area shape="rect" coords="258,78,431,110"
    href="research/cancer.html">
<area shape="rect" coords="81,34,479,67"
    href="research/downs.html">
</map>

<map name="storeMap">
<area shape="rect" coords="346,106,461,153"
    href="store/fish.html">
<area shape="rect" coords="347,34,464,60"
    href="store/mugs.html">
<area shape="rect" coords="85,130,272,177"
    href="store/vegas.html">
<area shape="rect" coords="85,100,228,121"
    href="store/sucks.html">
<area shape="rect" coords="86,55,252,92"
    href="store/selfish.html">
<area shape="rect" coords="88,18,211,46"
    href="store/shirts.html">
</map>
</div>
</body>
</html>


					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint