Home/ Questions/Q 6981745
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T18:11:50+00:00

The idea for the site is going to be a main page with 6

  • 0

The idea for the site is going to be a main page with 6 separate div classes, once one is clicked I would like it to rise to the top of the page and for the other elements to disappear. I’m using two images for the regular look and the hover. For the first link, I would like it to load the new background so it only has the one element. How can I go about doing this? I’m not very proficient in jquery:

    <html>
    <head>
    <title> Div Blocks</title>

    <style type="text/css">

        body {
            background: url("bg.jpg");

    width:1920px;
    height:1000px;
            font-size: 30px; 
            font-family:Comic Sans MS;
            line-height: 1.429;
            margin: 0;
            padding: 0;
            text-align: center;
            cursor : url("nav.png"), default;

        }
        a{
        cursor : url("nav1.png"), pointer
        }
     div.one a
    {
    position: absolute;
    top:0px;
    left:0px;
    width: 800px;
    height: 333px;
    text-decoration:none;
    -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out;
    }
    div.one a:hover
    {background: url("bgalt.jpg");
     background-position: 0px 0px;
    }
    div.one a:enabled
    {background: url("branding.jpg");}

    div.two a
    {
    position: absolute;
    top:334px;
    left:0px;
    width: 800px;
    height: 333px;
    text-decoration:none;
    }
    div.two a:hover
     {background: url("bgalt.jpg");
    background-position: 0 746px;
    }
    div.three a
    {
    position: absolute;
    top:667px;
    left:0px;
    width: 900px;
    height: 333px;
    text-decoration:none;
    }
    div.three a:hover
     {background: url("bgalt.jpg");
    background-position: 0 413px;
    }

    div.r1 a
    {
    position: absolute;
    top:0px;
    left:1120px;
    width: 800px;
    height: 333px;
    text-decoration:none;
    }
    div.r1 a:hover
     {background: url("bgalt.jpg");
    background-position: 800px 0px;
    }

    div.r2 a
    {
    position: absolute;
    top:334px;
    left:1120px;
    width: 900px;
    height: 333px;
    text-decoration:none;
    }
    div.r2 a:hover
     {background: url("bgalt.jpg");
    background-position: 800px 746px;
    }
    div.r3 a
    {
    position: absolute;
    top:667px;
    left:1120px;
    width: 900px;
    height: 333px;
    text-decoration:none;
    }
    div.r3 a:hover
     {background: url("bgalt.jpg");
    background-position: 800px 413px;
    }

    </style>
    </head>
    <body>
        <div id="fade">
        <div class="one">
    <a href="javascript:void(0)"onmousedown="myObject()"></a>
        </div>
        </div>
        <div class="two">
    <a href="#"></a>
        </div>
        <div class="three">
    <a href="#"></a>
        </div>
        <div class="r1">
    <a href="#"></a>
        </div>
          <div class="r2">
    <a href="#"></a>
        </div>

                <div class="r3">
    <a href="#"></a>
        </div>
        </body>

    <script>
        $('a').click(function () 
{
    event.preventDefault(); 
css('background-image', 'url(' branding.jpg')');
});


    </script>

i tried with css as you can see fro the code and it didnt work out

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You may be looking for this:

    $("a").click(function(event){
    event.preventDefault(); // prevent the link from changing the location
    $(this)
        .closest("div") // select the parent div of the link
        .animate("top","0") // animation to take it to the top of the page
        .siblings() // select all the siblings of the div
        .hide(); // hide them
});
    • 0