PDA

Click to See Complete Forum and Search --> : code for navigation images

bpagan
10-28-2003, 08:38 PM
I'm trying to locate code that can do the following:

There is a standard left nav on all pages. In this nav there are images, that are rollovers. I want to have this section of code as an include file, but have the Java change the image based on the location of the file.

Ideally what I would like happen is when a user is on a page the corresponding nav image would resort to its highlighted state. (i.e. similar to bolding, but with images).

For example, if on the left nav there are the images "contact us", "about us", and "benefits"; and a user clicks on benefits (they go to the location where benefits.html is housed), and thus causes the image "benefits" to change to the highlighted state.

Thanks for any help.
agminer
10-28-2003, 09:17 PM
If you are not using frames then it would be easy to set the button. In frames you could stuff an image from the called page.

Don't know the code right now though.
bpagan
10-29-2003, 05:53 AM
not using frames, any thoughts?
agminer
10-29-2003, 09:46 AM
If your not using frames them set the default image in the menu for the "highlighted" one on the page you are on. Should be easy. I have seen where you don.t even have the option of clicking on the "self" button (just used as a place holder/indicator).

Here is code I used for a menu in frames. Just remove the target, wich will cause the page to be replaced.

<body background="22bg.jpg" bgcolor="#FFFFFF" onLoad="doPreload();">
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="135">
<tr>
<td align="right">
<a href="21home.htm" target="Main" onMouseOver="document.button_home.src='13home2.jpg';" OnMouseOut="document.button_home.src='13home1.jpg';"><img border="0" src="13home1.jpg" name="button_home" width="130" height="35" alt=""></a>
</td>
</tr>
<tr>
<td align="right">
<a href="wedding/31home.htm" target="Main" onMouseOver="document.button_wed_m.src='13wed_m2.jpg';" OnMouseOut="document.button_wed_m.src='13wed_m1.jpg';"><img border="0" src="13wed_m1.jpg" name="button_wed_m" width="130" height="35" alt=""></a>
</td>

</tr>
<td align="right">
<img border="0" src="13mid_m1.jpg" name="button_mid" width="130" height="35" alt="">
</td>
</tr>


</table>
</center>
</div>
<script language="JavaScript">
<!-- Hide script

function doPreload() {


var the_images=new Array('13home2.jpg','13wed_m2.jpg'');
preloadImages(the_images);
}

function preloadImages(the_images_array) {
for (var loop =0; loop < the_images_array.length; loop++)

{
var an_image = new Image();
an_image.src = the_images_array[loop];
}

}
// show-->

</script>

Third <tr> would be a fixed button.
bpagan
10-29-2003, 12:45 PM
Do you have a sample of what it should look like? i.e. a page I can look at perhaps?
agminer
10-29-2003, 03:44 PM
This one uses frames but the idea is there except for the button staying highlighted.

www.etcphoto.com

If need be I could extract the code and set something up temp.
bpagan
10-29-2003, 04:18 PM
Looks good, except the issue I'm having is that I want what ever page the user is on to tell the left nav that that page title should be highlighted (i.e. the image rollover state).

The directory structure is pretty simple and I'm pretty sure there's a Java rule that I can find to do the following:

EXAMPLE:
All speech documents will be housed in a directory called
/new/speeches/index.php
/new/speeches/document_001.php
/new/speeches/document_002.php
/new/speeches/document_003.php
etc.

If a user calls a page within /new/speeches/*.* than the speeches image (on the left nav) would be, for example, speeches_off.gif, the highlighted state.

I did something similar with text only. Left nav text would be bold if user was on a page with ID="sample_ID" In the above exmaple I would take all the files within a directory, i.e. /new/speeches/*.*, sample_ID

Sorrta make sence?

Thoughts?