image menu and highlight current page

Posted on 2009-04-17
Last Modified: 2012-05-06
Hello experts
I have a working code for image menu.
Now i want to have "highlighted" the current page.In my example i want to use for current page the _over images.
The body id tag is editable to get get values list1 or list 2.
Any help?


<html xmlns="" xml:lang="en" >


<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />

<title> Image Replacement Techniques - Example eight </title>

<meta name="Author" content="Stu Nicholls" />


<style type="text/css">


/* Step 10 - Clearing the float */

#imgmenu {display:block;}


/* Step 3 - get rid of the bullets and margin */

#imgmenu ul {margin:0; padding:0; list-style-type:none;}


/* Step 4 and 7 - make the list horizontal and giving a 1px gap */

#imgmenu li {float:left; margin-right:1px;}


/* Step 5 - Adding the initial images */

#imgmenu li.list1 {

	background-color: transparent;background-image: url(images/foto1.gif);background-repeat: no-repeat;


#imgmenu li.list2 {

	background-color: transparent;background-image: url(images/foto2.gif);background-repeat: no-repeat;


/* Step 6 - General link styling */


#imgmenu a {display:block; width:50px; height:0; padding-top:128px; color:#000; overflow:hidden;}


/* hack for older versions of IE with incorrect box model */


* html #imgmenu a:link, * html #imgmenu a:visited {height:128px; he\ight:0;}


/* Step 8 - Adding the background images to the link tags */


#imgmenu a#item1 {background:transparent url(images/foto1_over.gif) -130px -90px no-repeat;}

#imgmenu a#item2 {background:transparent url(images/foto2_over.gif) -130px -90px no-repeat;}


/* Step 9 - Adding the :hover style */


#imgmenu a#item1:hover {background-position:0 0; z-index:50;}

#imgmenu a#item2:hover {background-position:0 0; z-index:50;}

* html #imgmenu a:hover {height:128px; he\ight:0;}






<body id="list1">

<div id="imgmenu">


<li class="list1"><a id="item1" href="Search.cfm?MSID=2" title="test1">test1</a></li>

<li class="list2"><a id="item2" href="Search.cfm?MSID=3" title="test2">test2</a></li>






Open in new window

Question by:Panos
    LVL 3

    Accepted Solution


    Do you want to hightlight the menu button of current page. May I know the exact requirement.

    If you want to highlight the menu button of current page. just add this css style

    #imgmenu a#item2 .current {background:transparent url(images/foto2_over.gif) -130px -90px no-repeat;}

    and add this class to <li> tag that links particular page. For example like this.

    <li class="list1"><a id="item1" href="Search.cfm?MSID=2" title="test1" class="current">test1</a></li>

    This will highlight the test1 page menu button.

    LVL 2

    Author Comment

    Hi Binylkumar:
    Maybe the question was not clealyr enough.
    I have this menu in a template.That 's why i did try to use a body id .
    if i'm on page Search.cfm?MSID=2 i must have foto1_over and if i'm on page Search.cfm?MSID=3 i must have foto2_over
    LVL 3

    Expert Comment


    I can give the solution. Can you clear me this.

    If you are in the page Search.cfm?MSID=2 then you want to have foro1_over image. Where do you to have this image. It is in the menu background or else in some other place. where do you to have this image?

    please mention me clearly
    LVL 2

    Author Comment

    The menu has normal the images foto1 and foto2.
    On rollover foto1 i get in that place the foto1_over image.
    Now if i m on page Search.cfm?MSID=2 i must have instead foto1 and foto2 in the menu,the images foto1_over and foto2.i hope i this helps
    LVL 2

    Author Comment

    Hi again
    How can i use this tutorial in my example?
    LVL 2

    Author Closing Comment

    It was not really what i wanted but it was the answer to the question.
    Thank you for your help

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Suggested Solutions

    Title # Comments Views Activity
    Why this small css codes has problem on tablet? 3 52
    CSS Animation 6 57
    Please explain this CSS 5 50
    CSS/audio questions 2 41
    "I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now