Link to home
Start Free TrialLog in
Avatar of tkanz
tkanz

asked on

reamweaver, layers, different instructions with in the layers, not working (rollover, page chaning)

Hello.  I am working on site that was due Friday.  My Boss is freaking out because he had promised his clients it would be up and running and they would be looking at it for the information.  My problem is that he wants a rollover for information,aslo with a page connection, also with a click on the picture for a page connection.  I cannot get it to work with behaviors.  I have the rollovers but cannon get the connection to the pages.  I have one layer with the pic title, one layer inside that layer for the "click here", and the picture also needs a click here to go to another page.  Like I said the rollover is working the other two are not.
Please help.  I want to get at least this doen today.  Pleeeeeeeeeese.   This is so important to keeping my job.
Thank you soooooooooooo much.
Avatar of dodge20
dodge20

Paste you page code so we can help you.  Also what do you mean by connection to the pages?
Avatar of tkanz

ASKER

Okay.  I am sorry.  I mean linking to the other pages.  Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index.gif</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
td img {display: block;}
.style1 {
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      color: #0000B9;
}
.style3 {
      color: #0000A0;
      font-weight: bold;
      font-family: Arial, Helvetica, sans-serif;
}
.style12 {font-size: xx-small}
#morinfometer {
      position:absolute;
      left:550px;
      top:231px;
      width:151px;
      height:17px;
      z-index:5;
}
.style15 {color: #0000A0; font-weight: bold; font-size: x-small; }
.style16 {color: #0000A0; font-weight: bold; font-size: xx-small; }
.style17 {font-size: small}
.style18 {color: #0000A0}
#Layer1 {
      position:absolute;
      left:584px;
      top:394px;
      width:109px;
      height:13px;
      z-index:6;
}
#Layer2 {
      position:absolute;
      left:469px;
      top:615px;
      width:85px;
      height:12px;
      z-index:7;
}
#Layer3 {
      position:absolute;
      left:159px;
      top:549px;
      width:105px;
      height:14px;
      z-index:8;
}
#Layer4 {
      position:absolute;
      left:439px;
      top:618px;
      width:115px;
      height:14px;
      z-index:9;
}
#Layer5 {
      position:absolute;
      left:0px;
      top:0px;
      width:320px;
      height:250px;
      z-index:9;
}
#Layer6 {
      position:absolute;
      left:420px;
      top:243px;
      width:137px;
      height:206px;
      z-index:10;
}
#Layer7 {
      position:absolute;
      left:466px;
      top:498px;
      width:227px;
      height:162px;
      z-index:11;
}
#Layer8 {
      position:absolute;
      left:184px;
      top:491px;
      width:213px;
      height:146px;
      z-index:12;
}
#Layer9 {
      position:absolute;
      left:416px;
      top:221px;
      width:42px;
      height:21px;
      z-index:13;
}
#Layer10 {
      position:absolute;
      left:352px;
      top:232px;
      width:150px;
      height:222px;
      z-index:13;
}
#Layer11 {
      position:absolute;
      left:581px;
      top:435px;
      width:125px;
      height:168px;
      z-index:14;
}
#Layer12 {
      position:absolute;
      left:200px;
      top:449px;
      width:166px;
      height:151px;
      z-index:15;
}
</style>
<!--Fireworks 8 Dreamweaver 8 target.  Created Fri Mar 16 21:18:42 GMT-0400 (Eastern Daylight Time) 2007-->
<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_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_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; }
}
//-->
</script>
</head>
<center>
<body bgcolor="#ffffff" onload="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide');MM_showHideLayers('morinfometer','','hide','Layer1','','hide','Layer2','','hide','Layer3','','hide','meter','','hide','cuff','','hide','scale','','hide','cradle','','hide')">
<div id="morinfometer" onclick="MM_showHideLayers('morinfometer','','show','Layer1','','hide','meter','','hide','cuff','','hide','scale','','hide','cradle','','hide')" onload="MM_showHideLayers('morinfometer','','hide','Layer1','','hide','meter','','hide','cuff','','hide','scale','','hide','cradle','','hide')"></div>
<div id="Layer1" onclick="MM_showHideLayers('Layer1','','show','meter','','hide','cuff','','hide','scale','','hide','cradle','','hide')" onload="MM_showHideLayers('morinfometer','','hide','Layer1','','show','meter','','hide','cuff','','hide','scale','','hide','cradle','','hide')"></div>
<div id="Layer2" onclick="MM_showHideLayers('morinfometer','','hide','Layer1','','hide','Layer2','','show','meter','','hide','cuff','','hide','scale','','show','cradle','','hide')"></div>
<div id="Layer3" onclick="MM_showHideLayers('morinfometer','','hide','Layer1','','hide','Layer2','','hide','Layer3','','hide','meter','','hide','cuff','','show','scale','','hide','cradle','','hide')"></div>
<div id="Layer5"></div>
<div id="Layer6" onclick="MM_showHideLayers('morinfometer','','hide','Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer5','','hide','Layer6','','hide','meter','','hide','cuff','','hide','scale','','hide','cradle','','hide')"></div>
<div id="Layer7" onclick="MM_showHideLayers('morinfometer','','hide','Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer5','','hide','Layer6','','hide','Layer7','','hide','Layer8','','hide','Layer10','','hide','Layer12','','hide','meter','','show','cuff','','hide','scale','','hide','cradle','','hide')">
  <pre onclick="MM_showHideLayers('morinfometer','','hide','Layer1','','hide','Layer2','','hide','Layer3','','hide')"><a href="meter.htm"></a></pre>
</div>
<div id="Layer8" onclick="MM_showHideLayers('morinfometer','','hide','Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer5','','hide','Layer6','','hide','Layer7','','hide','Layer8','','hide','meter','','hide','cuff','','hide','scale','','hide','cradle','','hide')"></div>
<div id="Layer10" onclick="MM_showHideLayers('morinfometer','','hide','Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer5','','hide','Layer7','','hide','Layer8','','hide','Layer10','','hide','Layer12','','hide','meter','','hide','cuff','','hide','scale','','hide','cradle','','hide')"></div>
<div id="Layer12"></div>
/*
<div id="meter" style="position:absolute; left:434px; top:224px; width:338px; height:77px; z-index:1" onmouseload="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide')" onmouseover="MM_showHideLayers('meter','','show','cuff','','hide','scale','','hide','cradle','','hide')">
  <div align="center" class="style1">
    <p align="center" class="style15"><span class="style17">Eclipse Glucose Meter</span><br />
      <span class="style12">click for more information</span></p>
    <h4 align="right" class="style16">&nbsp;</h4>
    <h4 align="right"> <span class="style12">
      <!--



-->
      <!--



-->
      <!--



-->
      <!--



-->
    </span></h4>
  </div>
</div>
<!--



-->
*/
<div id="cuff" style="position:absolute; left:120px; top:522px; width:200px; height:61px; z-index:2" onload="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide')" onmouseover="MM_showHideLayers('Layer1','','show','Layer2','','hide','Layer3','','hide','Layer4','','hide')">
  <div align="center">
    <p class="style3"><span class="style17">Eclipse Portable Blood <br />
      Pressure Cuff</span><br />
      <br />
      <span class="style12">click for more information</span></p>
    <p>&nbsp; </p>
  </div>
</div>
<div id="scale" style="position:absolute; left:661px; top:460px; width:137px; height:52px; z-index:3" onmouseover="MM_showHideLayers('morinfometer','','hide','Layer1','','hide','meter','','hide','cuff','','hide','scale','','show','cradle','','hide')" onload="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','show','Layer4','','hide');MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide');MM_showHideLayers('morinfometer','','hide','Layer1','','hide','meter','','hide','cuff','','hide','scale','','hide','cradle','','hide')" onclick="MM_showHideLayers('morinfometer','','hide','Layer1','','hide','Layer2','','hide','Layer3','','hide')">  
  <div align="center" class="style3"><span class="style17">Eclipse Thermo<br />
    Weight Scale</span><br />
    <span class="style12">click for more information</span></div>
</div>
<div id="cradle" style="position:absolute; left:461px; top:345px; width:317px; height:82px; z-index:4" onmouseover="MM_showHideLayers('morinfometer','','hide','Layer1','','hide','Layer2','','hide','Layer3','','hide','meter','','hide','cuff','','hide','scale','','hide','cradle','','show')" onload="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide');MM_showHideLayers('morinfometer','','hide','Layer1','','hide','Layer2','','hide','Layer3','','hide','meter','','hide','cuff','','hide','scale','','hide','cradle','','hide')">
  <div align="right" class="style3">
    <div align="center"><span class="style17">Eocene Cradle<br />
  &quot;Virtual Tracker&quot;</span><br />
      <span class="style12">click for more information</span></div>
  </div>
</div>
<table border="0" cellpadding="0" cellspacing="0" width="800">
<!-- fwtable fwsrc="SITE.png" fwbase="index.gif" fwstyle="Dreamweaver" fwdocid = "268983115" fwnested="0" -->
  <tr>
   <td><img src="images/spacer.gif" width="184" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="432" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="182" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>

  <tr>
   <td colspan="5"><img name="index_r1_c1" src="images/index_r1_c1.gif" width="800" height="171" border="0" id="index_r1_c1" usemap="#m_index_r1_c1" alt="" />
     <map name="m_index_r1_c1" id="m_index_r1_c1">
       <area shape="poly" coords="336,159,497,159,497,430,336,430,336,159" href="javascript:;" alt="" />
     </map></td>
   <td><img src="images/spacer.gif" width="1" height="171" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="5"><img name="index_r2_c1" src="images/index_r2_c1.gif" width="800" height="39" border="0" id="index_r2_c1" usemap="#m_index_r2_c1" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="39" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="5"><img name="index_r3_c1" src="images/index_r3_c1.gif" width="800" height="22" border="0" id="index_r3_c1" usemap="#m_index_r3_c1" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="22" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="index_r4_c1" src="images/index_r4_c1.gif" width="184" height="35" border="0" id="index_r4_c1" alt="" /></td>
   <td rowspan="8"><img name="index_r4_c2" src="images/index_r4_c2.gif" width="1" height="386" border="0" id="index_r4_c2" usemap="#m_index_r4_c2" alt="" /></td>
   <td rowspan="8" colspan="2"><div align="right"><img name="index_r4_c3" src="images/index_r4_c3.gif" width="433" height="386" border="0" id="index_r4_c3" usemap="#m_index_r4_c3" alt="" />
       <map name="m_index_r4_c3" id="m_index_r4_c3" onmouseover="MM_showHideLayers('Layer1','','show','Layer2','','hide','Layer3','','hide','Layer4','','hide');MM_showHideLayers('Layer1','','hide','Layer2','','show','Layer3','','hide','Layer4','','hide');MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','show','Layer4','','hide');MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','show')">
         <area shape="poly" coords="147,-88,308,-88,308,183,147,183,147,-88" href="javascript:;" alt="" onmouseover="MM_showHideLayers('meter','','show','cuff','','hide','scale','','hide','cradle','','hide');MM_showHideLayers('morinfometer','','hide','Layer1','','hide','Layer2','','hide','Layer3','','hide','meter','','hide','cuff','','hide','scale','','hide','cradle','','show')" />
         <area shape="poly" coords="357,180,452,239,348,406,253,346,357,180" href="javascript:;" alt="" onclick="MM_showHideLayers('morinfometer','','hide','Layer1','','hide','meter','','hide','cuff','','hide','scale','','show','cradle','','hide')" onmouseover="MM_showHideLayers('morinfometer','','hide','Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer5','','hide','Layer6','','hide','meter','','hide','cuff','','hide','scale','','show','cradle','','hide')" />
         <area shape="poly" coords="-34,264,65,162,196,288,96,390,-34,264" href="javascript:;" alt="" onclick="MM_showHideLayers('morinfometer','','hide','Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer5','','hide','Layer6','','hide','meter','','hide','cuff','','hide','scale','','hide','cradle','','hide')" onmouseover="MM_showHideLayers('morinfometer','','hide','Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer5','','hide','Layer6','','hide','Layer7','','hide','Layer8','','hide','Layer10','','hide','Layer11','','hide','Layer12','','hide','meter','','hide','cuff','','show','scale','','hide','cradle','','hide')" />
       </map>
   </div></td>
   <td><div align="right"><img name="index_r4_c5" src="images/index_r4_c5.gif" width="182" height="35" border="0" id="index_r4_c5" alt="" /></div></td>
   <td><img src="images/spacer.gif" width="1" height="35" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="index_r5_c1" src="images/index_r5_c1.gif" width="184" height="10" border="0" id="index_r5_c1" alt="" /></td>
   <td><div align="right"><img name="index_r5_c5" src="images/index_r5_c5.gif" width="182" height="10" border="0" id="index_r5_c5" alt="" /></div></td>
   <td><img src="images/spacer.gif" width="1" height="10" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="index_r6_c1" src="images/index_r6_c1.gif" width="184" height="34" border="0" id="index_r6_c1" alt="" /></td>
   <td><div align="right"><img name="index_r6_c5" src="images/index_r6_c5.gif" width="182" height="34" border="0" id="index_r6_c5" alt="" /></div></td>
   <td><img src="images/spacer.gif" width="1" height="34" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="index_r7_c1" src="images/index_r7_c1.gif" width="184" height="8" border="0" id="index_r7_c1" alt="" /></td>
   <td><div align="right"><img name="index_r7_c5" src="images/index_r7_c5.gif" width="182" height="8" border="0" id="index_r7_c5" alt="" /></div></td>
   <td><img src="images/spacer.gif" width="1" height="8" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="index_r8_c1" src="images/index_r8_c1.gif" width="184" height="34" border="0" id="index_r8_c1" alt="" /></td>
   <td><div align="right"><img name="index_r8_c5" src="images/index_r8_c5.gif" width="182" height="34" border="0" id="index_r8_c5" alt="" /></div></td>
   <td><img src="images/spacer.gif" width="1" height="34" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="index_r9_c1" src="images/index_r9_c1.gif" width="184" height="8" border="0" id="index_r9_c1" alt="" /></td>
   <td><div align="right"><img name="index_r9_c5" src="images/index_r9_c5.gif" width="182" height="8" border="0" id="index_r9_c5" alt="" /></div></td>
   <td><img src="images/spacer.gif" width="1" height="8" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><a href="index.htm"><img name="index_r10_c1" src="images/index_r10_c1.gif" width="184" height="34" border="0" id="index_r10_c1" alt="" /></a></td>
   <td><div align="right"><img name="index_r10_c5" src="images/index_r10_c5.gif" width="182" height="34" border="0" id="index_r10_c5" usemap="#m_index_r10_c5" alt="" /></div></td>
   <td><img src="images/spacer.gif" width="1" height="34" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="index_r11_c1" src="images/index_r11_c1.gif" width="184" height="223" border="0" id="index_r11_c1" usemap="#m_index_r11_c1" alt="" />
     <map name="m_index_r11_c1" id="m_index_r11_c1">
       <area shape="poly" coords="150,111,249,9,380,135,280,237,150,111" href="javascript:;" alt="" />
     </map></td>
   <td><div align="right"><img name="index_r11_c5" src="images/index_r11_c5.gif" width="182" height="223" border="0" id="index_r11_c5" usemap="#m_index_r11_c5" alt="" />
       <map name="m_index_r11_c5" id="m_index_r11_c5">
         <area shape="poly" coords="-12,5,83,64,-21,231,-116,171,-12,5" href="javascript:;" alt="" onclick="MM_showHideLayers('morinfometer','','hide','Layer1','','hide','Layer2','','hide','Layer3','','hide')" />
       </map>
   </div></td>
   <td><img src="images/spacer.gif" width="1" height="223" border="0" alt="" /></td>
  </tr>
</table>
<map name="m_index_r2_c1" id="m_index_r2_c1">
<area shape="poly" coords="363,1,524,1,524,272,363,272,363,1" href="javascript:;" alt="" onmouseover="MM_showHideLayers('meter','','show','cuff','','hide','scale','','hide','cradle','','hide')" />
</map>
<map name="m_index_r3_c1" id="m_index_r3_c1">
<area shape="poly" coords="319,-36,480,-36,480,235,319,235,319,-36" href="javascript:;" alt="" onmouseover="MM_showHideLayers('morinfometer','','show','meter','','show','cuff','','hide','scale','','hide','cradle','','hide')" />
</map>
<map name="m_index_r4_c2" id="m_index_r4_c2">
<area shape="poly" coords="-34,274,65,172,196,298,96,400,-34,274" href="javascript:;" alt="" />
</map>
<map name="m_index_r10_c5" id="m_index_r10_c5">
<area shape="poly" coords="-55,26,40,85,-64,252,-159,192,-55,26" href="javascript:;" alt="" />
</map>
</body></center>

</html>
Could you please post a link to an active page so that I can see the whole page with images inside?

Thanks!
Avatar of tkanz

ASKER

C:\Documents and Settings\Dominic\Desktop\infopia_eocene\index.htm

I had to wait until I got into work.  Sorry.  Thanks if you can do anything, Rouchie.  I am hiding in my office with my door closed.
Okay now can you explain what you would like to happen.  What should I be seeing if it all worked perfectly?
Avatar of tkanz

ASKER

the buttons are not linking and the images are not linking to the pages.

Thanks
Well there are quite a few problems to fix here, and we can only do it one step at a time, so here goes...

First, make sure the CENTER tags are INSIDE the BODY tags, so:

   <center>
   <body...>

becomes:

   <body...>
   <center>

and this also applies at the end of the page too.

Then to get your buttons to link to a page, you need to make them into hyperlinks.  Highlight each image then go INSERT > HYPERLINK and key in the page you want each button to link to.

When you've done those 2, upload the new page so I can then sort the next bit out...
Avatar of tkanz

ASKER

Thanks, Okay. the pictures are linking.  But the buttons aren't.  I
Also, Can I link the words, for info click here to the page as well? Put another layer? When tried to link them the words came up in the square and I couldn't get them to match or link up.
Thanks again
Your CENTER tag is still outside the body tag...

<center>
<body bgcolor="#ffffff" onload="...
 ...
 ...
</body></center>

Secondly, your approach for making the text appear will not work because all your content is positioned in the center of the page.  The TOP and LEFT style attributes position the text from the top-left of the screen, but because everyone uses different screen resolutions these numbers will never be the same on different computers so the text appears in odd places.

Instead you should create a blank DIV item inside a new row underneath what you already have.  Then use Dreamweaver's behaviours to fill that blank with text, rather than using seperate divs that hold the text.  Because the new blank area is fixed into position inside the table, then it will always appear in the correct place.

The downside here though is that the text won't appear next to each button, rather it will appear always at the bottom of the page.
Avatar of tkanz

ASKER

Yeah, he doesn't want that. I'll just try and move the text closer to the image and hope he'll be happy with that.  The hot spots are not going to the pages on the cuff and the cradle of the meter. They were.

I will check the centers again.  I noticed when I F12'd them just before I came in again.  I am going to check again though.  
You are saving my life, by the way.
Avatar of tkanz

ASKER

Okay. there was another page that wasn't centered. Uh. I refreshed the file.
ASKER CERTIFIED SOLUTION
Avatar of Rouchie
Rouchie
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of tkanz

ASKER

Thank you so much, Rouchie. You have help me plenty.  I got the cradle and meter working.  I did not have any page up for the cradle yet.  But at least something is up.

Do you have any idea why it loads so choppy?  It's not the first time it's happened.
Then you will be done with me until now.  :)
Avatar of tkanz

ASKER

OK.  I can tell you did something because they are not chopping other than the ones I haven't put up.
I know you are going to tell me something that is way to far over my head.  But go ahead anyway
Sorry, I don't know what you mean by 'choppy'!

I promise I'll keep it simple... :-)