Solved

Show down stage

Posted on 2004-08-26
15
131 Views
Last Modified: 2010-04-25
I created some buttons in fireworks and I placed it in dreamweaver. My problem is trying to show the down image when the a page is selected. Example:
When you enter the home page the down image will show for home button. The up images will show for the about us and contact. Then when you enter the about us page, the about us  down image will show and so on.

Thanks in advance.
0
Comment
Question by:Isaac
  • 8
  • 7
15 Comments
 
LVL 8

Expert Comment

by:radnor
ID: 11914938
OK this will do what you want....  If you are on the HOME page, you will see the DOWN STATE of that button.  If you mouse over to say CONTACT US, you will see the UP STATE on the HOME button and the DOWN STATE  for the contact us button.  If you slide off of the CONTACT US button it will go back to the UP state and the HOME will go back to the DOWN STATE.

You will need to change the buttons (images) AND MUST define 2 variables BEFORE calling this (I have it in a JS file).  1 var MUST be "intMenuItems" and the other is "intCurrentItem".  The intCurrentItem var MUST be changed for EACH page. This defines which button is in the DOWN STATE.

---------------------------------   START OF JS FILE --------------------------
//
// This MUST have a variable defined OUTSIDE of this
// script with the name of "intCurrentItem"
//

if (document.images) {

  var aboutoff = new Image();
  aboutoff.src = "images/aboutoff.gif";
  var abouton = new Image();
  abouton.src = "images/abouton.gif";

  var servicesoff = new Image();
  servicesoff.src = "images/servicesoff.gif";
  var serviceson = new Image();
  serviceson.src = "images/serviceson.gif";

  var locationoff = new Image();
  locationoff.src = "images/locationoff.gif";
  var locationon = new Image();
  locationon.src = "images/locationon.gif";

  var calendaroff = new Image();
  calendaroff.src = "images/calendaroff.gif";
  var calendaron = new Image();
  calendaron.src = "images/calendaron.gif";

  var catalogoff = new Image();
  catalogoff.src = "images/catalogoff.gif";
  var catalogon = new Image();
  catalogon.src = "images/catalogon.gif";

  var specialsoff = new Image();
  specialsoff.src = "images/specialsoff.gif";
  var specialson = new Image();
  specialson.src = "images/specialson.gif";

}

var arrMenuItems = new Array (" ", "about", "services", "location", "calendar", "catalog", "specials");
  var defImg = arrMenuItems[intCurrentItem];

function actMenuItem(imgName) {
  act(imgName);
  inact(defImg);
}

function inactMenuItem(imgName) {
  inact(imgName);
  act(defImg);
}

function act(imgName) {
  if (document.images)
    document.images[imgName].src = eval(imgName + "on.src");
}

function inact(imgName) {
  if (document.images)
    document.images[imgName].src = eval(imgName + "off.src");
}

document.write("<img src='images/cap.gif' alt='cap' border='0'>");
for (a=1;a<intMenuItems;a++) {
      document.write("<A href='" + strMenuURL[a] + "'");
      if (a!=intCurrentItem) {
            document.write(" onMouseOver=" + '"' + "actMenuItem('" + arrMenuItems[a] + "')" + '"');
            document.write(" onMouseOut=" + '"' + "inactMenuItem('" + arrMenuItems[a] + "')" + '">');
            document.write("<IMG SRC='images/" + arrMenuItems[a] + "off.gif' NAME='"+ arrMenuItems[a] +"' ALT='"+ arrMenuItems[a] + "' BORDER='0'></A>");
      } else {
            document.write("><IMG SRC='images/" + arrMenuItems[a] + "on.gif' NAME='"+ arrMenuItems[a] +"' ALT='"+ arrMenuItems[a] + "' BORDER='0'></A>");
      }
}
0
 
LVL 5

Author Comment

by:Isaac
ID: 11973164
I really don't understand javascript to well. But this is what I have below. How would I put this into javascript.

<tr>
          <td colspan="2"><a href="photoservices.htm" target="_top" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','BUTTONS_r2_c1','../buttons/BUTTONS_r2_c1_f2.gif','../buttons/BUTTONS_r2_c1_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','BUTTONS_r2_c1','../buttons/BUTTONS_r2_c1_f3.gif',1);"><img name="BUTTONS_r2_c1" src="../buttons/BUTTONS_r2_c1.gif" width="98" height="34" border="0" alt=""></a></td>
          <td colspan="2"><a href="tradepop.htm" target="_top" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','BUTTONS_r2_c3','../buttons/BUTTONS_r2_c3_f2.gif','../buttons/BUTTONS_r2_c3_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','BUTTONS_r2_c3','../buttons/BUTTONS_r2_c3_f3.gif',1);"><img name="BUTTONS_r2_c3" src="../buttons/BUTTONS_r2_c3.gif" width="120" height="34" border="0" alt=""></a></td>
          <td colspan="2"><a href="graphicdesign.htm" target="_top" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','BUTTONS_r2_c5','../buttons/BUTTONS_r2_c5_f2.gif','../buttons/BUTTONS_r2_c5_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','BUTTONS_r2_c5','../buttons/BUTTONS_r2_c5_f3.gif',1);"><img name="BUTTONS_r2_c5" src="../buttons/BUTTONS_r2_c5.gif" width="80" height="34" border="0" alt=""></a></td>
          <td colspan="2"><a href="output.htm" target="_top" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','BUTTONS_r2_c7','../buttons/BUTTONS_r2_c7_f2.gif','../buttons/BUTTONS_r2_c7_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','BUTTONS_r2_c7','../buttons/BUTTONS_r2_c7_f3.gif',1);"><img name="BUTTONS_r2_c7" src="../buttons/BUTTONS_r2_c7.gif" width="81" height="34" border="0" alt=""></a></td>
          <td><a href="contact.htm" target="_top" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','BUTTONS_r2_c9','../buttons/BUTTONS_r2_c9_f2.gif','../buttons/BUTTONS_r2_c9_f4.gif',1);" onClick="MM_nbGroup('down','navbar1','BUTTONS_r2_c9','../buttons/BUTTONS_r2_c9_f3.gif',1);"><img name="BUTTONS_r2_c9" src="../buttons/BUTTONS_r2_c9.gif" width="82" height="34" border="0" alt=""></a></td>
          <td background="../images/bkblu.jpg"><img name="BUTTONS_r2_c10" src="../buttons/BUTTONS_r2_c10.gif" width="1" height="34" border="0" alt=""></td>
   <td><img src="../buttons/spacer.gif" width="1" height="34" border="0" alt=""></td>
  </tr>
</table> </td>
  </tr>
</table>
<table width="800" border="0" cellspacing="0" cellpadding="0">
  <tr> <!-- TemplateBeginEditable name="text" -->
    <td>&nbsp;</td>
    <!-- TemplateEndEditable --></tr>
</table>
<table width="800" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td background="../images/bklb.gif"><div align="center">
        <p><font color="#FFFFFF" size="1" face="Arial, Helvetica, sans-serif">&nbsp;&copy;
          Capital Photo &amp; Imaging, Inc.<br>
          Website created by: <a href="http://genuinemd.com"><font color="#6699FF">Genuinemd.com</font></a></font></p>
        </div></td>
  </tr>
0
 
LVL 5

Author Comment

by:Isaac
ID: 11978439
Help please. 500 pts
0
 
LVL 8

Expert Comment

by:radnor
ID: 11980183
Do you have this site up now?  If so, please send me a link.  I want to see what you have and go from there.
0
 
LVL 8

Expert Comment

by:radnor
ID: 11980645
Here is a SAMPLE of what the code will do.

http://www.troop-21.org/testing/q_2118387/about.htm

Now, only the 1st 3 buttons have pages behind them.  But,
ALL items on the nav bar will show you the "down" state
when you mouse over them.
0
 
LVL 5

Author Comment

by:Isaac
ID: 11986446
The site is http://capitalphotoimaging.com/photoservices.htm
Your sample you have is exactly what I need.
0
 
LVL 8

Expert Comment

by:radnor
ID: 11986502
Ok, thanks for the link.  Now I have something to look at while doing this.

Now, new question....  whice site is YOURS?

http://capitalphotoimaging.com/photoservices.htm  -OR-
http://genuinemd.com/

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 8

Expert Comment

by:radnor
ID: 11990448
If you liked my sample, this is just what you are looking for....  http://www.troop-21.org/testing/q_2118387/photoservices.htm

I moved the button gif(s) from the button directory to images (just the way my .JS file is setup).  Also, I renamed them to contacton.gif and contactoff.gif (this goes the the code in the .JS file too).  Besides, it tough to figure out which gif you have when it is named BUTTONS_r1_c5_f2.gif.....

There are several ways you can get this code.....
1.) go to the link, view source, cut and paste
2.) could zip it and send it.
3.) clear the cache, view it, and save files.

It will be up on the link provided for about 1 week.
0
 
LVL 5

Author Comment

by:Isaac
ID: 11993108
Could you zip it and send it. I think that is better for me.
Thanks
0
 
LVL 8

Accepted Solution

by:
radnor earned 500 total points
ID: 11993448
addy?
0
 
LVL 5

Author Comment

by:Isaac
ID: 11996357
Thanks for your help.
0
 
LVL 5

Author Comment

by:Isaac
ID: 11996365
It doesn't say much in the view source.
0
 
LVL 8

Expert Comment

by:radnor
ID: 11996479
Here is a copy of the 1st page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><!-- InstanceBegin template="/Templates/capital.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Capital Photo &amp; Imaging, Inc.</title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- InstanceBeginEditable name="head" --> <!-- InstanceEndEditable -->

</head>

<body>
<img src="images/LOGO.jpg" width="331" height="50" border="0">

<script language="JavaScript" src="menuitems.js" type="text/JavaScript"></script>

************************************
*
*
* this MUST be updated for EACH page.  It controls the DOWN STATE
*
<script language="JavaScript" type="text/JavaScript">
var intCurrentItem = 0;
</script>
*
*
************************************

<script language="JavaScript" src="gifnavbar.js" type="text/JavaScript"></script>

<h1>photoservices</h1>
</body>
<!-- InstanceEnd --></html>


***********************************
*
*
Here is the menuitems.js file
*
***********************************


// JavaScript Document
//
// Number of menu items, descriptions, and URL(s)
//
var intMenuItems = 5;

strMenuDesc = new Array();
strMenuDesc[0] = "[photoservices]";
strMenuDesc[1] = "[tradepop]";
strMenuDesc[2] = "[graphicdesign]";
strMenuDesc[3] = "[output]";
strMenuDesc[4] = "[contact]";

strMenuURL = new Array();
strMenuURL[0] = "photoservices.htm";
strMenuURL[1] = "tradepop.htm";
strMenuURL[2] = "graphicdesign.htm";
strMenuURL[3] = "output.htm";
strMenuURL[4] = "contact.htm";


*************************************
*
*
Here is the GIF nav bar js file
*
*************************************

//
// This MUST have a variable defined OUTSIDE of this
// script with the name of "intCurrentItem"
//

if (document.images) {

  var photooff = new Image();
  photooff.src = "images/photooff.gif";
  var photoon = new Image();
  photoon.src = "images/photoon.gif";

  var tradeoff = new Image();
  tradeoff.src = "images/tradeoff.gif";
  var tradeon = new Image();
  tradeon.src = "images/tradeon.gif";

  var graphicoff = new Image();
  graphicoff.src = "images/graphicoff.gif";
  var graphicon = new Image();
  graphicon.src = "images/graphicon.gif";

  var outputoff = new Image();
  outputoff.src = "images/outputoff.gif";
  var outputon = new Image();
  outputon.src = "images/outputon.gif";

  var contactoff = new Image();
  contactoff.src = "images/contactoff.gif";
  var contacton = new Image();
  contacton.src = "images/contacton.gif";

}

var arrMenuItems = new Array ("photo", "trade", "graphic", "output", "contact");
  var defImg = arrMenuItems[intCurrentItem];

function actMenuItem(imgName) {
  act(imgName);
  inact(defImg);
}

function inactMenuItem(imgName) {
  inact(imgName);
  act(defImg);
}

function act(imgName) {
  if (document.images)
    document.images[imgName].src = eval(imgName + "on.src");
}

function inact(imgName) {
  if (document.images)
    document.images[imgName].src = eval(imgName + "off.src");
}

for (a=0;a<intMenuItems;a++) {
      document.write("<A href='" + strMenuURL[a] + "'");
      if (a!=intCurrentItem) {
            document.write(" onMouseOver=" + '"' + "actMenuItem('" + arrMenuItems[a] + "')" + '"');
            document.write(" onMouseOut=" + '"' + "inactMenuItem('" + arrMenuItems[a] + "')" + '">');
            document.write("<IMG SRC='images/" + arrMenuItems[a] + "off.gif' NAME='"+ arrMenuItems[a] +"' ALT='"+ arrMenuItems[a] + "' BORDER='0'></A>");
      } else {
            document.write("><IMG SRC='images/" + arrMenuItems[a] + "on.gif' NAME='"+ arrMenuItems[a] +"' ALT='"+ arrMenuItems[a] + "' BORDER='0'></A>");
      }
}


Let me know where you want a ZIP file sent to.
0
 
LVL 5

Author Comment

by:Isaac
ID: 11998799
Can you send it to mazuna79@hotmail.com
0
 
LVL 5

Author Comment

by:Isaac
ID: 11999386
Thanks got it.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
mobile friendly link not working 4 265
Webpage Not Working in IE 27 354
JQuery form validation for bootstrap 1 189
What is the better way of creating buttons by using dreamweaver? 4 127
For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
Along with being a a promotional video for my three-day Annielytics Dashboard Seminor, this Micro Tutorial is an intro to Google Analytics API data.
As a trusted technology advisor to your customers you are likely getting the daily question of, ‘should I put this in the cloud?’ As customer demands for cloud services increases, companies will see a shift from traditional buying patterns to new…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now