Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS + .js - How Do I??

Status
Not open for further replies.
idaryl

idaryl

Technical User
Nov 10, 2001
156
US
I have a stylesheet for a "fixed in place" background image (red) and the page also does a call to a external changing image script (green).

How do I get the CSS to use the External Javascript so the "fixed in place" background image rotates on refresh?

Is it possible? Can the CSS do a call to an external .js file? - Independently these scripts work fine, but, I think they would work better if "joined"

--------------
<style type=&quot;text/css&quot;>
<!--
.bg { background-image: url(includes/backs/commonbk.gif); background-repeat: no-repeat; background-position: left top;}
//-->
</style>
------------
function change()
{
number = Math.floor(Math.random()*9)
if (number==0)
document.write('<img src=&quot;includes/backs/commonbk.gif&quot; width=&quot;747&quot; height=&quot;358&quot; border=&quot;0&quot;>')
if (number==1)
document.write('<img src=&quot;includes/backs/persbk.gif&quot; width=&quot;747&quot; height=&quot;358&quot; border=&quot;0&quot;>')
if (number==2)
document.write('<img src=&quot;includes/backs/commonbk.gif&quot; width=&quot;747&quot; height=&quot;358&quot; border=&quot;0&quot;>')
if (number==3)
document.write('<img src=&quot;includes/backs/persbk.gif&quot; width=&quot;747&quot; height=&quot;358&quot; border=&quot;0&quot;>')
if (number==4)
document.write('<img src=&quot;includes/backs/persbk.gif&quot; width=&quot;747&quot; height=&quot;358&quot; border=&quot;0&quot;>')
if (number==5)
document.write('<img src=&quot;includes/backs/commonbk.gif&quot; width=&quot;747&quot; height=&quot;358&quot; border=&quot;0&quot;>')
if (number==6)
document.write('<img src=&quot;includes/backs/persbk.gif&quot; width=&quot;747&quot; height=&quot;358&quot; border=&quot;0&quot;>')
if (number==7)
document.write('<img src=&quot;includes/backs/commonbk.gif&quot; width=&quot;747&quot; height=&quot;358&quot; border=&quot;0&quot;>')
if (number==8)
document.write('<img src=&quot;includes/backs/persbk.gif&quot; width=&quot;747&quot; height=&quot;358&quot; border=&quot;0&quot;>')
}

-------------------- • idaryl • •
idface.gif
 
Sort by date Sort by votes
Here is how I think you can do. I supposed that you applied &quot;bg&quot; class to your body :
Code: 
<HTML><HEAD>
<style type=&quot;text/css&quot;>
<!--
.bg {  background-image:  url(includes/backs/commonbk.gif); background-repeat: no-repeat; background-position: left top;}
//-->
</style>
<Script language=&quot;Javascript&quot;>
  function change() {
    var number = Math.floor(Math.random()*9);
    var o_Body = document.getElementById(&quot;myBody&quot;);
    if (number==0)
      o_Body.style.backgroundImage=&quot;url(includes/backs/commonbk.gif)&quot;;
    if (number==1)
      o_Body.style.backgroundImage=&quot;url(includes/backs/persbk.gif)&quot;;
    if (number==2)
      o_Body.style.backgroundImage=&quot;url(includes/backs/commonbk.gif)&quot;;
    if (number==3)
      o_Body.style.backgroundImage=&quot;url(includes/backs/persbk.gif)&quot;;
    if (number==4)
      o_Body.style.backgroundImage=&quot;url(includes/backs/persbk.gif)&quot;;
    if (number==5)
      o_Body.style.backgroundImage=&quot;url(includes/backs/commonbk.gif)&quot;;
    if (number==6)
      o_Body.style.backgroundImage=&quot;url(includes/backs/persbk.gif)&quot;;
    if (number==7)
      o_Body.style.backgroundImage=&quot;url(includes/backs/commonbk.gif)&quot;;
    if (number==8)
      o_Body.style.backgroundImage=&quot;url(includes/backs/persbk.gif)&quot;;
} 
</script>
</HEAD>
<BODY id=&quot;myBody&quot; class=&quot;bg&quot;>
  ...
</BODY>
</HTML>
Water is not bad as long as it stays out human body ;-)
 
Upvote 0 Downvote
Thanks Targol - OK! so now it's getting weird. I tried a couple of experiments to further this. I copied your earlier posting to a new page -- if I place in your code
.bg {  background-image:  url(includes/backs/commonbk.gif); background-repeat: no-repeat; background-position: left top;} -- it breaks

if I place in the original -- .bg { background-image: url(includes/backs/commonbk.gif); background-repeat: no-repeat; background-position: left top;} -- it doesnt.

and -- this is in the code shown above - talk about Twilight Zone! • idaryl • •
idface.gif
 
Upvote 0 Downvote
You could link the js (external) and get it to choose the background (random) and write that into the header.

Then the bulk of the html stays the same and you only change the CSS at the top via js.

Just a thought.. hmm I might try that one myself :)


Vince
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
750
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
600
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
638
PeDa
PeDa
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top