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 10 of 10
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Moving div Background Position on Click

    I have a product image that is 4 images 'sewn together'
    http://www.flickr.com/photos/28033561@N03/3504394261/

    I am going to set a div called ProductImage and then have the background of the div set to this image, but with only the top image showing.

    I then want to have a button for 'more views' and when this is clicked the background position shift to show the next part of the image showing a different view.

    What is a suitable way to do this, I am hoping it could be done with a combination of css and javascript.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <script type="text/javascript">
    function changePos(val1,val2,what)
    {
    document.getElementById(what).style.backgroundPosition = val1+' '+val2;
    }
    </script>
    <a href="#" onclick="changePos(0,-200,'ProductImage');return false">Change Position</a>
    You'll need to play around with the values but you get the idea. You could even using top, left, right, bottom, or center in place of val1 and val2.
    Last edited by _Aerospace_Eng_; 05-06-2009 at 02:19 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts

  • #4
    New Coder
    Join Date
    Feb 2009
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks

    But I seem to be doing something wrong I get an 'object expected' error.
    I have:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    function chagePos(val1,val2,what)
    {
    document.getElementById(what).style.backgroundPosition = val1+' '+val2;
    }
    </script>
    
    </head>
    <div id="ProductImage" style="height:300px;width:400px; background-image:url(file:///C|/Documents%20and%20Settings/Millsy/Desktop/trainers.jpg)"></div>
    <a href="#" onclick="changePos(0,-200,'ProductImage');return false">Change Position</a>
    <body>
    </body>
    </html>

  • #5
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Yeah, you got a typo in there.
    Code:
    function changePos(val1,val2,what)

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    That would work if they wanted to use a rollover but they want to be able to click a link and change the position. I've fixed my typo in the previous post. Goes to show that copying and pasting isn't always reliable.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Feb 2009
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the replies

    I have a couple issues I would love some help with.

    When I click to change the position it will shift the background position once, but only once, is there a way I can get it to do this each time it is clicked?

    And in firefox nothing happens

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    function changePos(val1,val2,what)
    {
    document.getElementById(what).style.backgroundPosition = val1+' '+val2;
    }
    </script>
    </head>
    
    <body>
    <div id="ProductImage" style="background-image: url(http://farm4.static.flickr.com/3563/3504394261_857739095b.jpg?v=0); height:126px; width:242px"></div>
    <a href="#" onclick="changePos(0,-126,'ProductImage');return false">Change Position</a>
    </body>
    </html>

  • #8
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    function changePos(val1,val2,what){
    	var style = document.getElementById(what).style;
    	if (typeof(style.bgX) == "undefined"){
    		style.bgX = 0;
    		style.bgY = 0;
    	} else {
    		style.bgX += val1;
    		style.bgY += val2;
    	}
    	style.backgroundPosition = style.bgX+'px '+style.bgY+'px';
    }
    </script>
    </head>
    
    <body>
    <div id="ProductImage" style="background-image: url(http://farm4.static.flickr.com/3563/3504394261_857739095b.jpg?v=0); height:126px; width:242px"></div>
    <a href="#" onclick="changePos(0,-125,'ProductImage');return false">Change Position</a>
    </body>
    </html>
    should solve both your issues.

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    FireFox is a real browser ... it needs 'px.'

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #frame {
    width:248px;
    text-align:center;
    }
    #ProductImage {
    background-image: url(http://farm4.static.flickr.com/3563/3504394261_857739095b.jpg?v=0); height:126px;
    width:242px;
    border:2px silver dashed;
    }
    a.off {
    font:normal 10px arial;
    color:navy;
    background:ivory;
    text-decoration:none;
    }
    a.on {
    font:normal 10px arial;
    color:ivory;
    background:steelblue;
    text-decoration:none;
    padding:0 2px
    }
    </style>
    <script type="text/javascript">
    
    function sprite(div_id, height, anc)
    {
       var div_el = document.getElementById(div_id);
       div_el.style.backgroundPosition = '0 ' + height;
       view(anc); //optional
    }
    function view(anc) 
    {
       var frm = document.getElementById('frame');
       var links = frm.getElementsByTagName('a');
       var link, i = 0;
       while (link = links[i++])
       {
          link.className = (link != anc) ? 'off' : 'on';
       }
    }
    </script>
    </head>
    <body>
    <div id="frame">
    <div id="ProductImage"></div>
    <a href="#" class="on" onmouseover="sprite('ProductImage','0',this);return false">view 1</a>&nbsp;
    <a href="#" class="off" onmouseover="sprite('ProductImage','125px',this);return false">view 2</a>&nbsp;
    <a href="#" class="off" onmouseover="sprite('ProductImage','250px',this);return false">view 3</a>&nbsp;
    <a href="#" class="off" onmouseover="sprite('ProductImage','375px',this);return false">view 4</a>
    </div>
    </div>
    </body>
    </html>
    Last edited by adios; 05-12-2009 at 07:06 PM.

  • #10
    Regular Coder
    Join Date
    Nov 2007
    Location
    Leeds, UK
    Posts
    514
    Thanks
    24
    Thanked 19 Times in 19 Posts
    There are loads of prebuilt scripts to do this buts realy use photoshop and cut the images into different files
    Working towards a Internet where we don't have website just browser applications Kill the Hyper-link and say hello to 3D Games in the browser :)


  •  

    Posting Permissions

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