Solved

Show down stage

Posted on 2004-08-26
15
145 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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
 
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

Enroll in June's Course of the Month

June’s Course of the Month is now available! Experts Exchange’s Premium Members, Team Accounts, and Qualified Experts have access to a complimentary course each month as part of their membership—an extra way to sharpen your skills and increase training.

Question has a verified solution.

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

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…
There are cases when e.g. an IT administrator wants to have full access and view into selected mailboxes on Exchange server, directly from his own email account in Outlook or Outlook Web Access. This proves useful when for example administrator want…
If you’ve ever visited a web page and noticed a cool font that you really liked the look of, but couldn’t figure out which font it was so that you could use it for your own work, then this video is for you! In this Micro Tutorial, you'll learn yo…

728 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