...

View Full Version : image map with rollover



ladypenelope
05-26-2007, 04:57 AM
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/image_maps/article.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>

ladypenelope
05-26-2007, 05:12 AM
phew.
I just found a missing parenthese, and an incorrectly named function.
thanks for reading this anyway!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum