I am redesigning my robin-ann.com website :) First, lQQk here: http://www.robin-ann.com/dev/ra
The premise of this excercise is that I read a great article on designing for 1024 screen widths (allowing of course for smaller/larger with a fluid design) and well - now that I've done that, my giant images at the top of the screen blow past my margins set for the CSS 'header' declaration.
My thought to solve this was to place a div with a bg image on top of the above-mentioned div and give it an auto or 100% width to allow for resizing the 'header' - now all my backgrounds fit, right?!
Here's the catch: I have a script which throws a random image in that space and I want to keep running it - only I do not know how to accomplish this feat properly. I remember oogling at hedger's various css calling js, so I imagine it can be done and here's a good quote I read the other day from a google webinar : "Simple things should be simple, complex things should be possible."
This is what I tried:
1)calling the js file from the index:
<script type='text/javascript' src='iwantmorepictures.js'> </script>
2)Then placing this in the CSS file:
#headerForground {background:url("javascript:showImage();") width:auto; height:250px; }
Take a look here: http://www.robin-ann.com/dev/ra/javascript_test.html - IE makes it show JUST the image, which makes sense since the function says
document.write('<img src="'+theImages[whichImage]+'">');
and well - I don't exactly want my whole page in that line, so is there a way around that...? I do not understand Mozilla's interpretation of what I did in DOM at all! :( I enjoy javascript very much but always have a bit of trouble running it properly. Can someone provide me the way to run the <code>showImage();</code> from the css file... ?
Here is my mind at work...
<div class="OuterBG-nojs"><!--Just the "Turn on Javascript FOO!" image-->
<div class="OverlayBG-withjs"><!--the javascript function in the css background -->
</div>
</div> <!--Should be this simple eh?-->
Call js function from CSS