ASP.NET MasterPage menubar

Question

I have MasterPage and 4 pages.

<div class="navcover">
    <div class="nav"style="background-image: url(images/lion.jpg);">
        <a href="Default.aspx">Home</a>
    </div>
    <div class="nav"> 
         <a href="Services.aspx">Services</a> 
    </div>
    <div class="nav">
         <a href="careers.aspx">Careers</a>
    </div>
    <div class="nav"style="background-image: url(images/lion.jpg);">
        <a href="contactus.aspx">Contact Us</a>
    </div>
</div>

When i go to SERVICES, background image must changed to images/lion.jpg, when i go to Careers etc... How can i set up these changes?

Answer 1

try this

<div class="navcover">
            <div class="nav" id="nav1" style="background-image: url(images/lion.jpg);">
                <a href="Default.aspx">Home</a>
            </div>
            <div class="nav" id="nav2"> 
                 <a href="Services.aspx">Services</a> 
            </div>
            <div class="nav" id="nav3">
                 <a href="careers.aspx">Careers</a>
            </div>
            <div class="nav" id="nav2" style="background-image: url(images/lion.jpg);">
                <a href="contactus.aspx">Contact Us</a>
            </div>
        </div>
    <div>

and add this javascript function in master page

<script>
   window.onload = function()
    {
        var url = document.URL;
        if(url.indexOf('Default2.aspx') != -1)
        {
            var a = document.getElementById("nav1");
            a.style.backgroundImage="url('images/lion.jpg')";
        }    
        if(url.indexOf('Services.aspx') != -1)
        {
            var a = document.getElementById("nav2");
            a.style.backgroundImage="url('images/lion.jpg')";
        }  
        if(url.indexOf('careers.aspx') != -1)
        {
            var a = document.getElementById("nav3");
            a.style.backgroundImage="url('images/lion.jpg')";
        }  
        if(url.indexOf('contactus.aspx') != -1)
        {
            var a = document.getElementById("nav4");
            a.style.backgroundImage="url('images/lion.jpg')";
        }  
    };
    </script>

Answer 2

You need to find the page name requested on the master page.

protected void Page_Load(object sender, EventArgs e)
{
    if (this.MainContent.Page is Services)
    {
        // The default page
    }
}

Make the item runat='server' so that you can get it's reference on you master page. Then use .attributs function to change the attribute(background) accordingly.

<div class="nav"style="background-image: url(images/lion.jpg);" runat="Server">


protected void Page_Load(object sender, EventArgs e)
{
    if (this.MainContent.Page is Services)
    {
       //get reference of div and add style