Link to home
Start Free TrialLog in
Avatar of scangroup
scangroup

asked on

How do I create a navigation button where it stays on its down state when it is on that page?

I have a navigation bar with image buttons and it has rollovers, goes from light to dark.  Once you click on the link and it goes to that page.  I want the button to be on the down state, until you leave that page.  I can manually change the button per page.  But there has got to be a better way of doing this.  I am sending a code snippet.
<tr>
				<td><a href="#"
				onmouseover="changeImages('leftnav', 'images/leftnav_01-over.jpg'); return true;"
				onmouseout="changeImages('leftnav', 'images/leftnav.jpg'); return true;"
				onmousedown="changeImages('leftnav', 'images/leftnav_01-over.jpg'); return true;"
				onmouseup="changeImages('leftnav', 'images/leftnav_01-over.jpg'); return true;"><img name="leftnav" src="images/leftnav.jpg" width="239" height="65" border="0" alt="Litho Printing and Finishing"></a></td>
			</tr>

Open in new window

Avatar of Zvonko
Zvonko
Flag of North Macedonia image

Your href does reference to same page. How do you decide what page name to go?
You will need to change the code for the image tag.  If you use a server script then you can have it look at the file name and automatically do this (i.e. one set of menu script would work for all pages) but the end result is the same.  There is no other end result that will do this.
If you need details then please let us know what server language/technology you use.  Also let us see the html or server code for that part of the page.  As the expert above pointed out the code snippet above doesn't even show the page changes based on the menu item selected.  If all "pages" shown by the menu are on the same physical page then please provide more details.  You could do what you want still but the details will be a little different.
bol
This should hopefully do it, if you have questions, just ask.

The Javascript should go just following your <a> tag like the below example. Follow the instructions within the script itself. You will have to change the names of the pages and image locations in each array.


<tr>
                                <td><a href="#"
                                onmouseover="changeImages('leftnav', 'images/leftnav_01-over.jpg'); return true;"
                                onmouseout="changeImages('leftnav', 'images/leftnav.jpg'); return true;"
                                onmousedown="changeImages('leftnav', 'images/leftnav_01-over.jpg'); return true;"
                                onmouseup="changeImages('leftnav', 'images/leftnav_01-over.jpg'); return true;"><img name="leftnav" src="images/leftnav.jpg" width="239" height="65" border="0" alt="Litho Printing and Finishing"></a>
<script type="text/javascript">
/* Set up an array of the names of your web site's pages.
   This should just be the actual page file name.
  (add as many as you need):
*/
var pages=new Array(
    'index.html',
    'print.html',
    'about.html',
    'etc.html'
);
 
// Set up the array of the corresponding down state nav images
var nav_imgs=new Array(
    'images/home_nav_over.jpg',
    'images/print_nav_over.jpg',
    'images/about_nav_over.jpg',
    'images/etc_nav_over.jpg'
);
 
// Get the page being shown, if none, assume it's home page:
var Page=self.location.href.toString().split('/');
Page=Page[Page.length-1];
 
if(Page==''||Page==pages[0]){
    // it's the home page so show Home page nav image:
    document.images['leftnav'].src=nav_imgs[0];
}
else{
 
/* It's not the home page, so find which page is
   being shown and adjust the nav down state image:
*/
 
   for(var i=0;i<pages.length;i++){
       if(Page==pages[i]){
           document.images['leftnav'].src=nav_imgs[i];
       }
   }
}
</script>
</td>
                        </tr>

Open in new window

Avatar of scangroup
scangroup

ASKER

Here is the full page with the javascript.  Do I still create an array inside the script, or create a separate one.
<html>
<head>
<title>leftnav72dpi</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<script type="text/javascript" name="leftnav">
<!--
 
function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}
 
function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}
 
var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		leftnav_01_over = newImage("images/leftnav_01-over.jpg");
		leftnav_02_over = newImage("images/leftnav_02-over.jpg");
		leftnav_03_over = newImage("images/leftnav_03-over.jpg");
		leftnav_04_over = newImage("images/leftnav_04-over.jpg");
		leftnav_05_over = newImage("images/leftnav_05-over.jpg");
		leftnav_06_over = newImage("images/leftnav_06-over.jpg");
		leftnav_07_over = newImage("images/leftnav_07-over.jpg");
		leftnav_08_over = newImage("images/leftnav_08-over.jpg");
		preloadFlag = true;
	}
}
 
// -->
</script>
		<csscriptdict>
			<script type="text/javascript"><!--
function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}
 
// --></script>
		</csscriptdict>
		<csactiondict>
			<script type="text/javascript"><!--
var preloadFlag = true;
 
// --></script>
		</csactiondict>
	</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
		<table id="Table_01" width="191" height="485" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<td><a href="#"
				onmouseover="changeImages('leftnav_01', 'images/leftnav_01-over.jpg'); return true;"
				onmouseout="changeImages('leftnav_01', 'images/leftnav_01.jpg'); return true;"
				onmousedown="changeImages('leftnav_01', 'images/leftnav_01-over.jpg'); return true;"
				onmouseup="changeImages('leftnav_01', 'images/leftnav_01-over.jpg'); return true;"><img name="leftnav_01" src="images/leftnav_01.jpg" width="191" height="52" border="0" alt=""></a></td>
			</tr>
			<tr>
				<td><a href="#"
				onmouseover="changeImages('leftnav_02', 'images/leftnav_02-over.jpg'); return true;"
				onmouseout="changeImages('leftnav_02', 'images/leftnav_02.jpg'); return true;"
				onmousedown="changeImages('leftnav_02', 'images/leftnav_02-over.jpg'); return true;"
				onmouseup="changeImages('leftnav_02', 'images/leftnav_02-over.jpg'); return true;"><img name="leftnav_02" src="images/leftnav_02.jpg" width="191" height="51" border="0" alt=""></a></td>
			</tr>
			<tr>
				<td><a href="#"
				onmouseover="changeImages('leftnav_03', 'images/leftnav_03-over.jpg'); return true;"
				onmouseout="changeImages('leftnav_03', 'images/leftnav_03.jpg'); return true;"
				onmousedown="changeImages('leftnav_03', 'images/leftnav_03-over.jpg'); return true;"
				onmouseup="changeImages('leftnav_03', 'images/leftnav_03-over.jpg'); return true;"><img name="leftnav_03" src="images/leftnav_03.jpg" width="191" height="52" border="0" alt=""></a></td>
			</tr>
			<tr>
				<td><a href="#"
				onmouseover="changeImages('leftnav_04', 'images/leftnav_04-over.jpg'); return true;"
				onmouseout="changeImages('leftnav_04', 'images/leftnav_04.jpg'); return true;"
				onmousedown="changeImages('leftnav_04', 'images/leftnav_04-over.jpg'); return true;"
				onmouseup="changeImages('leftnav_04', 'images/leftnav_04-over.jpg'); return true;"><img name="leftnav_04" src="images/leftnav_04.jpg" width="191" height="55" border="0" alt=""></a></td>
			</tr>
			<tr>
				<td><a href="#"
				onmouseover="changeImages('leftnav_05', 'images/leftnav_05-over.jpg'); return true;"
				onmouseout="changeImages('leftnav_05', 'images/leftnav_05.jpg'); return true;"
				onmousedown="changeImages('leftnav_05', 'images/leftnav_05-over.jpg'); return true;"
				onmouseup="changeImages('leftnav_05', 'images/leftnav_05-over.jpg'); return true;"><img name="leftnav_05" src="images/leftnav_05.jpg" width="191" height="52" border="0" alt=""></a></td>
			</tr>
			<tr>
				<td><a href="#"
				onmouseover="changeImages('leftnav_06', 'images/leftnav_06-over.jpg'); return true;"
				onmouseout="changeImages('leftnav_06', 'images/leftnav_06.jpg'); return true;"
				onmousedown="changeImages('leftnav_06', 'images/leftnav_06-over.jpg'); return true;"
				onmouseup="changeImages('leftnav_06', 'images/leftnav_06-over.jpg'); return true;"><img name="leftnav_06" src="images/leftnav_06.jpg" width="191" height="52" border="0" alt=""></a></td>
			</tr>
			<tr>
				<td><a href="#"
				onmouseover="changeImages('leftnav_07', 'images/leftnav_07-over.jpg'); return true;"
				onmouseout="changeImages('leftnav_07', 'images/leftnav_07.jpg'); return true;"
				onmousedown="changeImages('leftnav_07', 'images/leftnav_07-over.jpg'); return true;"
				onmouseup="changeImages('leftnav_07', 'images/leftnav_07-over.jpg'); return true;"><img name="leftnav_07" src="images/leftnav_07.jpg" width="191" height="51" border="0" alt=""></a></td>
			</tr>
			<tr>
				<td><a href="#"
				onmouseover="changeImages('leftnav_08', 'images/leftnav_08-over.jpg'); return true;"
				onmouseout="changeImages('leftnav_08', 'images/leftnav_08.jpg'); return true;"
				onmousedown="changeImages('leftnav_08', 'images/leftnav_08-over.jpg'); return true;"
				onmouseup="changeImages('leftnav_08', 'images/leftnav_08-over.jpg'); return true;"><img name="leftnav_08" src="images/leftnav_08.jpg" width="191" height="53" border="0" alt=""></a></td>
			</tr>
			<tr>
				<td><img src="images/leftnav_09.jpg" width="191" height="46" alt=""></td>
			</tr>
			<tr>
				<td><img src="images/leftnav_10.jpg" width="191" height="21" alt=""></td>
			</tr>
		</table>
	</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of b0lsc0tt
b0lsc0tt
Flag of United States of America 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
scangroup,

I believe my comment built on the other expert's comment (http:#a22413614).  If you agree that both were part of your solution then this should be split.  If you meant to do that but just made a mistake when closing then please let me know.  If you don't know what I mean by splitting then let me know.

If you disagree and feel my comment had all you need then please at least post to state that and explain.  Since this was abandoned by you it seems you may have just accepted the last comment and I just got lucky.  That isn't the way a question should be closed.

bol