Where would I put this markup and script

[John Salerno]

Perhaps this is getting a little ahead of myself, but here goes...

The goal: to have a navigation bar on all my pages that consists of
several buttons that link to other pages on my site. For example,
"Home", "Blog" and "Contact".

I'd also like to use some JavaScript to get this functionality: when you
mouseover a button, it changes (and mouseout changes it back). When you
click on it it changes, and once you are on the new page, it is
different from the rest to show that you are on that page.

Now, I know how to do this for one button, and I have found a tutorial
for how to do it with multiple buttons
(http://www.webreference.com/js/column1/multiple.html), but it's not
very complete. I understand the code that is there, but now exactly how
to implement it or where to put it.

I assume that for the navigation bar, I could use a PHP include
statement. But since each page will have a slightly different nav bar
(since the current button will be different), I don't know what to do
from there. Do I simply set up a list of the buttons for each page, like:

<img src="home><img src="blog"><img src="contact">

and then just change the src of whichever image needs to be different?
That would result in three different possible includes. Is there a way
for a PHP script to figure out which page you are on, so you can use the
proper nav bar?

Finally, where would all the JavaScript go?

I guess my ultimate question is, how do I break up these tasks, how many
files do I need to do this, etc. Would I be able to have just a single
file with all these options, and this would be the file I include on
each page?

 

[Barbara de Zoete]

Perhaps this is getting a little ahead of myself, but here goes...

The goal: to have a navigation bar on all my pages that consists of
several buttons that link to other pages on my site. For example,
"Home", "Blog" and "Contact".

[ navbar; hover effects; possible PHP include; but every page is different
]

I guess my ultimate question is, how do I break up these tasks, how many
files do I need to do this, etc. Would I be able to have just a single
file with all these options, and this would be the file I include on
each page?

Why try it so difficult? Google for CSS Rollovers and you'll find yourself
a much more easy way to get the wanted effect.

Here is a first example of a horizontally layed out menu bar (though not
with images; that's not that hard to achieve though):
<URL:http://www.pretletters.net/_test/voorbeeld_horizontaal-menu.html>
And here is a vertically layed out menu using images:
<URL:http://www.pretletters.net/_test/css_rollover_met_images.html>

Don't know about the include, but if, as you state, the nav bar is going
to be different on every page, it seems not possible to me to use an
include.

 

[Mark Parnell]

Deciding to do something for the good of humanity, John Salerno

The goal: to have a navigation bar on all my pages that consists of
several buttons that link to other pages on my site. For example,
"Home", "Blog" and "Contact".

That's pretty standard.

I'd also like to use some JavaScript to get this functionality: when you
mouseover a button, it changes (and mouseout changes it back). When you
click on it it changes,

Why use Javascript?
http://www.designmeme.com/articles/cssrollovers/
http://www.projectseven.com/tutorials/css_menus/list_01/

and once you are on the new page, it is
different from the rest to show that you are on that page.

Ah, now that's the tricky[1] bit.

I assume that for the navigation bar, I could use a PHP include
statement.

Assuming your web server supports PHP, yes.

But since each page will have a slightly different nav bar
(since the current button will be different), I don't know what to do
from there.

Is there a way
for a PHP script to figure out which page you are on,

Look into the $_SERVER variable, e.g. $_SERVER['PHP_SELF'].

Would I be able to have just a single
file with all these options, and this would be the file I include on
each page?

Yep. brucie had a nice example of this at one stage, but it's no longer
around.

[1] Well, not really. Trickier, maybe. The trickiest part of what you
are trying to do, anyway. But still not that tricky.

 

[Greg N.]

Don't know about the include, but if, as you state, the nav bar is
going to be different on every page, it seems not possible to me to use
an include.

Sure it is. The included section just needs to contain a bit of PHP code
that handles links to the active page differently from other links.

 

[John Salerno]

Deciding to do something for the good of humanity, John Salerno

The goal: to have a navigation bar on all my pages that consists of
several buttons that link to other pages on my site. For example,
"Home", "Blog" and "Contact".

That's pretty standard.

I'd also like to use some JavaScript to get this functionality: when you
mouseover a button, it changes (and mouseout changes it back). When you
click on it it changes,

Why use Javascript?
http://www.designmeme.com/articles/cssrollovers/
http://www.projectseven.com/tutorials/css_menus/list_01/

and once you are on the new page, it is
different from the rest to show that you are on that page.

Ah, now that's the tricky[1] bit.

I assume that for the navigation bar, I could use a PHP include
statement.

Assuming your web server supports PHP, yes.

But since each page will have a slightly different nav bar
(since the current button will be different), I don't know what to do
from there.

Is there a way
for a PHP script to figure out which page you are on,

Look into the $_SERVER variable, e.g. $_SERVER['PHP_SELF'].

Would I be able to have just a single
file with all these options, and this would be the file I include on
each page?

Yep. brucie had a nice example of this at one stage, but it's no longer
around.

[1] Well, not really. Trickier, maybe. The trickiest part of what you
are trying to do, anyway. But still not that tricky.

Hmm, that's interesting about CSS rollovers, but I'm not sure it works
in my case. What I plan to do is have a button image that looks pushable
(created in Photoshop with no skill on my part!), and then a separate
image that is depressed, so I think I need JS in this case to switch images.

 

[Nico Schuyt]

Here is a first example of a horizontally layed out menu bar (though
not with images; that's not that hard to achieve though):
<URL:http://www.pretletters.net/_test/voorbeeld_horizontaal-menu.html>
And here is a vertically layed out menu using images:
<URL:http://www.pretletters.net/_test/css_rollover_met_images.html>

Don't know about the include, but if, as you state, the nav bar is
going to be different on every page, it seems not possible to me to
use an include.

In the include:

$page=basename($_SERVER['PHP_SELF']);
if ($page=="index.php"){
echo ""; //Coding for active page
}else{
echo ""; //Code for other page
}

 

[Mark Parnell]

Deciding to do something for the good of humanity, John Salerno

What I plan to do is have a button image that looks pushable
(created in Photoshop with no skill on my part!), and then a separate
image that is depressed, so I think I need JS in this case to switch images.

Not at all. Did you look at the links I gave you?

 

[John Salerno]

Deciding to do something for the good of humanity, John Salerno


Not at all. Did you look at the links I gave you?

I skimmed them, but I plan to go through the tutorial in the second link
soon. If I can do this without JS, then that'd be great, since I haven't
started learning JS yet!

 

[John Salerno]

I skimmed them, but I plan to go through the tutorial in the second link
soon. If I can do this without JS, then that'd be great, since I haven't
started learning JS yet!

Hmmm, I read through the tutorial but I'm still a little confused. The
CSS trick seems to rely on the transparency of the image to change
colors, but not necessarily to make it a different image altogether. I
don't see how that's possible given this tutorial.

Also, is it possible to use CSS to make the "active" link not active
while you are hovering over the others, and only become active again
when the pointer leaves the nav bar?

 

[Mark Parnell]

Deciding to do something for the good of humanity, John Salerno

Hmmm, I read through the tutorial but I'm still a little confused. The
CSS trick seems to rely on the transparency of the image to change
colors, but not necessarily to make it a different image altogether.

The first link does. The second uses different images. By default links
use assets/l1_down.jpg, :hover and :active use assets/l1_over.jpg

Also, is it possible to use CSS to make the "active" link not active
while you are hovering over the others, and only become active again
when the pointer leaves the nav bar?

No. At least, not that I can think of.

 

[David Graham]

Deciding to do something for the good of humanity, John Salerno


That's pretty standard.


Why use Javascript?
http://www.designmeme.com/articles/cssrollovers/
http://www.projectseven.com/tutorials/css_menus/list_01/

Hi
The stuart image at
http://www.designmeme.com/articles/cssrollovers/
has a red outline around it when I download it - I thought it was supposed
to be the red background of the link showing through the transparent parts
of the stuart image. I don't see how this produces an outline anyway -
surely the link is defined as block level in the css and should appear as a
rectangle when hovered over. Confused, could you shed any light on were i'm
not understanding this
thanks
David

 

[Mark Parnell]

Deciding to do something for the good of humanity, David Graham

The stuart image at
http://www.designmeme.com/articles/cssrollovers/
has a red outline around it when I download it

Not here. 1-2px transparent around his head. What image editor are you
opening it in?

I thought it was supposed
to be the red background of the link showing through the transparent parts
of the stuart image.
Correct.

I don't see how this produces an outline anyway -
surely the link is defined as block level in the css and should appear as a
rectangle when hovered over.

Not sure what you mean here. The link is the same size as the image,
since the image is the only thing in it. So if the image wasn't
transparent at all, you would see no difference on hover.

 

[David Graham]

Deciding to do something for the good of humanity, David Graham


Not here. 1-2px transparent around his head. What image editor are you
opening it in?

Hi
PSP 8.0
thanks for looking into this
David

 

[Mark Parnell]

Deciding to do something for the good of humanity, David Graham

PSP 8.0

Looks correct here in Gimp 2.2.9 and Fireworks 4. What browser are you
downloading it in?

 

[David Graham]

Deciding to do something for the good of humanity, David Graham


Looks correct here in Gimp 2.2.9 and Fireworks 4. What browser are you
downloading it in?

hi
Opera
Version 8.51
Build 7712
Platform Win32
System Windows XP

I noticed that the image appears without the red line when I look at it with
'Windows Picture and Fax Viewer'
must be peculiar to PSP 8.0
David Graham

 

[Jonathan N. Little]

David Graham wrote:

hi
Opera
Version 8.51
Build 7712
Platform Win32
System Windows XP

I noticed that the image appears without the red line when I look at it with
'Windows Picture and Fax Viewer'
must be peculiar to PSP 8.0

That is because it does not have a red line in the image! The image is
of the head on an opaque white background, but around the contour of
head is a line of 'transparent' pixels. The red line hover effect is the
result of changing the background-color of the image upon mouse hover
which shows through the transparent pixels of the image with the
appearance of a red line.

If you know what the background color of the page is, then this
technique simulates an image swap without the overhead of downloading
another image.