Page 1 of 1

PHP menu with images displaying current state

Posted: Sat Nov 13, 2010 5:19 pm
by kushty
]Hi everyone, I have trying to search for a way to make my navigation menu using images, to display a different image when on that particular page.

for e.g: user click on 'events' page, the button displaying events will change to a different image but the only difference is that it will have a tick beside it (using my own made image).

here is my code ( i am only starting out with php and would like to use php through out my site):

menu navigation

Code: Select all

<!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>

<link rel="stylesheet" href="styles.css" type="text/css">
<title>|Youth Seva Group|</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>
<body style="background-color:#FFFFFF;">

<div id="table_01">
	<div id="sideLeft_">
		<img id="sideLeft" src="images/sideLeft.jpg" width="79" height="768" alt="sideleft" />
	</div>
	<div id="krishna_">
		<img id="krishna" src="images/krishna.jpg" width="155" height="227" alt="Krishna" />
	</div>
	<div id="logo_">
		<img id="logo" src="images/logo.jpg" width="597" height="138" alt="Logo" />
	</div>
	<div id="hanuman_">
		<img id="hanuman" src="images/hanuman.jpg" width="175" height="227" alt="Hanuman" />
	</div>
	<div id="sideRight_">
		<img id="sideRight" src="images/sideRight.jpg" width="79" height="768" alt="sideright" />
	</div>
	<div id="ysg-06_">
		<img id="ysg_06" src="images/ysg_06.gif" width="1" height="768" alt="" />
	</div>
	<div id="saiBaba_">
		<img id="saiBaba" src="images/saiBaba.jpg" width="78" height="89" alt="SaiBaba" />
	</div>
	<div id="home_">
		<a href="index.php"><img id="home" src="images/home.gif" width="151" height="25" alt="Home"   /> </a>
	</div>
	<div id="om_">
		<img id="om" src="images/om.jpg" width="131" height="76" alt="Om" />
	</div>
	<div id="ysg-10_">
		<img id="ysg_10" src="images/ysg_10.gif" width="1" height="76" alt="" />
	</div>
	<div id="donations_">
		<a href="donations.php"><img id="donations" src="images/donations.gif" width="151" height="25" alt="Donations" /></a>
	</div>
	<div id="ysg-12_">
		<img id="ysg_12" src="images/ysg_12.gif" width="85" height="89" alt="" />
	</div>
	<div id="events_">
		<a href="events.php"><img id="events" src="images/events.gif" width="151" height="22" alt="Events" /> </a>
	</div>
	<div id="bhajans_">
		<a href="bhajans.php"><img id="bhajans" src="images/bhajans.gif" width="151" height="22" alt="Bhajans" /></a>
	</div>
	<div id="ysg-15_">
		<img id="ysg_15" src="images/ysg_15.gif" width="151" height="29" alt="" />
	</div>
	<div id="ysg-16_">
		<img id="ysg_16" src="images/ysg_16.gif" width="151" height="29" alt="" />
	</div>
	<div id="ysg-17_">
		<img id="ysg_17" src="images/ysg_17.gif" width="6" height="13" alt="" />
	</div>
	<div id="aboutus_">
		<img id="aboutus" src="images/aboutus.gif" width="211" height="24" alt="About Us" />
	</div>
	<div id="resposibilities_">
		<img id="resposibilities" src="images/resposibilities.gif" width="211" height="24" alt="Resposibilities" />
	</div>
	<div id="ysg-20_">
		<img id="ysg_20" src="images/ysg_20.gif" width="6" height="13" alt="" />
	</div>
	<div id="lineLeft_">
		<img id="lineLeft" src="images/lineLeft.gif" width="239" height="5" alt="Line Left" />
	</div>
	<div id="lineRight_">
		<img id="lineRight" src="images/lineRight.gif" width="266" height="5" alt="Line Right" />
	</div>
	

</body>
</html>
CSS

Code: Select all

#table_01 {
	position: relative;
	text-align: center;
	width: 1068px;
	height: 0px;
	margin: 0px auto;
}

#sideLeft_ {
	position:absolute;
	left:0px;
	top:0px;
	width:79px;
	height:768px;
}

#krishna_ {
	position:absolute;
	left:79px;
	top:0px;
	width:155px;
	height:227px;
}

#logo_ {
	position:absolute;
	left:234px;
	top:0px;
	width:597px;
	height:138px;
}

#hanuman_ {
	position:absolute;
	left:831px;
	top:0px;
	width:175px;
	height:227px;
}

#sideRight_ {
	position:absolute;
	left:1006px;
	top:0px;
	width:79px;
	height:768px;
}

#ysg-06_ {
	position:absolute;
	left:1085px;
	top:0px;
	width:1px;
	height:768px;
}

#saiBaba_ {
	position:absolute;
	left:234px;
	top:138px;
	width:78px;
	height:89px;
}

#home_ {
	position:absolute;
	left:312px;
	top:138px;
	width:151px;
	height:25px;
}

#om_ {
	position:absolute;
	left:463px;
	top:138px;
	width:131px;
	height:76px;
}

#ysg-10_ {
	position:absolute;
	left:594px;
	top:138px;
	width:1px;
	height:76px;
}

#donations_ {
	position:absolute;
	left:595px;
	top:138px;
	width:151px;
	height:25px;
}

#ysg-12_ {
	position:absolute;
	left:746px;
	top:138px;
	width:85px;
	height:89px;
}

#events_ {
	position:absolute;
	left:312px;
	top:163px;
	width:151px;
	height:22px;
}

#bhajans_ {
	position:absolute;
	left:595px;
	top:163px;
	width:151px;
	height:22px;
}

#ysg-15_ {
	position:absolute;
	left:312px;
	top:185px;
	width:151px;
	height:29px;
}

#ysg-16_ {
	position:absolute;
	left:595px;
	top:185px;
	width:151px;
	height:29px;
}

#ysg-17_ {
	position:absolute;
	left:312px;
	top:214px;
	width:6px;
	height:13px;
}

#aboutus_ {
	position:absolute;
	left:318px;
	top:214px;
	width:211px;
	height:24px;
}

#resposibilities_ {
	position:absolute;
	left:529px;
	top:214px;
	width:211px;
	height:24px;
}

#ysg-20_ {
	position:absolute;
	left:740px;
	top:214px;
	width:6px;
	height:13px;
}

#lineLeft_ {
	position:absolute;
	left:79px;
	top:227px;
	width:239px;
	height:5px;
}

#lineRight_ {
	position:absolute;
	left:740px;
	top:227px;
	width:266px;
	height:5px;
}

#logIn_ {
	position:absolute;
	left:79px;
	top:232px;
	width:111px;
	height:33px;
}

#register_ {
	position:absolute;
	left:190px;
	top:232px;
	width:112px;
	height:33px;
}

#ysg-25_ {
	position:absolute;
	left:302px;
	top:232px;
	width:16px;
	height:27px;
}

#ysg-26_ {
	position:absolute;
	left:740px;
	top:232px;
	width:266px;
	height:49px;
}

#ysg-27_ {
	position:absolute;
	left:318px;
	top:238px;
	width:422px;
	height:21px;
}

#ysg-28_ {
	position:absolute;
	left:302px;
	top:259px;
	width:10px;
	height:22px;
}

#sayings_ {
	position:absolute;
	left:312px;
	top:259px;
	width:76px;
	height:22px;
}

#ysg-30_ {
	position:absolute;
	left:388px;
	top:259px;
	width:352px;
	height:22px;
}

#ysg-31_ {
	position:absolute;
	left:79px;
	top:265px;
	width:48px;
	height:16px;
}

#memberBenefits_ {
	position:absolute;
	left:127px;
	top:265px;
	width:114px;
	height:11px;
}

#ysg-33_ {
	position:absolute;
	left:241px;
	top:265px;
	width:61px;
	height:16px;
}

#ysg-34_ {
	position:absolute;
	left:127px;
	top:276px;
	width:114px;
	height:5px;
}

#content_ {
	position:absolute;
	left:79px;
	top:281px;
	width:927px;
	height:487px;
}
a:active
{
outline: none;
}

a:focus
{
-moz-outline-style: none;
}

img{

border:0px;
}

#navigation #currentpage a {
	background: #fff;
	color: #333;
	}
#navigation a:hover {
	color: #333;
	}
events.php

Code: Select all

<?php include 'headerplusmenu.php'; ?>
<?php include 'login.php'; ?>
<?php include 'sayings.php'; ?>
<?php include 'main.php'; ?>


<div id="content_">
<p>THE EVENTS PAGE</p>
</div>

i would like to do it for each of my menu buttons in the navigation but using 'events' as an example.