By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,605 Members | 2,147 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,605 IT Pros & Developers. It's quick & easy.

image replacement failing in safari

P: 2
Appreciate any advice:

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
  1.  
  2. function randomImage(x) {
  3.  
  4.     if (saf)
  5.     {
  6.         var item = document.getElementById(x);
  7.         item.style.background = 'url(../graphics/header_image1.jpg)';
  8.     }
  9.  
  10.     else {
  11.  
  12.         var ITEM = document.getElementById(x);
  13.         var random_i = String(Math.round(Math.random()*8));
  14.         var rand_path = 'url(../graphics/header_image' + random_i + '.jpg);';
  15.         setRandom(x, rand_path)
  16.     }
  17. }
  18.  
  19.  
  20. function randomIm(x) {
  21.     var ITEM = document.getElementsByTagName(x).item(0);
  22.     var random_i = String(Math.round(Math.random()*8));
  23.     var rand_path = 'url(..\/graphics\/header_image' + random_i + '.jpg);';
  24.     setRand(x, rand_path)
  25. }
  26.  
  27.  
  28.  
  29. function setRandom(id,imag) {
  30.     var item = document.getElementById(id);
  31.     item.style.background = imag;
  32. }
  33.  
  34. function setRand(tag,imag) {
  35.     var item = document.getElementsByTagName(tag).item(0);
  36.     item.style.background = imag;
  37. }
Then in the html:

[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
Aug 30 '06 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
The semi-colon after the url(..) affects Safari. Remove that and it should work across all browsers.

Also, the Math.round(Math.random()*8) statement would give random numbers between 0 and 8, but not completely randomly. Use Math.floor instead:
Expand|Select|Wrap|Line Numbers
  1. var rand_path = 'url(../graphics/header_image' + Math.floor(Math.random()*9) + '.jpg)';
May 3 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.