PHP menu with images displaying current state
Posted: Sat Nov 13, 2010 5:19 pm
]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
CSS
events.php
i would like to do it for each of my menu buttons in the navigation but using 'events' as an example.
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>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;
}
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.