• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 160
  • Last Modified:

Show down stage

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
Isaac
Asked:
Isaac
  • 8
  • 7
1 Solution
 
radnorCommented:
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
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
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
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Help please. 500 pts
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
radnorCommented:
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
 
radnorCommented:
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
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
The site is http://capitalphotoimaging.com/photoservices.htm
Your sample you have is exactly what I need.
0
 
radnorCommented:
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
 
radnorCommented:
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
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Could you zip it and send it. I think that is better for me.
Thanks
0
 
radnorCommented:
addy?
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Thanks for your help.
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
It doesn't say much in the view source.
0
 
radnorCommented:
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
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Can you send it to mazuna79@hotmail.com
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Thanks got it.
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 8
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now