a lettered array for preloads....

**Markdidj** · Sep 25, 2002, 12:11

imageA=new Image()
imageA.src="imageA.gif"

imageB=new Image()
imageB.src="imageB.gif"

pictures=new Array('A','B')
thisPicture=pictures(1)
alert('image'+[thisPicture]+'.gif')

will show correct address, and when with document.pic.src= will show correct picture,

but....
alert('image'+[thisPicture]+'.src')
will show the correct address, but won't show the picture when used with document.pic.src=

any suggestions?

**requestcode** · Sep 26, 2002, 05:59

That is because you have not defined the image within the document using the <img> tag. You have only defined it in your script. Also if you are using the same name in an <img> tag that you are using in the script such as "imageA" you will run into problems. What are you trying to accomplish?

**Markdidj** · Sep 26, 2002, 13:36

Hi, this is my source code, I hope you understand it.
I really need to sort this one.......
I call on the Array r0 to l3, two at a time,
step 1 would be r0=t2, l0=t2
I need to take this t2, then put the 'r' or 'l' back in front of it to make rt2 and lt2 then to show the image that it represents.
thus the ('images/r'+[thisrt]+'.gif') shows the image when thisrt=rt2 or lt2
but ('r'+[thisrt]+'.src') or
r[thisrt].src or
'r'+[thisrt].src does not show the image
I hope you can help!!!!

<head>

<style type="text/css">
#pos1 {position:absolute; top:10px; left:10px}
#pos2 {position:absolute; top:50px; left:0px}
#pos3 {position:absolute; top:50px; left:130px}
#pos4 {position:absolute; top:10px; left:250px}
#pos5 {position:absolute; top:10px; left:50px}
</style>
<script language="javascript" type="text/javascript">

lt1 = new Image()
lt1.src="simages/lt1.gif"
lt2 = new Image()
lt2.src="simages/lt2.gif"
lt3 = new Image()
lt3.src="simages/lt3.gif"
lt4 = new Image()
lt4.src="simages/lt4.gif"
rt1 = new Image()
rt1.src="simages/rt1.gif"
rt2 = new Image()
rt2.src="simages/rt2.gif"
rt3 = new Image()
rt3.src="simages/rt3.gif"
rt4 = new Image()
rt4.src="simages/rt4.gif"
lb1 = new Image()
lb1.src="simages/lb1.gif"
lb2 = new Image()
lb2.src="simages/lb2.gif"
lb3 = new Image()
lb3.src="simages/lb3.gif"
lb4 = new Image()
lb4.src="simages/lb4.gif"
rb1 = new Image()
rb1.src="simages/rb1.gif"
rb2 = new Image()
rb2.src="simages/rb2.gif"
rb3 = new Image()
rb3.src="simages/rb3.gif"
rb4 = new Image()
rb4.src="simages/rb4.gif"
lmt2 = new Image()
lmt2.src="simages/lmt2.gif"
lmt3 = new Image()
lmt3.src="simages/lmt3.gif"
rmt2 = new Image()
rmt2.src="simages/rmt2.gif"
rmt3 = new Image()
rmt3.src="simages/rmt3.gif"
lmb2 = new Image()
lmb2.src="simages/lmb2.gif"
lmb3 = new Image()
lmb3.src="simages/lmb3.gif"
rmb2 = new Image()
rmb2.src="images/rmb2.gif"
rmb3 = new Image()
rmb3.src="simages/rmb3.gif"

var r0 = new Array('t2','t2')
var l0 = new Array('t2','t2')
var r1 = new Array('t1','t2','t2','t4')
var l1 = new Array('b2','b4','b1','b2')
var r2 = new Array('t1','t2','t3','t3')
var l2 = new Array('t3','t3','t1','t2')
var r3 = new Array('mt3','mt3','t1','mt2','mb2','mb3','b1','mb2','t1','t2','t3','t3')
var l3 = new Array('t1','t2','t3','t3','t1','t2','t3','t3','t3','t3','t1','t2')
var allRhythms = new Array(r0,l0,r1,l1,r2,l2,r3,l3)

var rlhand=new Array(rmb3,lmb3)

desc=new Array
desc[0]="No Rhythm"
desc[1]="blah"
desc[2]="Basic Left/Right Matrix"
desc[4]="mumbojumbo"
desc[6]="who-ha"
drum=new Array
drum[0]="images/lb.wav"
drum[1]="images/mb.wav"
drum[2]="images/hb.wav"
drum[3]="images/lt.wav"
drum[4]="images/mt.wav"
drum[5]="images/ht.wav"
var beenbfor=0
var allRhythmCount=(allRhythms.length)
var thisRhythm = 0
var bpmcnt = 120
var ltdom=0
var rall=allRhythms[(thisRhythm)+ltdom]
var lall=allRhythms[(thisRhythm)+(1-ltdom)]

function nextRhythm() {
if (thisRhythm < allRhythmCount-2) {
thisRhythm=(thisRhythm)+2
rall=allRhythms[(thisRhythm)+ltdom]
lall=allRhythms[(thisRhythm)+(1-ltdom)]
document.all.moshe1.innerText=desc[thisRhythm]
}
}
function prevRhythm() {
if (thisRhythm > 0) {
thisRhythm=(thisRhythm)-2
rall=allRhythms[(thisRhythm)+ltdom]
lall=allRhythms[(thisRhythm)+(1-ltdom)]
document.all.moshe1.innerText=desc[thisRhythm]
}
}

function incbpm() {
bpmcnt = bpmcnt+10
if (bpmcnt >= 190 ) {
bpmcnt=180
}
}

function decbpm() {
bpmcnt = bpmcnt-10
if (bpmcnt <= 60 ) {
bpmcnt=60
}
}

function lrdomswap() {
ltdom++
if (ltdom > 1) {
ltdom=0
}
rall=(allRhythms[(thisRhythm)+(ltdom)])
lall=(allRhythms[(thisRhythm)+(1-ltdom)])
document.rlhand.src=rlhand[ltdom]
}

thisFrame = 0

function plrhythm1() {
frameCtr=rall.length
frameCtl=lall.length
if (document.images) {
preFrame=(thisFrame)
if (preFrame < 0) {
preFrame = [frameCtr-1]
}
thisFrame++
if (thisFrame >= frameCtr) {
thisFrame = 0
}

thisrt=rall[thisFrame]
thislt=lall[thisFrame]

prevrt=[rall[preFrame]]
prevlt=[lall[preFrame]]

document.rhani.src=('images/r'+[thisrt]+'.gif')
document.lhani.src=('images/l'+[thislt]+'.gif')
document.all.moshe0.innerText=bpmcnt
document.all.moshe1.innerText=desc[thisRhythm]
document.all.moshe2.innerText=desc[thisRhythm+1]

if (thisrt == 't1') {
if (prevrt == 't2') {
document.all.base.src=drum[3]
}
if (prevrt == 't3'||'mt3') {
document.all.base.src=drum[4]
}
if (prevrt == 't4') {
document.all.base.src=drum[5]
}
}
if (thislt == 't1') {
if (prevlt == 't2') {
document.all.base.src=drum[3]
}
if (prevlt == 't3'||'mt3') {
document.all.base.src=drum[4]
}
if (prevlt == 't4') {
document.all.base.src=drum[5]
}
}
if (thisrt == 'b1') {
if (prevrt == 'b2'||'mb2') {
document.all.base.src=drum[0]
}
if (prevrt == 'b3'||'mb3') {
document.all.base.src=drum[1]
}
if (prevrt == 'b4') {
document.all.base.src=drum[2]
}
}
if (thislt == 'b1') {
if (prevlt == 'b2'||'mb2') {
document.all.base.src=drum[0]
}
if (prevlt == 'b3'||'mb3') {
document.all.base.src=drum[1]
}

if (prevlt == 'b4') {
document.all.base.src=drum[2]
}
}
setTimeout("plrhythm1()", ((15/bpmcnt)*1000))
}
}
</script>
</head>

<BODY bgcolor="E8D6AE" onLoad="plrhythm1()"><bgsound id="base">
<div id="pos1"><img src="images/drumtop.gif" width="250" ></div>
<div id="pos2"><IMG SRC="lmt3.gif" NAME="lhani"></div>
<div id="pos3"><IMG SRC="rmt3.gif" NAME="rhani"></div>
</a>
<div id="pos4"><a href="#" onMouseOver=lrdomswap()><img src="images/rmb3.gif" width="40" border="0" name="rlhand"></a>
<div id="pos5">
<TABLE BORDER="10" bordercolor="brown" bgcolor="663333" CELLSPACING=0 WIDTH=300 align="center">
<TR align=center>
<TD colspan="3" bgcolor="brown" ><font color="E8D6AE"><h3><b>HandDrum Control Panel</b>
<TR align=center>
<TD width="60"><font color="E8D6AE">Tempo
<td width="200" bgcolor="E8D6AE"><font color="663333"><SPAN id="moshe0" name="moshe0">bpmcnt</SPAN><b> bpm</b>
<TD width="60" align=center><a href="#" onClick=decbpm()><img src="images/down.gif" border="0"></a><a href="#" onClick=incbpm()><img src="images/up.gif" border="0"></a>
<Tr align=center>
<td><font color="E8D6AE">Rhythm
<td bgcolor="E8D6AE"><font color="663333">
<SPAN id="moshe1" name="moshe1">desc[0]</SPAN>
<td bgcolor="663333"><a href="#" onClick=prevRhythm()><img src="images/left.gif" border="0"></a><a href="#" onClick=nextRhythm()><img src="images/right.gif" border="0"></a>
<tr align=center>
<TD colspan="3" bgcolor="brown"><b><u>Rhythms on this Page</b></u><br>0 1 2 3 4 5 6
<tr>
<TD colspan="3" height="100">
<font color="E8D6AE"><SPAN id="moshe2" name="moshe2">desc[1]</SPAN>
</td>
</body>

**Markdidj** · Sep 27, 2002, 10:28

That's yesterdays script, today's is better, smaller and more profficient. I changed the letters for numbers and found these were easier to work with.

Would still like to now why, if ightimg="ight" and

document.image.src=("images/r"+[ightimg]+".gif")

the image "right.gif" will show

but when

document.image.src==("r"+[ightimg]+".src")

althought the output is right.src, it will not show the picture.

mmmmmm.......

**MarcusJT** · Sep 27, 2002, 20:16

double equals (==) is a comparison, i.e. "if (x == y)...".

**Andrew-J2000** · Sep 27, 2002, 22:26

profficient???

It would help if it was put in [ CODE ] [/ CODE ] tags of [ PHP ] [/ PHP ] which would make it easier to read.

**Markdidj** · Sep 28, 2002, 00:32

Thanks Marco, but the == was a mistake, but I didn't want to write another message after to say so.
Andrew, I have only been learning javascript for 1 month, I think its going OK, still have alot to learn and haven't even started php or other server side scripts yet.
Could you check out the page at

unitingrhythms.com/drums/drumrhythms/drum1.html

I put it online as it was working on my computer, but there's a couple of problems.
The position:absolute numbers arn't working the same online as off, and while the program is working it is constantly downloading. I noticed another message about caching here and realised that mine was set on minimum. I uped it but there was no affect. I was thinking that maybe my loop isn't being given time to load the pictures and sounds, but when I decrease the speed its still constantly downloading.
I hope you can help because I really need to get on with the rest of my website!

thanks....
Didj

**Markdidj** · Sep 28, 2002, 00:34

sorry, should check that I've finished my messages prpoerly!!!!

my images are preloaded using an intro screen

cheers

**Andrew-J2000** · Sep 28, 2002, 00:39

Thats impressive, but without clicking back and forward its sending my browser crazy trying to download the music files.

**Markdidj** · Sep 28, 2002, 01:04

why does it keep trying to download the sound? once its got them surely it know what they are. They are big files sizes for small sounds, about 22k for half-second samples. I can use .wav and .wma, but .mp3 doesn't work with .base. Will .wma work with other browsers? I can get them down to 3k per sound.

Cheers Andrew

**Markdidj** · Sep 28, 2002, 04:15

I've now put a onoff function and named my Images(which I should have done first)
this gives the pictures time to load, and its working alot faster.
but it still tries to connect for the sounds.
How do I get round this?

sound=new Sound(),,,,such a thing? or is there something else that will work...
cheers for your helps!