Coding Articles & Tutorials

bfsog · July 24 '05, 03:40 PM (#1)

In this tutorial, I will show you how to change an image, such as your header image, or an image which tells the user what page they are on.

For instance, if your site is of personal nature, your links could be "Home", "Contact", "About" and "Images"

Your site visitor enters through the Home Page, and goes to the Images page, would it be uber to change a certain image? I will show you how.

[What you need to know]

1: The basics of PHP, and a little (X)HTML

[Step 1]

First of all, if you have not done so already, on all the pages that you want to have this effect on, add an <img> tag. Set that img's src to $image

[Step 2]

Then, somewhere in the <head></head> section of all the pages that you want to see this effect on, copy the following code.

PHP Code:


			
<?php

<?php

// if $_GET['view'] is not set it means the user has just came to your home page, so set $image to 'home.gif'



    if(isset($_GET['view'])) { $curpage = $_GET['view'];}

    else { $image = "home.gif"; }

    if($curpage=="about") { $image = "about.gif"; }

    if($curpage=="contact") { $image = "contact.gif"; }

    if($curpage=="images") { $image = "images.gif"; }

    if ($curpage=="home") { $image = "home.gif"; }

    ?>

What that code does is checks which page is being viewed, and from that information sets a variable called $image to a different image.

Here is the final step.

[Step 3]

There is just one more thing to do, and that is to alter your navigational links

Lets say your links were something like:

PHP Code:


			
<a href="index.php" title="Home">Home</a> - <a href="contact.php" title="Contact Me">Contact</a>

And so on, you will have to change them to..

PHP Code:


			
<a href="index.php?view=home" title="Home">Home</a> - <a href="index.php?view=contact" title="Contact Me">Contact</a>

And thats that. If you followed my advice correctly, when you go from page to page, the image should reflect the page you are viewing.

[Other Information]

The method I used for this, was to have 1 page, called index.php which shows different information based on the ?view variable, as well as a different image.

If you need any help implementating it, please Private Message through here.

John Oliver · August 3 '05, 09:26 AM (#2)

Thanks, V Good Tutorial.

**Shadowfiend** · August 3 '05, 04:14 PM (#3)

I hadn't noticed this tutorial, but now I see it, I think the if... thens are excessive. You could do it this way, instead:

PHP Code:


			
    $curPage = $_GET['view'];



    switch( $curPage )

    {

        case 'about':

            $image = 'about.gif';

            break;

        case 'contact':

            $image = 'contact.gif';

            break;

        case 'images':

            $image = 'images.gif';

            break;

        case 'home': // optional

        default:

            $image = 'home.gif';

    }

Now, granted, this is a bit longer; however, I think it's more understandable due to the usage of a construct meant to handle multiple possibilities easily (switch) instead of one best used to handle a few (if/elseif). In addition, you can handle the default case of using home.gif using the default section of the switch statement, and in the same stroke eliminate the need for checking $curPage == 'home', since either case does the same thing.

Personal opinion, of course.

bfsog · August 4 '05, 06:58 AM (#4)

Indeed. I wrote this code for this guy I know, so I didnt fine tune it but yes, switch case is better.

Coding Articles & Tutorials

[PHP] How to show a different image depending on current page