PDA

View Full Version : How can I show/hide an image based on the url

Westside2004
06-03-2005, 03:44 AM
Hi,

I have this navigation that I am trying to sort of self-contain and encapsulate into one file so I can include it in all pages. It has some basic roll over images. Example:

3 links (images) all blue by default except if the user is on the page then the link is active

Home (link is orange) *user is on this page so link is orange (over state)*
About Us (link is blue)
Services (link is blue)

So if the user clicks the "About Us" link, then it turns "orange" and the other links turn blue". I can do this with some server side technique, but I am trying to use javascript.

if the page is www.abc.com/aboutus then the "about us link (image)" should know it should be in its "over state" basically orange. This holds true for all the links.

Hope I am making sense.

-Westside
_Aerospace_Eng_
06-03-2005, 04:00 AM
Hopefully this script will get you going in the right direction. Its done with links but its the same concept.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Active link set</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#container {
width:90px;
background:#000;
padding:10px 0px 10px 10px;
margin:20px;
}
#container a {
display:block;
width:90px;
height:40px;
font-family:verdana;
font-size:16px;
color:#f00;
}
-->
</style>

<script type="text/javascript">
<!--
function doStuff(el) {

var links=document.getElementsByTagName("a");
for(i=0;i<links.length;i++) {
if(links[i].className=="white") {
links[i].style.color="#f00";
}
}
el.style.color="#fff";
}
//-->
</script>

</head>
<body>

<div id="container">
<a class="white" href="#" onclick="doStuff(this)" onfocus="this.blur()">link one</a>
<a class="white" href="#" onclick="doStuff(this)" onfocus="this.blur()">link two</a>
<a class="white" href="#" onclick="doStuff(this)" onfocus="this.blur()">link three</a>
<a class="white" href="#" onclick="doStuff(this)" onfocus="this.blur()">link four</a>
</div>

<div>
<a href="#">link five will not be affected</a>
</div>

</body>
</html>