Topic awaiting preservation: Retrieve background url from a css element. (Page 1 of 1)

My first assumption would be that it was located this way:

document.getElementById(id).style.background or possibly document.getElementById(id).style.background.url or even document.getElementById(id).style.background.url()

But after tests i realized it is not. Whats the correct way.

My purpose is to make a css styled rollover that are not links and are not the element i am hovering. This is because i intend to make my page to be able to switch styles, and have the rollover 'roll' the correct pics in each style.

Am i too vague?

__________________________________


Alevice's Media Library

If you only want to set a new background image (which is what you're trying to do if I understood correctly ) you can do that by saying:

document.getElementById(id).style.backgroundImage = 'url(path/to/image.jpg)';

Reading the current path would be a bit trickier as you'd have to get rid of the url(...) bit first but as you'll only need to set new ones for the rollovers this should be enough.

[This message has been edited by kuckus (edited 09-17-2003).]

document.getElementById(id).style.background - this would be a string of the whole background properties
if it only had an image it would return the string 'url(yourimage)' or if there are other properties on the background it would a string like 'url(yourimage) no-repeat center #CCEE44'

document.getElementById(id).style.background.url - url isn't part of the css identifier - it's part of the value

document.getElementById(id).style.background.url() - url isn't part of the css identifier - it's part of the value

If you wont to do a rollover you can just write:

document.getElementById(id).style.background = "url(yourimage)" - you don't need to declare backgroundImage explicitly since all css background properties come under the indentifier of background anyway - it's just coding with actual css, except in a javascript syntax type way.


If for your rollovers you want restore the original background image on mouseout and you don't want to specify the image itself (maybe you don't know it) then you just have to store the original value in a variable and put it back on rollout:

var bob = document.getElementById(id).style.background

document.getElementById(id).style.background = "url(yourimage)"

Then you just have to do this onmouseout:

document.getElementById(id).style.background = bob

Thanks so much for the pointers. It works like candy (is that the correct expression?).

__________________________________


Alevice's Media Library

I would recommend changing the class name, then you can be lazy and do all the work in CSS .. plus it may save repetition in some cases too.

eg.

<style type="text/css">
div {
border:1px solid #000000;
}
div.active {
background-color:#333333;
border:1px solid #ff3333;
}
</style>

<div onmouseover="this.className='active'" onmouseout="this.className=''">some content</div>

By changing the class name, you can use multiple DIVs that match that pattern etc. and will behave the same way. You can use CSS' "hover" pseudo-class where supported (ie. div:hover on CSS2 supported browsers like Mozilla), and on Anchor tags with IE 5.5+ I think.


[This message has been edited by Scott (edited 09-21-2003).]