PDA

View Full Version : Moving div Background Position on Click



millsy007
05-05-2009, 09:14 PM
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.

_Aerospace_Eng_
05-05-2009, 09:43 PM
<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.

adios
05-05-2009, 09:44 PM
http://www.htmlist.com/design/faster-loading-pages-with-css-background-image-sprites/

millsy007
05-05-2009, 11:03 PM
Thanks

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



<!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>

venegal
05-06-2009, 12:45 AM
Yeah, you got a typo in there.

function changePos(val1,val2,what)

_Aerospace_Eng_
05-06-2009, 02:19 PM
http://www.htmlist.com/design/faster-loading-pages-with-css-background-image-sprites/

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.

millsy007
05-12-2009, 12:59 AM
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 :(


<!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>

venegal
05-12-2009, 01:33 AM
<!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.

adios
05-12-2009, 01:49 AM
FireFox is a real browser ... it needs 'px.'


<!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>

barkermn01
05-12-2009, 11:53 AM
There are loads of prebuilt scripts to do this buts realy use photoshop and cut the images into different files