473,769 Members | 2,501 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

need script to choose random background-image

Hello comp.lang.js.I need a script to rotate a background image on
each newpage load, given the id of the element and a list (array?)of 2 or
more image paths ("img1.jpg", "img2.jpg", ...).Actually, depending on
how I write the HTML, I guess I'dneed the script to set
style.backgroun dImage or src.I'd need to run it on a few elements, something
like:setRandomB gImg('thingy1', ('img1a','img1b ', ...)
)setRandomBgImg ('thingy2', ('img2a','img2b ', ...) ) etcBut I don't actually know any more
javascript. :(Can you help? Thanks!! Lucy
Jul 23 '05 #1
6 2107
This Little script let you cicle between 2 images
<body>
<script language = "Javascript ">

<!--

//nº of pictures

var npic=Math.round (Math.random())

//name of pictures

namepics= new Array("1.jpg"," 2.jpg");

document.write( "<img src='" + namepics[npic] + "' >");

//-->

</script>
</body>

Unfortunatelly I haven´t figure out out to work with more than two images
tough
Jul 23 '05 #2
Again here is a solution that works perfectly for 5 (five)
images
<script language="Javas cript">
<!--
npic=Math.rando m()
if (npic < 0.2)
document.write( "<img src=1.jpg>");
else if (npic <0.4)
document.write( "<img src=2.jpg>");
else if (npic <0.6)
document.write( "<img src=3.jpg>");
else if (npic <0.8)
document.write( "<img src=4.jpg>");
else
document.write( "<img src=5.jpg>");

//-->
</script>

Jul 23 '05 #3
On Fri, 24 Sep 2004 17:15:13 +0100, Oscar Monteiro <of**@hotmail.c om>
wrote:
This Little script let you cicle between 2 images
<body>
<script language = "Javascript ">
The language attribute is deprecated in favour of the (required) type
attribute.

<script type="text/javascript">
<!--
There is no longer a need to hide scripts from old browsers. All user
agents currently in use understand the SCRIPT element.
//nº of pictures

var npic=Math.round (Math.random())

//name of pictures

namepics= new Array("1.jpg"," 2.jpg");

document.write( "<img src='" + namepics[npic] + "' >");
[snip]
Unfortunatelly I haven´t figure out out to work with more than two images
tough


How about

var pics = ['1.jpg', '2.jpg', '3.jpg', '4.jpg' /* etc... */];
document.write( '<img src="'
+ pics[Math.floor((Mat h.random() % 1) * pics.length)]
+ '" alt="">');

(Math.random() % 1) produces a real number in the range 0 <= n < 1. The
modulus ensures that buggy implementations don't return 1.0. Multiplying
by 'm' changes that range to 0 <= n < m. Using Math.ceil() then produces
an integer with a maximum value of (m - 1).

Of course, this doesn't actually change a background image. For this, use
the style object:

var b, s;
if((b = document.body) && (s = b.style)) {
var pics = ['1.jpg', '2.jpg', '3.jpg', '4.jpg' /* etc... */];
s.backgroundIma ge =
pics[Math.floor((Mat h.random() % 1) * pics.length)];
}

(untested)

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #4
JRS: In article <41************ **********@news .telepac.pt>, dated Fri,
24 Sep 2004 19:00:56, seen in news:comp.lang. javascript, Oscar Monteiro
<of**@hotmail.c om> posted :
Again here is a solution that works perfectly for 5 (five)
images
<script language="Javas cript">
Deprecated<!--
npic=Math.rand om()
if (npic < 0.2)
document.write ("<img src=1.jpg>");
else if (npic <0.4)
document.write ("<img src=2.jpg>");
else if (npic <0.6)
document.write ("<img src=3.jpg>");
else if (npic <0.8)
document.write ("<img src=4.jpg>");
else
document.write ("<img src=5.jpg>");

//-->
</script>

But it would be much more elegant and extensible to use Random (FAQ
4.22) to generate the variable part of the array name :

document.write( "img src=", Random(5)+1, ".jpg>")

or to index an array of names
var Arr = ["this", "that", "tother"]
document.write( "img src=" + Arr[Random(Arr.leng th)] + ".jpg>")

In article <41************ **********@news .telepac.pt>, dated Fri, 24 Sep
2004 17:15:13, seen in news:comp.lang. javascript, Oscar Monteiro
<of**@hotmail.c om> posted :
var npic=Math.round (Math.random()) namepics= new Array("1.jpg"," 2.jpg");

document.write ("<img src='" + namepics[npic] + "' >");


Let that be a lesson to those who think that Math.round with Math.random
is always wrong !

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.c om/faq/> JL/RC: FAQ of news:comp.lang. javascript
<URL:http://www.merlyn.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 23 '05 #5
Oscar Monteiro wrote:
This Little script let you cicle between 2 images
<body>
<script language = "Javascript ">
<script type="text/javascript">
<!--
Don't, there is no standard for this. More, it is obsolete
and can only get you in more trouble if the script engine
does not support the non-standard approach.
//nº of pictures

var npic=Math.round (Math.random())
Math.random() returns a floating-point number between 0 and 1.
Math.round(...) rounds that number to the next integer number,
i.e. `npic' can assume only one of the values 0 or 1. This
is pertinent for a two-element array, but it certainly is not
for arrays with a different length.
//name of pictures

namepics= new Array("1.jpg"," 2.jpg");
Variables should be declared using the `var' keyword to avoid
side effects in functions (omitting the `var' keyword always
declares globals).
document.write( "<img src='" + namepics[npic] + "' >");

//-->
Don't, see above.
</script>
</body>

Unfortunatelly I haven´t figure out out to work with more than two images

^[1]

The reason is that your random number computation does not make any sense
with more than two elements in the array (indexes 0 and 1). Instead, you
should use the length of the array to compute an integer number in range:

var
namepics = new Array("1.jpg", "2. jpg", "3.jpg"),
npics = Math.round(Math .random() * namepics.length );
document.write( '<img src="' + namepics[npic] + '" alt="...">');

(Don't forget the "alt" attribute, it is required for Valid HTML! For
reasonable and barrier-free authoring the array should hold an Object
object providing at least both the image filename and the alternative
text, such as

var namepics = [
{src: "1.jpg", alt: "one"},
{src: "2.jpg", alt: "two"},
{src: "3.jpg", alt: "three"}
];
...
document.write(
"<img src='" + namepics[npic].src
+ "' alt="' + namepics[npic].alt + '">');
)

Your second solution in <news:41******* *************** @news.telepac.p t>
works indeed, however it is hard to maintain as with every new image you
have to re-compute the fraction which an element needs to match; yet,
*computing* is what *computers* were built for.
PointedEars
___________
[1] Please declare your character set and don't use accents as apostrophes,
see <http://insideoe.tomste rdam.com/>.
--
Vacuume Cleaner for computers: format C:
Jul 23 '05 #6
JRS: In article <13************ ****@PointedEar s.de>, dated Sun, 10 Oct
2004 15:16:05, seen in news:comp.lang. javascript, the infant Thomas
'PointedEars' Lahn <Po*********@we b.de> posted, in response to an
article over a fortnight old, in a thread that was completed long ago :

The reason is that your random number computation does not make any sense
with more than two elements in the array (indexes 0 and 1). Instead, you
should use the length of the array to compute an integer number in range:

var
namepics = new Array("1.jpg", "2. jpg", "3.jpg"),
npics = Math.round(Math .random() * namepics.length );
document.write( '<img src="' + namepics[npic] + '" alt="...">');


AIUI, the three elements of namepics are indexed 0, 1, 2;
namepics.length is 3, and npics will be assigned the values 0, 1, 2, 3
with probabilities about 17%, 33%, 33%, 17%.

Indexing namepics with npic gives an error message; with npics gives an
undefined element 16% of the time.

It is an elementary error; one that those who are familiar with
newsgroup FAQ item 4.22 should not be making. IMHO, "your random number
computation does not make any sense".

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.c om/faq/> JL/RC: FAQ of news:comp.lang. javascript
<URL:http://www.merlyn.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 23 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
3323
by: Sticks | last post by:
ok... im not quite sure how to describe my problem. i have a php script that runs through my entire php site and writes the resulting output to html files. this is necessary as the nature of the hosting available to me for this particular page prohibits me from using php/mysql as i would like. my script works simply by using output buffers and an include the relevant section of code is as follows: ob_start();
4
2308
by: Marquisha | last post by:
If this is off-topic, please forgive me. But I thought this might be the perfect spot to get some advice about how to proceed with a project. Working on a Web site design for a nonprofit organization, and I'm donating the work. Haven't done Web work in a while, and things have changed since I last did anything of this magnitude. I'm looking for a solution that will enable me to edit pages easily and in totally WYSIWYG fashion, while...
4
16775
by: Phillo | last post by:
Hello, I'm new at Javascript, and have written a script for a series of random roll-over button images, but one thing I would like to add is a function that checks to make sure that there are no duplicates in the randomly generated variables that choose the pictures. Can anyone give me a hand with this? One other thing I can't seem to figure out is how to manage the "onLoad" aspect of caching my roll-over images (DW has locked the...
14
1469
by: Nikola | last post by:
I need a function that reads from a txt file and randomly chooses a line from which retrieves a string (with spaces) and returns it to main function. thx
13
1809
by: Pedro Graca | last post by:
I'm sure this isn't very pythonic; comments and advice appreciated def curious(text): """ Return the words in input text scrambled except for the first and last letter. """ new_text = "" word = "" for ch in text: if ch in "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ": word = word + ch
3
7019
by: Peter Michaux | last post by:
Hi, Since I can do this document.defaultView.getComputedStyle(el, null).height; why would I ever want to do this document.defaultView.getComputedStyle(el, null).getPropertyValue('height');
2
3156
by: sorobor | last post by:
dear sir .. i am using cakephp freamwork ..By the way i m begener in php and javascript .. My probs r bellow I made a javascript calender ..there is a close button ..when i press close button then the calender gone actually i want if i click outside off the calender then it should me removed ..How kan i do this ... Pls inform me as early as possible .. I am waiting for ur quick replay ...Here i attached the source code .... <!DOCTYPE...
1
3207
by: deepaks85 | last post by:
Dear All, I want to send some data through a form with Multiple attachment in an HTML Format. I have tried it but it is not working for me. I am able to send data without attachment but with the code for attachment, I am not able to send anything. I get blank email. Can you please help me on this? Here is the html form:
0
9583
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9423
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10210
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10039
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9990
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9860
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8869
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
6668
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5297
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.