2
I'm working on a small script to swap out an image using javascript, this is my first attempt at using javascript. My method works fine in Firefox, but not in Safari. Documentation for Safari is a bit thin, so I thoughtt maybe someone here might recognize the issue quickly.
I'm using two methods to apply the image swap, one addresses the element ID, and the other the TagName.
My .JS:
Expand|Select|Wrap|Line Numbers
- function randomImage(x) {
- if (saf)
- {
- var item = document.getElementById(x);
- item.style.background = 'url(../graphics/header_image1.jpg)';
- }
- else {
- var ITEM = document.getElementById(x);
- var random_i = String(Math.round(Math.random()*8));
- var rand_path = 'url(../graphics/header_image' + random_i + '.jpg);';
- setRandom(x, rand_path)
- }
- }
- function randomIm(x) {
- var ITEM = document.getElementsByTagName(x).item(0);
- var random_i = String(Math.round(Math.random()*8));
- var rand_path = 'url(..\/graphics\/header_image' + random_i + '.jpg);';
- setRand(x, rand_path)
- }
- function setRandom(id,imag) {
- var item = document.getElementById(id);
- item.style.background = imag;
- }
- function setRand(tag,imag) {
- var item = document.getElementsByTagName(tag).item(0);
- item.style.background = imag;
- }
[HTML]<body onload="randomImage('headbar'); randomIm('h1'); randomIm('h2');">
<div class="top" id="headbar"></div>
<div class="rule"></div>
<div class="mid" ><h1></h1></div>
<div class="rule"></div>
<div ><h2></h2></div>
<div class="rule"></div>
<div class="footer" ></div>
</body>
[/HTML]
I have css styles set up to apply to each of the classes, IDs and 'h' tags. The idea being that I can decide where to apply the random script by targeting individual elements.
Also, i look forward to hearing if there are preferred methods that I'm not using. :o
Thanks much,
-greg
