benf — Wed, 13 Jun 2007 10:06:59 +0000

Is there no way javascript can look at the current URL and match it to a link in the menu bar changing the style of that link?

Maybe a little complicated, just that im using a CMS and have no idea where the PHP is that generates the HTML.

Maybe parse the innerHTML of the specific

then parse the

and then parse the looking for the URL??

webwiz — Wed, 13 Jun 2007 00:12:41 +0000

Quote: How can i make the background change on a link when you are on that actual page?

Umm. I thought that was in the solution I offered... ?

Cordially, David.
--

timjpriebe — Tue, 12 Jun 2007 13:17:10 +0000

I believe you're asking how to assign CSS properties when a link is the current page. Something like the current page's hyperlink in the menu being bright red, while the rest are black. That sort of thing, right?

As far as I know, the only way to do that is with scripting. The last time I did something like that, I had to use PHP. I created a class for the link that was the current page, then used PHP to determine which of the links used that class.

It might look something like this...

<li><a <?php
if (ereg('index.php',$_SERVER['PHP_SELF']))
{
echo 'class="currentpage" ';
}
?>href="index.php">Main</a></li>

demonhale — Tue, 12 Jun 2007 01:30:02 +0000

You can assign background properties for the link, visited and hover, that way, when you're on the page the background is retained whether the link is clicked or not... you can assign a separate BG for the hover if you like so when your mouse is over the link, the BG changes colours...

/*retains same link and bg color for active, regular, visited */
a:link, a:active, a:visited {
color: #FF0000;
background: #000000;
}

/* assigns different bg and text color for hover */
a:hover {
color: #00FF00;
background: #c00000;
}

or you can simply use a wrapper div and assign a background to the wrapper that holds your links...

benf — Mon, 11 Jun 2007 23:46:49 +0000

What im trying to say is, a:active only works when you actually hold down the mouse key on the link (it is active) not when the link you press and are on that page. For example, you click on home.html (the actual link, a tag) and hold it down, the background will change, becuase it is active. However when you are actually on home.html the background will not show???

How can i make the background change on a link when you are on that actual page?

webwiz — Mon, 11 Jun 2007 05:23:51 +0000

I'm not exactly sure what you mean:

Quote: Im trying to figure out how i can set a background image for a link when you are on the current page???

Do you want to add a background image just to a link when it's a link to the current page, and not otherwise?

For that, you could use a special class, say 'class="here";' and style a.here with the background image you want to use. Another way of styling a site navigation, where, say, you are including the same code for the navigation on every page, you could do something like this:

HTML

CSS
#sitenav a {background: #fff none; ...}
.home .homelink a {background-image: url(images/here-bg.png);}
.about .aboutlink a {background-image: url(images/here-bg.png);}
.contact .contactlink a {background-image: url(images/here-bg.png);}

But this may be totally inappropriate. Can you give us a page to look at, and a description of how you want it to work?

Cordially, David
(whose sig keeps vanishing)

teammatt3 — Mon, 11 Jun 2007 01:14:19 +0000

a:active is "active" when you're on that page *but* you have to make sure that a:active comes after a:hover

http://www.w3schools.com/css/css_pseudo_classes.asp <- More there

Quote: a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {background: blah} /* selected link */