...

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum