How do I make a page show the active link?

[benjo]

I was wondering how do I make my pages show you that you are in our about page by having the rollover show the image in it's second state?

By the way I'm using Macromedia MX.

Thanks!

[pageoneresults]

Hello benjo, Welcome to WebmasterWorld!

Unfortunately I don't have an answer for you, but, I thought I'd keep the topic live. I too would like to know how to do this using the a:active element and css.

I believe our only solution is going to be javascript. Let's see if any of the experts jump in and offer some helpful tips.

Here was a recent similar discussion that appears to be somewhat unfinished. I see the javascript solution, but not an actual working example since it was done via sticky.

SSI menu needs to show "active" page [webmasterworld.com]
Giving button for the loaded page a unique background.

I am also using an include method for navigation and would like to have the active state of the css links to be active when visiting that page.

[willybfriendly]

I do it in PHP pretty easily. In the past I did it with JS, but had to hard code every page, which was pretty time intensive. In PHP I just write a short if/else routing that displays the menu bar.

WBF

[ShawnR]

Yes, you can do it in Javascipt. To do it using CSS, see msg number 16 in:

[webmasterworld.com...]

Instead of just different colours, you could have different pictures by using different backgounds e.g.
background: url(whatever.gif);

Shawn

[benjo]

Well this seems like a friendly forum. Thanks for the answers. I'm going to check out what you guys said.

@willybfriendly your solution sounds the best to me so far. I no nothing about PHP so if you can just guide me through this I would highly appreciate it. A tutorial or something would be great a snippet would be ideal.

What I'm actually doing is redesigning the corporate website here and I thought this feature would become very useful as a visual aid in navigation. The site has about 200+ pages and I've set it up with library items in Dreamweaver MX so if I updated the library item it takes affect thought my whole site. The Library item is kept in comment tags so it doesn't generate extra code like FrontPage would.

[benjo]

Oh ShawnR I'm using images as my rollovers. I created a:hover and a:visited states for my text links with a linked style sheet and the only thing I might change is the colors for the redesign. But thanks for your answer I wish I new about you guys sooner your now my #2 bookmark for needed advice. Thanks!

[ShawnR]

Hi Benjo

I didn't mean the roll-overs... I assumed you already had that. I meant use CSS to highlight which is the 'current selection' as well as use it to have a roll-over effect for the other buttons in the menu.

PHP is a good solution as well, though my philosophy is to only use server-side processing for truly dynamic parts of a site. i.e. If it doesn't need to be database-driven, you should be able to distribute the site on a CD, without the need for a web-server.

willybfriendly might have a good suggestion for a php tutorial, and you can also browse around [webmasterworld.com...] and the perl/php forum, and use the site search facility at the top of the page.

Regards
Shawn

[benjo]

ShawnR thanks for the link. Funny how the new guys always post without reading the information already made available. This must be part of human nature. Well I'll research your link here and read on maybe the answer is there.

I saw a link to a CSS crash course that sounds good.

By the way is PHP always a server scripting technology? (I am fully aware this might sound like a stupid question, but it comes with the territory)

[willybfriendly]

benjo - PHP is a server side scripting language. Pretty easy to learn, and opens up many otherwise closed doors.

<?
function menu_bar($title)
{
echo "<TABLE><TR>
if $title == "first anchor text"
echo "first anchor text";
else echo "<TD class=\"menu\"><a href=\"1stanchor.php\" class=\"menu\">>first anchor text</a><TD>";
if $title == "second anchor text"
echo "second anchor text";
else echo "<TD class=\"menu\"><a href=\"2ndanchor.php\" class=\"menu\">>second anchor text</a><TD>";
...etc.
echo "</TR></TABLE>";
}
?>

will create a horizontal menu bar that leaves the current page's link inactive. To use, on the page use

<?
$title = current page title;
*put function here, or in an include*
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>

<title><? echo $title;?></title>

</head>
<body>
<h1><? echo $title;?></H1>
<?
menu_bar($title);
<?

Body of page....
</body>

Note that this places the page title in the title tag, an H1 tag, and displays the "custom" menu bar. And it can be used over and over and over... only changing the title of the page in one line.

PHP is well worth the time to learn at least the basics :)

WBF