Question

I am currently building a basic website. So far so good, however it’s getting rather cluttered. One reason is that I have a seperate header for each page because I have no script to change buttons when hovering or when the page a button linked to is the current page.

I have these button states:

• ????_selected_idle (active if the button links to the active page)
• ????_selected_hover (active if the button links to the current page AND the user hovers)
• ????_default_idle (normally active)
• ????_default_hover (normally active + hover)

???? can be ‘home’,’about’,’register’,’products’,’contact’

so in total there is 20 images.

Here is what I use now (this is on the ABOUT page):

<td width="173px" Height="103px">
<a href="/index.php">
    <img src="/Images/home_default_idle.jpg" onmouseover="this.src='/Images/home_default_hover.jpg'" onmouseout="this.src='/Images/home_default_idle.jpg'" width="100%" height="100%" border="0" alt="Home selected">
</a>

And here is the same code but on the HOME page.

<td width="173px" Height="103px">
<a href="/index.php">
    <img src="/Images/home_selected_idle.jpg" onmouseover="this.src='/Images/home_selected_hover.jpg'" onmouseout="this.src='/Images/home_selected_idle.jpg'" width="100%" height="100%" border="0" alt="Home selected">
</a>

Any help is much appreciated! If you wish to look at the website here is the link.

• If you visit the page don’t pay to much attention to the content yet, it’s still a WIP.
  EDIT:

---

Right now I have FIVE essential pages.

• Home
• About
• Contact
• Register
• Products

all of these pages have their own headers. THese headers are in seperate files. My goal is to make a single header that applies to all pages.

However, there is a reason I have all these several header files. I have them seperate because the buttons change state depending on which page you are on.

Say you are at the HOME page, the HOME button than is this picture:
– home_selected_idle

If you’d hover over that button it would have to change to:
– home_selected_hover

If you were on the ABOUT page and you’d look at the HOME button it would have to be:
– home_default_idle

If you were to hover over that button it would change to:
– home_default_hover.

Basically my iamge structure is like this:
– pagename_state_mousestate

• pagename
  • home
  • about
  • products
  • register
  • contact
• state
  • default
  • selected
• mousestate
  • idle
  • hover

Answer 1

Ok I will give you a small example in php:

For header link, you are going to want to use CSS rather than an image.

You will want to dynamically change the class of each element like this:

<div class="<? if($_SERVER['PHP_SELF']=="home.php"){echo "selected";}else{echo "ghosted";} ?>" > HOME </div>

You will just copy paste that format for each one. No need for a JQuery lib it’s too simple for that. Just rework your images to be CSS, thats standard anyway, images take to long to load for mouseover events and CSS is more flexible.