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

howto randomise starting pic in slideshow?

P: n/a
I have a slideshow, it uses

sigsImages=new Array()");

sigsImages[0]="sigs/finished1.jpg"
sigsImages[1]="sigs/foghorn.jpg"
sigsImages[2]="sigs/motto.jpg"
sigsImages[3]="sigs/sig.jpg"
sigsImages[4]="sigs/SWAT.jpg"
sigsImages[5]="sigs/title.gif"
sigscounter=sigsImages.length-1"
....
<td align="center"><img id="sigsviewer" src="sigs/sig.jpg"></td>
....

Instead of manually puting a file for the starting pic, how do I set
it to a random pick?

I tried;

<td align="center"><img id="sigsviewer" src=sigsImages[X]></td>

but that don't work.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Bow's and foggy's stored signatures</title>
<SCRIPT src="sigsheader.js"></SCRIPT>
</head>
<body
background="http://home.insightbb.com/clipart/backgrounds/bkgnd019.gif"
bgcolor="#ffffff" link="#0000ff" text="#000000" vlink="#ff0000">
<h1 align="center">Bow's and foggy's stored grahics</h1>
<h2 align="center" style="color: rgb(255, 0, 0);" color="red">Team
Special Forces</h2>
<SCRIPT src="sigsbody.js"></SCRIPT>
<table align="center">
<tr>
<td>
<a href="/cgi-bin/GBEntry?owner=emailid">
<img src="/global-images/guestbook/sign_gb.jpg" border="0"></a>
</td>
<td>
<P>Then email it to us at <a
href="mailto:Bo*******@insightbb.com">Bo*******@in sightbb.com</a></p>
</td>
<td>
<a href="/cgi-bin/GBView?owner=emailid">
<img src="/global-images/guestbook/view_gb.jpg" border="0"></a>
</td>
</tr>
</table>
</body>
</html>

document.writeln("<script type=\"text/javascript\">");

document.writeln("sigsImages=new Array()");

document.writeln("sigsImages[0]=\"sigs/finished1.jpg\"");
document.writeln("sigsImages[1]=\"sigs/foghorn.jpg\"");
document.writeln("sigsImages[2]=\"sigs/motto.jpg\"");
document.writeln("sigsImages[3]=\"sigs/sig.jpg\"");
document.writeln("sigsImages[4]=\"sigs/SWAT.jpg\"");
document.writeln("sigsImages[5]=\"sigs/title.gif\"");

document.writeln("sigscounter=sigsImages.length-1");
document.writeln("sigsi=0");

document.writeln("function sigsfirst()");
document.writeln("{");
document.writeln("document.getElementById(\'sigsvi ewer\').src=sigsImages[0]");
document.writeln("sigsi=0");
document.writeln("}");

document.writeln("function sigsprevious()");
document.writeln("{");
document.writeln("if (sigsi>0)");
document.writeln("{");
document.writeln("sigsi--");
document.writeln("document.getElementById(\'sigsvi ewer\').src=sigsImages[sigsi]");
document.writeln("}");
document.writeln("}");

document.writeln("function sigsnext()");
document.writeln("{");
document.writeln("if (sigsi<sigscounter)");
document.writeln("{");
document.writeln("sigsi++");
document.writeln("document.getElementById(\'sigsvi ewer\').src=sigsImages[sigsi]");
document.writeln("}");
document.writeln("}");

document.writeln("function sigslast()");
document.writeln("{");
document.writeln("document.getElementById(\'sigsvi ewer\').src=sigsImages[sigscounter]");
document.writeln("}");
document.writeln("<\/script>");
document.writeln("<center>");
document.writeln("<h1>sigs<\/h1>");
document.writeln("<form>");
document.writeln("<input value=\"First\" onclick=\"sigsfirst()\"
type=\"button\">");
document.writeln("<input value=\"Previous\" onclick=\"sigsprevious()\"
type=\"button\">");
document.writeln("<input value=\"Next\" onclick=\"sigsnext()\"
type=\"button\">");
document.writeln("<input value=\"Last\" onclick=\"sigslast()\"
type=\"button\">");
document.writeln("<\/form>");
document.writeln("<table border=\"1\">");
document.writeln("<tr>");
document.writeln("<td align=\"center\"><img id=\"sigsviewer\"
src=\"sigs/sig.jpg\"><\/td>");
document.writeln("<\/tr>");
document.writeln("<\/table>");
document.writeln("<p><\/p>");
document.writeln("<form>");
document.writeln("<input value=\"First\" onclick=\"sigsfirst()\"
type=\"button\">");
document.writeln("<input value=\"Previous\" onclick=\"sigsprevious()\"
type=\"button\">");
document.writeln("<input value=\"Next\" onclick=\"sigsnext()\"
type=\"button\">");
document.writeln("<input value=\"Last\" onclick=\"sigslast()\"
type=\"button\">");
document.writeln("<\/form>");
document.writeln("<p><\/p>");
document.writeln("<p>If you have a sig<\/p>");
document.writeln("<\/center>");
Regards David. E. Goble
http://www.pnc.com.au/~degoble
degoble[AT]pnc.com.au | dgoble[AT]pnc.com.au
Po Box 648 (9 Murray St), Kingscote, Kangaroo Island SA 5223
Jul 23 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
David. E. Goble wrote:
I have a slideshow, it uses
...
Instead of manually puting a file for the starting pic, how do I set
it to a random pick?
You have to use some kind of scripting, either on the server side or
client side with JavaScript. In either case, ciwa.html is not an
appropriate list. However, I will address your markup issues while your
here.
<td align="center"><img id="sigsviewer" src=sigsImages[X]></td>
The align attribute is deprecated in favour of stylesheets. That same
effect can be achieved using this simple line of CSS (perhaps with a
slightly modified selctor, as appropriate)

td { text-align: center; }
but that don't work.
Of course the image doesn't do what you want because the src attribute
accepts a URI, not an a JavaScript variable. You have to keep in mind
that HTML, CSS and JavaScript are three totally seperate languages, and
you really need to learn how they work together and how they don't.
<body
background="http://home.insightbb.com/clipart/backgrounds/bkgnd019.gif"
bgcolor="#ffffff" link="#0000ff" text="#000000" vlink="#ff0000">
Replace with CSS:

body { background: white url(.../bkgnd019.gif); color: black; }
:link { color: blue; }
:visited { color: red; }
<h1 align="center">Bow's and foggy's stored grahics</h1>
h1 { text-align: center; }
<table align="center">
table { margin-left: auto; margin-right: auto; }

However, if this table is being used for layout purposes only, as it
appears to be, I suggest you remove the table completely and replace
with much leaner, semantic and valid code.
<a href="..."><img src="/global-images/guestbook/sign_gb.jpg" border="0"></a>
the border attribute can be replaced by this CSS:

a img { border: 0; }

...
</body>
</html>
What's all this crap you have after the end tag for the html element?
Is this supposed to be in another file? You really should indicate such
things more clearly.
document.writeln("<script type=\"text/javascript\">");
How do you expect this to be treated as script when it is not within a
script element itself? Any user agent should just treat this as text
after the end of a document

Are you aware that using document.write() is very bad practice, and you
should be using the standardised DOM methods instead?

document.writeln("sigsImages=new Array()");
What's the point of writing out each line of a script, using script? Do
you really expect this script to be executed like that? I haven't
checked, but I doubt it will.
document.writeln("<center>");


Like I've suggested all the way through, don't use presentational
elements and attributes when there are perfectly good CSS properties to
use instead.

Oh, and by the way, it might be worth while putting your markup through
the validator before doing anything else.
http://validator.w3.org/

--
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/ Rediscover the Web
http://SpreadFirefox.com/ Igniting the Web
Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.