[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 682
  • Last Modified:

image menu and highlight current page

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?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<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;}
 
</style>
 
</head>
 
<body id="list1">
<div id="imgmenu">
<ul>
<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>
</ul>
</div>
 
</body>
</html>

Open in new window

0
Panos
Asked:
Panos
  • 4
  • 2
1 Solution
 
BinylkumarCommented:
Hi,

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.

0
 
PanosAuthor Commented:
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
0
 
BinylkumarCommented:
Hi,

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
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
PanosAuthor Commented:
Hi
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
0
 
PanosAuthor Commented:
Hi again
How can i use this tutorial in my example?
http://hicksdesign.co.uk/journal/highlighting-current-page-with-css
0
 
PanosAuthor Commented:
Hi
It was not really what i wanted but it was the answer to the question.
Thank you for your help
regards
Panos
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now