Moving div Background Position on Click

millsy007

05-05-2009, 08: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, 08:43 PM

adios

05-05-2009, 08:44 PM

http://www.htmlist.com/design/faster-loading-pages-with-css-background-image-sprites/

millsy007

05-05-2009, 10: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-05-2009, 11:45 PM

Yeah, you got a typo in there.
function changePos(val1,val2,what)

_Aerospace_Eng_

05-06-2009, 01: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-11-2009, 11:59 PM

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, 12: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, 12: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> 
<a href="#" class="off" onmouseover="sprite('ProductImage','125px',this);return false">view 2</a> 
<a href="#" class="off" onmouseover="sprite('ProductImage','250px',this);return false">view 3</a> 
<a href="#" class="off" onmouseover="sprite('ProductImage','375px',this);return false">view 4</a>
</div>
</div>
</body>
</html>

barkermn01

05-12-2009, 10:53 AM

There are loads of prebuilt scripts to do this buts realy use photoshop and cut the images into different files