arguments help

[Travo]

im newer to javascript and dont think thisll be a hard questions but

I have a list of cached images
var challactv = new Image();
var challben1 = new Image();
var challben2 = new Image();
var challben3 = new Image();
var challben4 = new Image();
var challben5 = new Image();
var champactv = new Image();
var champben1 = new Image();
var champben2 = new Image();
var champben3 = new Image();
var champben4 = new Image();
var champben5 = new Image();

I have a main img that can use any one of the precached images
and the code that calls the change is

onclick="changefunc('champactv')"

the problem is I want to use the argument to change the src
but Im not sure how to get it to work

function changefunc(target)
{
document.getElementById("HIMG").src = target.src;
}

i know i can use a switch or if and else's but I got alot of images and itll look real messy



thanks alot

[Kor]

er... confusing. The id attribute must be unique on document... Can you detail your aim, please? What you want to do? When? What the user should do? When? A little bit of your HTML code will be of some help, as well.

[Travo]

oh ok here is a sample of what i a trying to do.
http://darksizesyzlak2.angelfire.com/sample.html

<script type="text/javascript">

var challactv = new Image();
var challben1 = new Image();
var challben2 = new Image();
var challben3 = new Image();
var challben4 = new Image();
var challben5 = new Image();
var champactv = new Image();
var champben1 = new Image();
var champben2 = new Image();
var champben3 = new Image();
var champben4 = new Image();
var champben5 = new Image();

challactv.src = "http://www.google.ca/intl/en_ca/images/logo.gif";
challben1.src = "http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png";
challben2.src = "http://i.media-imdb.com/images/navbar/logo.png";
challben3.src = "http://codingforums.com/img/logo.gif";

function changefunc(target)
{
if (target == "challactv")
document.getElementById('HIMG').src = challactv.src;
else if (target == "challben1")
document.getElementById('HIMG').src = challben1.src;
else if (target == "challben2")
document.getElementById('HIMG').src = challben2.src;
else if (target == "challben3")
document.getElementById('HIMG').src = challben3.src;
}

</script>

<img id=HIMG width=200 height=200>

<br><br>

<img width=100 height=100 src="http://www.google.ca/intl/en_ca/images/logo.gif" onclick="changefunc('challactv')">
<img width=100 height=100 src="http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" onclick="changefunc('challben1')">
<img width=100 height=100 src="http://i.media-imdb.com/images/navbar/logo.png" onclick="changefunc('challben2')">
<img width=100 height=100 src="http://codingforums.com/img/logo.gif" onclick="changefunc('challben3')">

that code works but it uses ifs and elses in the changefunc() function.
what I need is to get the proper way to set the 'target' argument to the proper image var

so basically i am trying to replace the changefunc() with something like this

function changefunc(target)
{
document.getElementById('HIMG').src = target.src;
}

but it doesnt work, im guessing it thinks that target is a object.

thanks

[Gjslick]

Try using an object as a map, like the images object below.


<script type="text/javascript">

var images = new Object();

images[ 'challactv' ] = new Image();
images[ 'challben1' ] = new Image();
images[ 'challben2' ] = new Image();
images[ 'challben3' ] = new Image();

images[ 'challactv' ].src = "http://www.google.ca/intl/en_ca/images/logo.gif";
images[ 'challben1' ].src = "http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png";
images[ 'challben2' ].src = "http://i.media-imdb.com/images/navbar/logo.png";
images[ 'challben3' ].src = "http://codingforums.com/img/logo.gif";


function changefunc( target ) {
document.getElementById( 'HIMG' ).src = images[ target ].src;
}

</script>

<img id="HIMG" width="200" height="200">
<br><br>

<img width="100" height="100" src="http://www.google.ca/intl/en_ca/images/logo.gif" onclick="changefunc( 'challactv' );">
<img width="100" height="100" src="http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" onclick="changefunc( 'challben1' );">
<img width="100" height="100" src="http://i.media-imdb.com/images/navbar/logo.png" onclick="changefunc( 'challben2' );">
<img width="100" height="100" src="http://codingforums.com/img/logo.gif" onclick="changefunc( 'challben3' );">
Also, as a side note, you should always wrap your html attribute values in quotes, even for numbers (such as for your img tag's height and width attributes).

[Travo]

thanks Gjslick,
thats exactly what I was looking for

[Gjslick]

Np dude, glad to help.

And you were definitely right to look for a more elegant solution than the tons of if's/elseif's. That would have been a real pain to maintain!