a:active or "How to let users know where they are" — OZONE Asylum, home of the Mad Scientists

CSS - DOM - XHTML - XML - XSL - XSLT

a:active or "How to let users know where they are"

This page's ID: 27406

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Just thought I'd share this with everyone. I wanted to make the links on a site I did, show something different according to which page the user was viewing. There is the a:active but it works kind of clunky with different browsers. So here is what I did. I pull in the different pages with a php->Switch statement. (I've been a fond user of this since reading WarMage's tut at [url=http://www.gurusnetwork.com/tutorial/php_templates/]Guru's[/url]) In my index.php page I have statements like this: [code] switch ($_GET['link']){ /for the about page/ case 'about': $page="pages/aboutus.php"; $title="About Us"; break; case 'contact': $page="pages/contactus.php"; $title="Contact Us"; break; default: $page = "pages/digital.php"; $title = "Home"; } [/code] I then added to each one of these pages another variable, so I have this: [code] switch ($_GET['link']){ case 'about': $page="pages/aboutus.php"; $title="About Us"; $bodyLink="about"; break; case 'contact': $page="pages/contactus.php"; $title="Contact Us"; $bodyLink="contact"; break; default: $page = "pages/digital.php"; $title = "Home"; $bodyLink="home"; } [/code] Now with that, I add to my index.php page this to the body tag: [code] <body class=" <? echo $bodyLink ?> " > [/code] For the links that are going to have the different background, I have something like this as my menu: [code] <div id="leftMenu"> <ul> <li><a accessky="1" class="l1" href="/about/">About Us</a></li> <li><a accessky="2" class="l2" href="/contact/">Contact Us</a></li> </ul> </div> [/code] [small]I am also using .htaccess to mask the links and make those purty URL's[/small] Lastly, in the CSS sheet I have this : [code] body.about #leftMenu a.l1, body.contact #leftMenu a.l2{ background-image:url(../imgs/active.jpg); color:#fff; } [/code] Now, what is going to happen is, when the user clicks on the "About Us" link, it pulls in the page for "About Us" and it also adds the class "about" to the body tag. The CSS reads this and changes the link background to the "active.jpg" that is in the "imgs" directory. Just thought I'd share this with you. Not sure if anyone can use it but hey...it's here :p Later, C:\ [img]http://www.danasoft.com/sig/cprompt.jpg[/img] [small](Edited by [url=http://www.ozoneasylum.com/user/1079]CPrompt[/url] on 01-28-2006 23:45)[/small] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu