/    Sign up×
Community /Pin to ProfileBookmark

javascript in a style?

Copy linkTweet thisAlerts:
Sep 19.2007

Hello, is there any way to put javascript into a style of a page? For example
when you put this into a style of a div.
<div style=”background: url(http://www.website.com/bg1.jpg);”></div>

It puts a background image in the div. I want to switch to other back ground images sometimes. Will the style of a div even take javascript? If not is there another way to switch back ground images? Please let me know, thanks.

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@felgallSep 19.2007 — You can't put javaScript into the style but you can put the style into the JavaScript.

See http://javascript.about.com/library/bluseason.htm for an example that loads a different background for each of the four seasons.
Copy linkTweet thisAlerts:
@vortexerauthorSep 19.2007 — Thanks! Also where do I find the document reference for javascript. For instance to access different parts of the page with javascript such as document.body etc. Some sort of reference list for parts of the web page document. Please get back to me thanks.
Copy linkTweet thisAlerts:
@KravvitzSep 19.2007 — Sounds like you want to learn about the Document Object Model (DOM):

[url=http://www.sitepoint.com/article/rough-guide-dom/]Rough Guide to the DOM[/url]

[url=http://www.howtocreate.co.uk/tutorials/javascript/domintroduction]JavaScript tutorial - W3C DOM introduction[/url]

http://www.quirksmode.org/js/contents.html#dom

http://www.brainjar.com/

http://developer.apple.com/internet/webcontent/dom2i.html

http://developer.mozilla.org/en/docs/Gecko_DOM_Reference

http://digital-web.com/articles/forms_usability_and_the_w3c_dom/

http://www.w3.org/DOM/

[url=http://www.xulplanet.com/references/objref/]Mozilla JavaScript and DOM Reference[/url]
Copy linkTweet thisAlerts:
@vortexerauthorSep 19.2007 — Thanks a lot, here's the one I couldn't find that you provided.

http://developer.mozilla.org/en/docs/DOM:document#Properties

So if I have this, for the background of the page,

document.body.background


What would be used for just a div? Would I have to get the element by id or is there some sort of document.body.div command I can't find. Please let me know, thanks.
Copy linkTweet thisAlerts:
@KravvitzSep 19.2007 — The background property is deprecated. You should use document.body.style.background instead.

You can use document.getElementById() or document.getElementsByTagName(), or even a [url=http://www.robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/]document.getElementsByClassName() custom function[/url].
Copy linkTweet thisAlerts:
@vortexerauthorSep 21.2007 — Thanks, below is some code for a rotating image.

How do I add it to a div id so that it rotates back ground images for a <div></div> instead? Please let me know, thanks.

<script language="javascript">

arr = new Array(

["http://www.website.com/one.jpg"],

["http://www.website.com/two.jpg"],

["http://www.website.com/three.jpg"],// no comma at end

);

function image(){

document.getElementById('img').src = arr[new Date().getMinutes()][0];

setTimeout('image()',1000)}

</script>

This normally goes in the body of a page, need it to rotate background images into a div instead.

<BODY onload="image();">

<img id="img" title="title" border="0"> [/QUOTE]

If I switch the element by id to the div id instead, I don't know how to insert the images within the div instead.
Copy linkTweet thisAlerts:
@KravvitzSep 21.2007 — Remove the onload attribute from <body> and try this.
&lt;script type="text/javascript"&gt;
arr = new Array(
"http://www.website.com/one.jpg",
"http://www.website.com/two.jpg",
"http://www.website.com/three.jpg"
);
function image(){
document.getElementById('divId').style.backgroundImage = 'url('+arr[new Date().getMinutes()]+')';
setTimeout('image()',1000);
}
window.onload = function(){
image();
}
&lt;/script&gt;
Copy linkTweet thisAlerts:
@vortexerauthorSep 22.2007 — Thanks a lot, really appreciate the help. Only having trouble with this:

'url('+ arr[new Date().getMinutes()][0] +')';

I added this so items would appear.[0]

When I put 60 items in for minutes when it gets to the last one it stops. It doesn't show item one at the beginning again, any idea why it isn't starting over when it gets to the end? Never had to add a ++ before since items are listed for each minute. Please let me know, Thanks.
Copy linkTweet thisAlerts:
@vortexerauthorSep 22.2007 — Nevermind, fixed it.
×

Success!

Help @vortexer spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.8,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...