Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript to change background-position in CSS

    Hi there

    I have a div in an html file, with 5 links inside it. I'd like to set the div's background image position differently depending on which link is rolled over. Currently I have:

    Code:
    <a href="#" onMouseOver="document.getElementById('divName').className = 'foo';">LINK</a>
    with CSS set as:

    Code:
    .foo {
       background-position: 30px 30px;
    }
    The problem I have is that nothing is happening, and no error is even generated. Someone smarter than me said it should be formatted as a function, but I have no clue how to do this. Please help!

    Many thanks in advance..

    Toby
    Last edited by phobic; 02-15-2009 at 10:46 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    It's very easy and reliable if you use CSS only to do this, like

    Code:
    <ul id="nav">
    <li><a href="#" >LINK</a></li>
    <li><a href="#" >LINK</a></li>
    </ul>
    Code:
    ul#nav a{
    background:#fff url(images/bg.gif);
    }
    ul#nav a:link,ul#nav a:link{
    background-position:0px 0px;
    }
    ul#nav a:hover,ul#nav a:active{
    background-position:0px 30px;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the response - I'm confortable with using CSS to create a rollover effect, but because there is more than one link, I'm unable to use multiple hover effects.

    the page in question is at:

    http://xgrid.ca

    The masthead is a single image, with the background image position altered from 'top left' to 'bottom left'. The div beneath it, the 'intro' div has 5 or 6 links, and on rollover I'd like each one to set the background image on the containing div. I believe javascript is the best way, but have no idea of the symtax or exact code.

    Many thanks again,

    Toby

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    The masthead is a single image, with the background image position altered from 'top left' to 'bottom left'. The div beneath it, the 'intro' div has 5 or 6 links, and on rollover I'd like each one to set the background image on the containing div. I believe javascript is the best way, but have no idea of the symtax or exact code.
    So what? You could easily set a different id or class to those links and specify different backgrounds like
    Code:
    <ul id="nav">
    <li><a href="#" id="link1">LINK</a></li>
    <li><a href="#" id="link2">LINK</a></li>
    </ul>
    Code:
    ul#nav #link1{
    background:url(image1.gif);
    }
    ul#nav #link2{
    background:url(image2.gif);
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm sorry, abduraooft, but I'm still missing something - in your example, the background of the LI's would be affected, not the UL, correct?

    There's no way in CSS (that I'm aware of) to set the background of the UL using a rollover effect on the LI, which is the equivalent of what I'm trying to do.

    Thanks again,

    Toby

  • #6
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    quick update.. I've created an image to show what I'd like to achieve - the div has a background image and some links in it, when the links are hovered over I'd like to alter the css background-position of the background image using javascript.

    See attached image for diagram..

    Please help!

    Thanks,

    Toby
    Attached Thumbnails Attached Thumbnails Javascript to change background-position in CSS-situation.gif  

  • #7
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    you can do
    document.getElementById("nameoftheyourdiv").style.backgroundPosition= yourxpos
    yourypos

    here's an example of changing the background position of an image from in a script.
    It's borrowed from Ben Joffe's canvascape.
    I have a canvas version of this raycaster with textures also and it works in canvas too.
    http://h1.ripway.com/tinyscript/canv...ssbrowser.html

  • #8
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    OK I made a solution to get you started
    Code:
    <style>
    #thediv
    {
    background-color:#FFCC80;
    background-image:url(pic2.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    height:500;
     width:500
    }
    </style>
    <script type="text/javascript">
    function changePosition(num)
    {
    if (num==1){var posy=50}
    if (num==2){var posy=150}
    document.getElementById('thediv').style.backgroundPosition="0 "+posy+"";
    }
    </script>
    </head>
    <body>
    <div id="thediv" >
    <a href="#" onmouseover="changePosition(1)">link</a>
    <a href="#" onmouseover="changePosition(2)" >link</a>
    </div>
    </body>
    </html>
    Last edited by TinyScript; 03-02-2009 at 04:30 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •