Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    image map with rollover

    Hi,

    I'm looking to get a rollover effect on my image map, similar to what is done on this site: http://www.htmlgoodies.com/tutorials...le.php/3479771

    I'm handcoding the page, for the purposes of an assignment, so scripts have to be fairly basic/readable. Also, the image used for the map is too tricky to split into separate tables at this stage.

    I've tried adapting a number of java-tuturial scripts to fit my image map, including the scripts on the page above, but to no avail.

    Can anyone see any major glitches in my code?
    Any suggestions/recommendations welcome!



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>DVD Divided - the battle between the Blu-Ray and HD-DVD</title>
    <link href="dvd-styles.css" rel="stylesheet" type="text/css" />

    <SCRIPT LANGUAGE="javascript">

    Image1 = new Image(375,570);
    Image1.src = "images/dvdmenu.jpg";

    Image2 = new Image(375,570);
    Image2.src = "images/menuhome.jpg";

    Image3 = new Image(375,570);
    Image3.src = "images/menuscope.jpg";

    Image4 = new Image(375,570);
    Image4.src = "images/menuhistory.jpg";

    Image5 = new Image(375,570);
    Image5.src = "images/menusiblings.jpg";

    Image6 = new Image(375,570;
    Image6.src = "images/menuimpact.jpg";

    Image7 = new Image(375,570);
    Image7.src = "images/menudebate.jpg";

    Image8 = new Image(375,570);
    Image8.src = "images/menufuture.jpg";

    Image9 = new Image(375,570);
    Image9.src = "images/menulinks.jpg";

    Image10 = new Image(375,570);
    Image10.src = "images/menuunit.jpg";

    Image11 = new Image(375,570);
    Image11.src = "images/menublog.jpg";

    </SCRIPT>

    </head>

    <body>
    <body bgcolor="#5b69d6">

    <table width="350" height="570" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <div align="center">
    <td width="249" rowspan="3" valign="top"><table width="323" height="560" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td colspan="3">

    <IMG NAME="menu" SRC="images/dvdmenu.jpg" USEMAP="#menu" border="0">
    <SCRIPT LANGUAGE="javascript">

    if (document.images)

    function zoomtwo() {
    document.menu.src = Image2.src; return true;
    }

    function zoomthree() {
    document.menu.src = Image3.src; return true;
    }

    function zoomfour() {
    document.menu.src = Image4.src; return true;
    }

    function zoomfive() {
    document.menu.src = Image5.src; return true;
    }

    function zoomsix() {
    document.menu.src = Image6.src; return true;
    }

    function zoomseven() {
    document.menu.src = Image7.src; return true;
    }

    function zoomeight() {
    document.dvdmenu.src = Image8.src; return true;
    }

    function zoomnine() {
    document.dvdmenu.src = Image9.src; return true;
    }

    function zoomten() {
    document.dvdmenu.src = Image10.src; return true;
    }

    function zoomeleven() {
    document.dvdmenu.src = Image11.src; return true;
    }

    function original() {
    document.dvdmenu.src = Image1.src; return true;
    }

    </SCRIPT>

    <map name="menu">
    <area shape="poly"
    coords="50,303,175,294,252,298,249,315,59,318"
    href="home.html"
    title="DVD Home"
    onMouseOver="zoomtwo()"
    onMouseOut="original()"
    >

    <area shape="poly"
    coords="22,322,168,319,311,317,322,341,24,343"
    href="scope.html"
    title="Scope"
    onMouseOver="zoomthree()"
    onMouseOut="original()"
    >

    <area shape="poly"
    coords="24,351,174,346,337,346,337,367,184,370,25,371"
    href="history.html"
    title="History"
    onMouseOver="zoomfour()" onMouseOut="original()"
    >

    <area shape="poly"
    coords="9,374,165,373,305,372,305,394,171,394,14,395"
    href="siblings.html"
    title="Siblings"
    onMouseOver="zoomfive()" onMouseOut="original()"
    >

    <area shape="poly"
    coords="19,399,179,396,326,396,323,413,189,416,18,418"
    href="impact.html"
    title="Impact"
    onMouseOver="zoomsix()" onMouseOut="original()"
    >

    <area shape="poly"
    coords="32,423,173,418,330,416,330,444,227,447,31,453"
    href="debate.html"
    title="Debate"
    onMouseOver="zoomseven()" onMouseOut="original()"
    >

    <area shape="poly"
    coords="28,457,171,451,323,448,325,469,183,472,29,476"
    href="future.html"
    title="Future"
    onMouseOver="zoomeight()" onMouseOut="original()"
    >

    <area shape="poly"
    coords="40,479,205,474,333,467,335,489,201,499,42,507"
    href="links.html"
    title="Links and References"
    onMouseOver="zoomnine()" onMouseOut="original()"
    >

    <area shape="poly"
    coords="24,510,174,502,322,493,330,501,326,520,181,524,27,526"
    href="http://137.111.167.136/"
    target="_blank"
    title="MAS208 unit webpage"
    onMouseOver="zoomten()" onMouseOut="original()"
    >

    <area shape="poly"
    coords="58,528,185,525,343,522,314,531,223,545,71,563"
    href="http://137.111.167.136/weblog/joannafellows/"
    target="_blank"
    title="Blog"
    onMouseOver="zoomeleven()" onMouseOut="original()"
    >

    </map>

  • #2
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    phew.
    I just found a missing parenthese, and an incorrectly named function.
    thanks for reading this anyway!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •