Solved

Show down stage

Posted on 2004-08-26
15
128 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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
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…
Get a first impression of how PRTG looks and learn how it works.   This video is a short introduction to PRTG, as an initial overview or as a quick start for new PRTG users.
This demo shows you how to set up the containerized NetScaler CPX with NetScaler Management and Analytics System in a non-routable Mesos/Marathon environment for use with Micro-Services applications.

758 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

21 Experts available now in Live!

Get 1:1 Help Now