I'm trying to create some navigation buttons with images (that swap to another image when the images is clicked - ie changes to active state). I want to be able to control these using PHP.

 

All the examples I have seen seem to use text rather than images for this.

 

So is the correct way to do it with Javascript with something like:

 

<td><a href="#" target="_top" onClick="MM_nbGroup('down','group1','news2','images/news.jpg',1)" onMouseOver="MM_nbGroup('over','news2','images/news2.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img name="news2" src="images/news.jpg" border="0" alt="news" onLoad=""></a></td>

 

And insert (somewhere with the other PHP):

<?php if(isset($_GET['news'])){ echo 'class="active"';}?>

 

Any help would be greatly appreciated, I have not used PHP before and my CSS is pretty poor too.

 

Thanks

If you want to change link appearance using css, put the button image as a background image to the link.

In its simplest form, it would look like this:

a { /*the default link background image*/]
background: url(path/to/image1);
}
a:visited { /*this occurs when the link has already been visited*/
background: url(path/to/image2);
}
a:hover { /*this occurs when the link is hovered over*/
background: url(path/to/image3);
}
a:active { /*this occurs when the link is clicked*/
background: url(path/to/mage4);
}

 

I'm not sure what you mean when you say 'control these using php'.

Are they in an included php file?

Are you intending to have these links dynamically inserted into the page?

this would be your php code.

<a href="#" <?php if(isset($_GET['news'])){ echo 'class="active"';}?></a>

 

and then you can simply do your css like this

 

.active:link , .active:visited {
background-image: url(images/news2.jpg);
}

 

I'm guessing your sending a variable with the url to set the button to active. As it happens to be i just wrote a little tutorial on an easy way to create active state buttons with php / css

 

http://www.webdesignerforum.co.uk/index.ph...amp;#entry49120

 

Might be helpfull, well gl with your menu

.active:link , .active:visited {
background-image: url(images/news2.jpg);
}

 

I just want to double check that I can use a different active jpg for each button. I have seen code similar to this and I thought it was just using the same image to highlight the button. So below are an example of the 2 images, new.jpg will be the non active state and news2.jpg will be the active state (remember I also have 6 other buttons about.jpg/about2.jpg, contact.jpg/contact2.jpg etc etc). So can the above code be repeated for each different version of the button?

 

That is, do I have to define in the CSS when to use the above code for each button?

 

 

 

Thanks so far ... was getting severe cold sweats before ...

If you want diffrent images for each button you need to define diffrent classes for each button. for example if you have news and a home button it would look like this.

 

php:

<a href="#" <?php if(isset($_GET['home'])){ echo 'class="active_home"';}?></a>
<a href="#" <?php if(isset($_GET['news'])){ echo 'class="active_news"';}?></a>

 

CSS:

.active_news:link , .active_news:visited {
background-image: url(images/news2.jpg);
}

.active_home:link , .active_home:visited {
background-image: url(images/home2.jpg);
}

 

You can expand this to any number of buttons. You just need to make sure to give it all the proper naming.

 

hope this helps gl

you are fantastic.

 

Thank you both ...

there's few way to do that, here's the one using php

 

if($page == 'home'){
print "YOUR HOME-OVER-BTN.JPG";
} else {
print "<a href="#" target="_top" onClick="MM_nbGroup('down','group1','news2','images/news.jpg',1)" onMouseOver="MM_nbGroup('over','news2','images/news2.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img name="news2" src="images/news.jpg" border="0" alt="news" onLoad=""></a>";
}

Thanks Kenv

 

That's great too.

Still having a little trouble: I've tried to insert the code without much success. This is what I have at the moment more or less although it is over a number of 'inserted' files:

 

<?php #index.php

session_start();

 

$page_title = 'Main Title'; # defult page title

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

 

<title><?php echo $page_title; ?></title>

<link rel="stylesheet" href="includes/mainstyle.css" type="text/css" media="screen" />

 

</head>

<body>

 

 

?>

 

 

 

<div class="ts_6"><a href="index.php"><img src="images/news.jpg" border="0" ></a></div>

<div class="ts_7"><a href="artists.php"><img src="images/artists.jpg" border="0" ></a></div>

<div class="ts_8"><a href="industry.php"><img src="images/industry.jpg" border="0" ></a></div>

<div class="ts_9"><a href="gigs.php"><img src="images/gigs.jpg" border="0" ></a></div>

<div class="ts_10"><a href="reviews.php"><img src="images/reviews.jpg" border="0" ></a></div>

<div class="ts_11"><a href="about.php"><img src="images/about.jpg" border="0"></a></div>

<div class="ts_12"><a href="competition.php"><img src="images/competition.jpg" border="0" ></a></div>

 

 

 

And I have put into the styles (mainstyles.css) sheet:

 

.active_news:link ,

.active_news:visited {

background-image: url(images/news2.jpg);

}

 

.active_artists:link , .active_artists:visited {

background-image: url(images/artists2.jpg);

 

}

.active_industry:link , .active_industry:visited {

background-image: url(images/industry2.jpg);

}

.active_gigs:link , .active_gigs:visited {

background-image: url(images/gigs2.jpg);

}

.active_reviews:link , .active_reviews:visited {

background-image: url(images/reviews2.jpg);

}

.active_about:link , .active_about:visited {

background-image: url(images/about2.jpg);

}

.active_competitions:link , .active_competitions:visited {

background-image: url(images/competitions2.jpg);

}

 

Could you help me insert either of the codes above to make the buttons work (switch when active)?

Still can't get it to work, so I've tried to aproach it differently but still not working. I think this only needs a few tweaks to get it working:

 

each page has (news, about etc) has

$page_title = 'news';

 

 

And I'm trying to add this so it knows which picture to show. It unfortunantly is showing news2.jpg all the time even when I navigate to 'news' or 'about' etc:

 

<?php if ($page_title = 'news'){

echo '<a href="index.php"><img src="images/news2.jpg" border="0" ></a>';

}else{

echo '<a href="index.php"><img src="images/news.jpg" border="0" ></a>';

}

?>

 

Can anyone help?

Just do this for each of your categories.

 

<?php
if ($page_title == 'news') {
$newsactive = '2';
}
echo '<a href="index.php"><img src="images/news'.$newsactive.'.jpg" border="0" ></a>';
?>

<?php

if ($page_title == 'about') {
$aboutactive = '2';
}
echo '<a href="index.php"><img src="images/about'.$aboutactive.'.jpg" border="0" ></a>';
?>

 

and so on

I knew I was close. After looking at you code all I needed to do was change the = to == in:

 

($page_title == 'news')

 

And it works well.

 

Thanks again ... big time...