...

View Full Version : Javascript to change background-position in CSS



phobic
02-15-2009, 11:33 PM
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:


<a href="#" onMouseOver="document.getElementById('divName').className = 'foo';">LINK</a>

with CSS set as:


.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

abduraooft
02-16-2009, 08:18 AM
It's very easy and reliable if you use CSS only to do this, like


<ul id="nav">
<li><a href="#" >LINK</a></li>
<li><a href="#" >LINK</a></li>
</ul>


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;
}

phobic
02-16-2009, 05:24 PM
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

abduraooft
02-17-2009, 08:59 AM
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

<ul id="nav">
<li><a href="#" id="link1">LINK</a></li>
<li><a href="#" id="link2">LINK</a></li>
</ul>

ul#nav #link1{
background:url(image1.gif);
}
ul#nav #link2{
background:url(image2.gif);
}

phobic
02-18-2009, 02:48 AM
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

phobic
02-25-2009, 12:15 AM
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

TinyScript
03-01-2009, 04:52 PM
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/canvas_raycaster/colorizedCrossbrowser.html

TinyScript
03-02-2009, 05:28 AM
OK I made a solution to get you started


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum