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>