how to? - Change image on page based on URL?

marthirial · Jan 20, 2007

I am sure this is simple but I can't find a way to do this.

Basically I have a page with a tabbed menu. When the page loads for the first time, "home" tab is selected. The visitors click "about us" tab and a new page comes up with the about us content, but "home" is now selected again.

How do I set the tab images src based on the url of the page?

Or is there another variable I can use to let set the image based on the kind of content I am displaying.

Thanks.

kaht · Jan 22, 2007

I would suggest not using javascript to do this. There is a neat trick you can use in CSS to achieve this affect. Assign an id to the <body> tag in each of your pages. Make each id unique from file to file that explanatory of what page it is. Since each file should only have one <body> tag, each id you assign will be unique from file to file. Now, set up your files and css something like this:

(note that I assume you are importing the CSS file, but I put it directly into the code example for ease of explanation)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript"></script>
<style type="text/css">

ul#navigation li {
   background:url(someBackgroundImage.jpg) top left no-repeat;
}

body#bodyMain li#navMain {
   background:url(selectedBackgroundImage.jpg) top left no-repeat;
}

body#bodyContact li#navContact {
   background:url(selectedBackgroundImage.jpg) top left no-repeat;
}

</style>
</head>
<body id="bodyMain">

<ul id="navigation">
   <li id="navMain">
      <a href="main.html">Main Page</a>
   </li>
   <li id="navContact">
      <a href="contact.html">Contact Us</a>
   </li>
</ul>

</body>
</html>

The above example would be for the main page. As you can see from the CSS, when the body has an id of bodyMain you assign the "selected" navigation background to the li with an id of navMain (this is assuming you have set up your navigation as an unordered list - which you should have). Then, when loading a page that has a body tag with an id of bodyContact, the navContact li instead gets the selected background image.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

kaht · Jan 26, 2007

marthirial, did this help?

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

marthirial · Jan 26, 2007

Yes, it did on static pages. Thank you.

Now considering that part of my system is CMS-based, the body tag ID is defined by the CMS template, so even if the content changes, the Body ID won't.

But I guess i can use any other tag ID combined with your CSS strategy.

I will try later on and see if it works.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

how to? - Change image on page based on URL?

marthirial

IS-IT--Management

kaht

Programmer

kaht

Programmer

marthirial

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor