First, thank you for the forum.

I am using Dreamweaver MX 2004 version 7.0.1 in Windows XP, Internet Explorer 6 SP1, with your book "Beginning Dreamweaver MX 2004".

I am having a problem displaying the "Italy Map", after having created the "hotspots" as described on pages 190-192 in your book.

I have had no problems up to this point; I created the menu on the top of the "Regions" web page, along with the 3 maps of Italy, France and U.S.. All maps were displayed and hidden as described in your book, when clicking on the corresponding map name in the regMenu.

However, once I continued on to create the hotspots on the "Italy Map", placed the "Southern" - "Northern" text, corresponding to each hot spot, in the "mapText" layer, and saved and ran the page, the Italy Map will no longer display when clicking on the word "Italy" in the regMenu. The France and U.S. maps still display/hide correctly when clicking on "France" and "U.S." in the regMenu.

I have checked to see that "hide /show" for each item, are still correctly associated with the onClick event in the word "Italy" in the regMenu. However, when I run the page, the map will not show.

I then backtracked; I removed the hotspots and once again the map displayed correctly when clicking on "Italy" in the regMenu. However, I then repeated carefully setting up the "hotspots" as described in the book, and again the Italy Map fails to show when clicking on "Italy" in the regMenu, however again, France and U.S. maps show/hide correctly.

I did not see any posts associated with this "problem", so perhaps I have missed something. Hopefully it's not too obvious... ;)

Thank you for your help!
Donner9x

Hi there,

Can you post the relevant parts of the code for the page that works and the one that doesn't? I don't have the book here right now, so I can't take a look.

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

Imar,
Thanks for your response.
Before I continue, let me say that I went back and opened the "regions.htm" web page in another browser, Mozilla Firefox ver. 0.9 ( I had Internet Explorer 6 set as default) and the pages worked perfectly! This problem I described seems to be an issue with IE 6 SP1 (?) I would like to get that confirmed and see if anyone knows about this, and what may cause it.

Here's the directions in the book, Pages 190-192(not much code to show you):

In the regions.htm web page that we previously created, we are first to draw a new layer named "mapText" on the web page below the "regMenu" and set its dimensions in the property inspector. This is the layer which displays text for corresponding 'hot spots' on the Italy map. We then create 2 'hotspots' on the italy map.

We use the DW Behaviors panel to select "Set Text/Set Text of Layer" for each hotspot. We choose the "mapText" layer and type in some text into the "Set Text" dialog box. Then repeat this, leaving the text field blank. We make certain that "onMouseOver" is the assigned behavior for displaying the text, and "onMouseOut" is the assigned behavior for leaving the text in "mapText" blank. We repeat this procedure for a second hotspot on the Italy map. Save and test the page.

In my IE 6 browser, when I load the "regions.htm" page, and click on the "Italy" word in the regMenu (which previous to creating the 'hotspots' correctly displayed the Italy map) now with 'hotspots' created on the map, it does not display the Italy map when clicked.

However, if I switch over to my Mozilla Firefox browser and open the "regions.htm", this works properly: In Firefox browser, when I click on the "Italy" word in the regMenu, above where the maps will be displayed, the Italy map is shown, and I move my mouse over it, and indeed there are 2 "hotspots", and each one displays a corresponding text.

There was not much code, per say, so I hope my description was helpful. Please let me know if I should include something else.

Thank you,
Donner9x

Yes, there is. Please post the code ;)

The description you gave is fine; it describes what you have done, and how it is supposed to work. But it doesn't, so apparently something has gone wrong somewhere. If you post the code, we can take a look and try to figure out what is wrong.....

Cheers,

Imar

Imar,
Sorry, I should have waited to post again, as I did not have access to the computer on which I had been working, where the code was. I have it now, here is all the code from the page I have been referencing, the "regions.htm" page. BTW, as I stated before, this works perfectly well in Mozilla Firefox browser, ver. 0.9, but not in IE 6, SP1...:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The Cooking Place</title>
<style type="text/css">
<!--
body {
    background-color: #FFFFFF;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.style1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 36px;
    color: #FFFFFF;
    font-weight: bold;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function mmLoadMenus() {
  if (window.mm_menu_0806191703_0) return;
            window.mm_menu_0806191703_0_1 = new Menu("Italian",119,18,"Verdana, Arial, Helvetica, sans-serif",12,"#000000","#FFFFFF","#FF3333","#FF9900", "center","middle",3,0,500,-5,7,true,true,true,0,true,true);
    mm_menu_0806191703_0_1.addMenuItem("Southern&nbsp; Italian","location='sitalian.htm'");
    mm_menu_0806191703_0_1.addMenuItem("Northern&nbsp; Italian","location='nitalian.htm'");
     mm_menu_0806191703_0_1.hideOnMouseOut=true;
     mm_menu_0806191703_0_1.bgColor='#555555';
     mm_menu_0806191703_0_1.menuBorder=1;
     mm_menu_0806191703_0_1.menuLiteBgColor='#FFFFFF';
     mm_menu_0806191703_0_1.menuBorderBgColor='#777777' ;
  window.mm_menu_0806191703_0 = new Menu("root",82,18,"Verdana, Arial, Helvetica, sans-serif",12,"#000000","#FFFFFF","#FF3333","#FF9900", "center","middle",3,0,500,-5,7,true,true,true,0,true,true);
  mm_menu_0806191703_0.addMenuItem("American","locat ion='american.htm'");
  mm_menu_0806191703_0.addMenuItem("French","locatio n='french.htm'");
  mm_menu_0806191703_0.addMenuItem(mm_menu_080619170 3_0_1,"location='italian.htm'");
   mm_menu_0806191703_0.hideOnMouseOut=true;
   mm_menu_0806191703_0.childMenuIcon="arrows.gif";
   mm_menu_0806191703_0.bgColor='#555555';
   mm_menu_0806191703_0.menuBorder=1;
   mm_menu_0806191703_0.menuLiteBgColor='#FFFFFF';
   mm_menu_0806191703_0.menuBorderBgColor='#777777';

mm_menu_0806191703_0.writeMenus();
} // mmLoadMenus()

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script language="JavaScript" src="mm_menu.js"></script>
<link href="stylesheets/cookingPlaceStyles.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}

function MM_setTextOfLayer(objName,x,newText) { //v4.01
  if ((obj=MM_findObj(objName))!=null) with (obj)
    if (document.layers) {document.write(unescape(newText)); document.close();}
    else innerHTML = unescape(newText);
}
//-->
</script>
</head>

<body onLoad="MM_preloadImages('Images/home_over.gif','Images/news_over.gif','Images/contact_over.gif')">
<div id="usaMap" style="position:absolute; left:300px; top:150px; width:200px; height:200px; z-index:1; visibility: hidden;"><img src="Images/USA.gif" alt="USA Map" width="200" height="200" border="0" usemap="#usaMap">
  <map name="usaMap">
    <area shape="rect" coords="135,77,175,109" href="#" onMouseOver="MM_setTextOfLayer('mapText','','%3Ch2 %3ENorth East U.S.%3C/h2%3E%0D%0A%3Cp%3EA great place to live and eat; fine restaurants, Broadway stars, Maine lobster, Boston baked beans and Ted Kennedy%27s %22bottomless martini%22 make this region of the U.S. a dining experience you%27ll never forget. Or maybe, remember... hic!%0D%0AGo Yankees!%3Cp%3E')" onMouseOut="MM_setTextOfLayer('mapText','','')">
    <area shape="rect" coords="96,94,134,144" href="#" onMouseOver="MM_setTextOfLayer('mapText','','%3Ch2 %3EMidwest U.S.%3C/h2%3E%0D%0A%3Cp%3EThe heartland. Old fashioned values and grandma%27s cookin%27 combine to make a traditional feast for any food lover!%3Cp%3E')" onMouseOut="MM_setTextOfLayer('mapText','','')">
    <area shape="rect" coords="47,57,95,158" href="#" onMouseOver="MM_setTextOfLayer('mapText','','%3Ch2 %3EWestern U.S.%3C/h2%3E%0D%0A%3Cp%3EHarsh deserts, rattle snakes, and scorpions; oh my! But seriously, Longhorn steaks and sour cream-smothered baked potatoes are what every cowboy and girl want. Eat up pardner!%3Cp%3E')" onMouseOut="MM_setTextOfLayer('mapText','','')">
    <area shape="rect" coords="11,61,46,146" href="#" onMouseOver="MM_setTextOfLayer('mapText','','%3Ch2 %3EWest Coast U.S.%3C/h2%3E%0D%0A%3Cp%3ELand of the fruits and nuts. While hollywood liberals and %22left coast%22 attitudes can make this an indigestive experience, great dining will sooth your troubled tract. But guys, don%27t give that waiter in the pink shirt the wrong look, or he%27ll invite you home for a %22San Francisco treat%22...%3Cp%3E')" onMouseOut="MM_setTextOfLayer('mapText','','')">
  </map>
</div>
<div id="franceMap" style="position:absolute; left:300px; top:150px; width:200px; height:200px; z-index:2; visibility: hidden;"><img src="Images/France.gif" alt="France Map" width="200" height="200" border="0" usemap="#franceMap">
  <map name="franceMap">
    <area shape="rect" coords="39,57,176,159" href="#" onMouseOver="MM_setTextOfLayer('mapText','','%3Ch2 %3EFrance%3C/h2%3E%0D%0A%3Cp%3EAh, France. What can we say. The food is exquisite!%3C/p%3E ')" onMouseOut="MM_setTextOfLayer('mapText','','')">
  </map>
</div>
<div id="italyMap" style="position:absolute; left:300px; top:150px; width:200px; height:200px; z-index:3; visibility: hidden;"><img src="Images/Italy.gif" width="200" height="200" border="0" usemap="#italyMap">
  <map name="italyMap">
    <area shape="rect" coords="5,26,99,102" href="#" onMouseOver="MM_setTextOfLayer('mapText','','%3Ch2 %3ENorthern Italy%3C/h2%3E%0D%0A%3Cp%3ENorthern Italian cuisine is influenced by many cultures. It%27s rich soil gives us fine wines, cultured cheeses, and mob bosses. Wha%27s-a-matta-wit-chew, huh?%3C/p%3E')" onMouseOut="MM_setTextOfLayer('mapText','','')">
    <area shape="rect" coords="102,57,167,136" href="#" onMouseOver="MM_setTextOfLayer('mapText','','%3Ch2 %3ESouthern Italy%3C/h2%3E%0D%0A%3Cp%3EThe cuisine of Southern Italy is characterized by olives, ripe tomatoes, and citrus fruits. Just don%27t double cross Vinnie, or you%27ll end up at the bottom of the Mediterranean.%3C/p%3E ')" onMouseOut="MM_setTextOfLayer('mapText','','')">
  </map>
</div>
<div id="regMenu" style="position:absolute; left:350px; top:100px; width:415px; height:35px; z-index:4; visibility: visible;"><img src="Images/italyButton.gif" alt="Italy" width="136" height="31" onClick="MM_showHideLayers('usaMap','','hide','fra nceMap','','hide','italyMap','','show','regMenu',' ','show','mapText','','show')"><img src="Images/usaButton.gif" alt="USA" width="136" height="31" onClick="MM_showHideLayers('usaMap','','show','fra nceMap','','hide','italyMap','','hide','regMenu',' ','show')"><img src="Images/frenchButton.gif" alt="France" width="136" height="31" onClick="MM_showHideLayers('usaMap','','hide','fra nceMap','','show','italyMap','','hide','regMenu',' ','show')"></div>
<div id="mapText" style="position:absolute; left:535px; top:175px; width:275px; height:200px; z-index:5; visibility: visible;"></div>
<script language="JavaScript1.2">mmLoadMenus();</script>
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="Images/topbkg.gif">
  <tr>
    <td width="50%"><img src="Images/topleft.gif" width="290" height="51" /></td>
    <td width="50%"><div align="center"><span class="style1">The Cooking Place </span></div></td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="257" valign="top" background="Images/sidebkg.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><img src="Images/topleft2.gif" width="257" height="112"></td>
        </tr>
      </table>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="50%" valign="top" background="Images/rightsidebkg.gif"><img src="Images/topleft3.gif" width="195" height="75"><br>
                <a href="index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('homeButton','','Images/home_over.gif',1)"><img src="Images/buttonblank.gif" alt="Home" name="homeButton" width="181" height="31" border="0"></a><br>
                <a href="news.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('newsButton','','Images/news_over.gif',1)"><img src="Images/buttonblank.gif" alt="News" name="newsButton" width="181" height="31" border="0"></a><br>
                <a href="javascript:;" onMouseOver="MM_showMenu(window.mm_menu_0806191703 _0,178,28,null,'image1')" onMouseOut="MM_startTimeout();"><img src="Images/regions_over.gif" name="image1" width="181" height="31" border="0" id="image1"></a><br>
                <a href="[email protected]" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contactButton','','Imag es/contact_over.gif',1)"><img src="Images/buttonblank.gif" alt="Contact Us" name="contactButton" width="181" height="31" border="0"></a></td>
            <td width="50%" valign="top"><img src="Images/page.gif" width="59" height="199"></td>
          </tr>
      </table></td>
    <td width="99%" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="1%" valign="top"><img src="Images/leftcorn.gif" width="28" height="22"></td>
          <td width="98%">&nbsp;</td>
          <td width="1%" valign="top"><img src="Images/rightcorn.gif" width="28" height="22"></td>
        </tr>
    </table>
    </td>
    <td width="1%" background="Images/rightsidebkg.gif"><img src="Images/rightsidebkg.gif" width="24" height="31"></td>
  </tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" background="Images/botbkg.gif">
  <tr>
    <td width="50%"><img src="Images/botleft.gif" width="235" height="40"></td>
    <td width="50%"><div align="right"><img src="Images/botright.gif" width="69" height="40"></div></td>
  </tr>
</table>
<meta name="keywords" content="cooking, food, American cuisine, Italian cuisine, recipes, recipe exchange, cooking techniques, cooking tools" />
<meta name="description" content="The cooking place is where you can come to find great recipes, get some cooking tips, learn more about various techniques, and share your recipes with friends from all over the world!" />
</body>
</html>

Thank you for your patience and your assistance...
Donner9x

(Cont'd)...

The addition of the layers and associated code, :

<map name="usaMap">
    <area shape="rect" coords="135,77,175,109" href="#" onMouseOver="MM_setTextOfLayer('mapText','','%3Ch2 %3ENorth East U.S.%3C/h2%3E%0D%0A%3Cp%3EA great place to live and eat; fine restaurants, Broadway stars, Maine lobster, Boston baked beans and Ted Kennedy%27s %22bottomless martini%22 make this region of the U.S. a dining experience you%27ll never forget. Or maybe, remember... hic!%0D%0AGo Yankees!%3Cp%3E')" onMouseOut="MM_setTextOfLayer('mapText','','')">
    <area shape="rect" coords="96,94,134,144" href="#" onMouseOver="MM_setTextOfLayer('mapText','','%3Ch2 %3EMidwest U.S.%3C/h2%3E%0D%0A%3Cp%3EThe heartland. Old fashioned values and grandma%27s cookin%27 combine to make a traditional feast for any food lover!%3Cp%3E')" onMouseOut="MM_setTextOfLayer('mapText','','')">
    <area shape="rect" coords="47,57,95,158" href="#" onMouseOver="MM_setTextOfLayer('mapText','','%3Ch2 %3EWestern U.S.%3C/h2%3E%0D%0A%3Cp%3EHarsh deserts, rattle snakes, and scorpions; oh my! But seriously, Longhorn steaks and sour cream-smothered baked potatoes are what every cowboy and girl want. Eat up pardner!%3Cp%3E')" onMouseOut="MM_setTextOfLayer('mapText','','')">
    <area shape="rect" coords="11,61,46,146" href="#" onMouseOver="MM_setTextOfLayer('mapText','','%3Ch2 %3EWest Coast U.S.%3C/h2%3E%0D%0A%3Cp%3ELand of the fruits and nuts. While hollywood liberals and %22left coast%22 attitudes can make this an indigestive experience, great dining will sooth your troubled tract. But guys, don%27t give that waiter in the pink shirt the wrong look, or he%27ll invite you home for a %22San Francisco treat%22...%3Cp%3E')" onMouseOut="MM_setTextOfLayer('mapText','','')">
  </map>
</div>
<div id="franceMap" style="position:absolute; left:300px; top:150px; width:200px; height:200px; z-index:2; visibility: hidden;"><img src="Images/France.gif" alt="France Map" width="200" height="200" border="0" usemap="#franceMap">
  <map name="franceMap">
    <area shape="rect" coords="39,57,176,159" href="#" onMouseOver="MM_setTextOfLayer('mapText','','%3Ch2 %3EFrance%3C/h2%3E%0D%0A%3Cp%3EAh, France. What can we say. The food is exquisite!%3C/p%3E ')" onMouseOut="MM_setTextOfLayer('mapText','','')">
  </map>
</div>
<div id="italyMap" style="position:absolute; left:300px; top:150px; width:200px; height:200px; z-index:3; visibility: hidden;"><img src="Images/Italy.gif" width="200" height="200" border="0" usemap="#italyMap">
  <map name="italyMap">
    <area shape="rect" coords="5,26,99,102" href="#" onMouseOver="MM_setTextOfLayer('mapText','','%3Ch2 %3ENorthern Italy%3C/h2%3E%0D%0A%3Cp%3ENorthern Italian cuisine is influenced by many cultures. It%27s rich soil gives us fine wines, cultured cheeses, and mob bosses. Wha%27s-a-matta-wit-chew, huh?%3C/p%3E')" onMouseOut="MM_setTextOfLayer('mapText','','')">
    <area shape="rect" coords="102,57,167,136" href="#" onMouseOver="MM_setTextOfLayer('mapText','','%3Ch2 %3ESouthern Italy%3C/h2%3E%0D%0A%3Cp%3EThe cuisine of Southern Italy is characterized by olives, ripe tomatoes, and citrus fruits. Just don%27t double cross Vinnie, or you%27ll end up at the bottom of the Mediterranean.%3C/p%3E ')" onMouseOut="MM_setTextOfLayer('mapText','','')">
  </map>
</div>


...apparently causes the onClick attribute of the regMenu code, which previously worked, to quit functioning in IE 6. regMenu code:


<div id="regMenu" style="position:absolute; left:350px; top:100px; width:415px; height:35px; z-index:4; visibility: visible;"><img src="Images/italyButton.gif" alt="Italy" width="136" height="31" onClick="MM_showHideLayers('usaMap','','hide','fra nceMap','','hide','italyMap','','show','regMenu',' ','show','mapText','','show')"><img src="Images/usaButton.gif" alt="USA" width="136" height="31" onClick="MM_showHideLayers('usaMap','','show','fra nceMap','','hide','italyMap','','hide','regMenu',' ','show')"><img src="Images/frenchButton.gif" alt="France" width="136" height="31" onClick="MM_showHideLayers('usaMap','','hide','fra nceMap','','show','italyMap','','hide','regMenu',' ','show')"></div>
<div id="mapText" style="position:absolute; left:535px; top:175px; width:275px; height:200px; z-index:5; visibility: visible;"></div>


Sincerely,
Donner9x

Hi Donner9x,

I am sorry I haven't responded earlier. I have been pretty busy at work *and* I am currently switching over to a new system, so I do not have an environment where I can test stuff, or load your sample files in Dreamweaver.

I hope I can take a look at this somewhere during the weekend, and maybe even sooner. Don't feel left alone.... ;)

Cheers,

Imar

Imar,
No problem! I understand you must certainly be busy. :)

Since the referenced page works in the other browser I have installed, I am able to continue on in the book. Would be curious to find out at some point, what the trouble is in IE 6 though.

Thanks for your help,
Donner9x

Hi Donner9x,

Today I finally got the time to response (I received my preordered copy of Doom III yesterday so I was *really* busy ;) )

Anyway, it took some time to figure out the problem. but I think I have tracked it down. Take a look at the definition for a map (I left out some code to make it easier to read).

As you can see, the outer <div> has an id of usaMap. But the inner <map> element also has a name of usaMap. In XHTML, all elements in a page need a unique ID; no two elements can have the same id attribute. Since the <div> uses an id, but the <map> uses a name attribute, there is no problem in browsers like Firefox (where I tested this in).
However, apparently, IE sees the name of an element as its id, when there is no ID present. So, when the code runs, IE doesn't really know what element you're referring to.

I fixed it as follow:

1. I renamed the three <div> tags by appending Outer to their ID: 2. I changed the code that calls MM_showHideLayers so the new ids are passed to that method: Now when you click one of the three countries, all browsers can successfully distinguish between the outer <div> tags and the inner <map> tags.

HtH,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

Imar,
Thank you very much for your help.

I applied the <div> tag changes in the code within the project, and found that indeed this corrected the apparent shortcoming with Internet Explorer 6. I have also made a note of it for future reference.

Excellent! :)

Your time and assistance is greatly appreciated!!

Keep up the good work.

Sincerely,
Donner9x