How to use a javascript variable to load an image

VanderBOOM · #1 (**permalink**) Nov 13th, 2006, 10:44

Hello anyone,

I'm trying to figure out how to load an image in a certain place using a javascript variable.

What I tried:

Code: Select all

<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hiding
// input number to convert into filename
var number = 1;
var convert = Right("0000" + number.toString(),4);
var Myfilename= "../afbeeldingen/M" + convert + ".jpg";
nimg = new Image(440,440); nimg.src = Myfilename
 
function Right(str, n){
    if (n <= 0)
       return "";
    else if (n > String(str).length)
       return str;
    else {
       var iLen = String(str).length;
       return String(str).substring(iLen, iLen - n);
    }
}
// -->
</script>
</head>

HTML: Select all

<body>
<img src="how do I get javascript variable 'Myfilename' here ?" width="440" height="440">
</body>

It looks so easy and I tried lots of things. I can't find out how to handle the javascript nimg.src = Myfilename in the html code.

Can someone point me into the right direction ?

Thanks
Regards Hans

ukgeoff · #2 (**permalink**) Nov 13th, 2006, 11:04

Start by giving the img element an 'id' so that it is easy to find.

You now need to look at using the DOM nodes to change the text within that given img to the required source details.

You may be able to get away with using a more simple approach of coding;

Code: Select all

document.getElementById('imgID').src = 'Source details here';

Haven't tried this but the theory is ok.

VanderBOOM · #3 (**permalink**) Nov 13th, 2006, 14:00

Thanks Geoff,

I solved the problem by using:

Code: Select all

<SCRIPT LANGUAGE="JavaScript">
<!-- Hiding
// input number to convert into filename 
var number = 1;
//convesion string
var weergave = Right("0000" + number.toString(),4);
var him = '../afbeeldingen/M' + weergave + '.jpg';
 
//preload next image
var vlgd = nummer + 1;
var vafb = Right("0000" + vlgd.toString(),4);
var vim = '../afbeeldingen/M' + vafb +  '.jpg';
 
//function to load image from sting into imgShow
function ShowPic1()
{
document.getElementById('imgShow').width = 440;
document.getElementById('imgShow').height = 440;
document.getElementById('imgShow').src = (him);
}
 
//function to open resized image on a new page by using string
function sendData()
{
window.open("Vergroting.htm?" + him, 'test', 'width=768, height=768');
}
 
function Right(str, n){
    if (n <= 0)
       return "";
    else if (n > String(str).length)
       return str;
    else {
       var iLen = String(str).length;
       return String(str).substring(iLen, iLen - n);
    }
}
// -->
</script>

HTML: Select all

<body onLoad="javascript:ShowPic1()">
<a href="javascript:sendData()"><img src="" alt="klik op plaatje om te vergroten" width="440" height="440" border="0" id="imgShow"></a></img>
<body>

and it works perfectly !
Now, by changing one simple number, everything will load into the right position(s).

Great learning :-}

Regards,
Hans

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
edit xml image files that load into flash	Janisf	Flash & Multimedia Forum	1	Dec 21st, 2007 08:43
Forcing JavaScript to load before images?	JennyChaos	Starting Out	14	Jul 13th, 2007 23:02
(javascript)dynamic value to variable in src	alexrozario	JavaScript Forum	0	Jul 13th, 2007 07:02
load javascript file	VanHype	JavaScript Forum	7	Apr 27th, 2007 15:00
how to load a different image on a web page and attach a hyperlink	everderese	JavaScript Forum	4	Apr 2nd, 2007 16:52

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
How to use a javascript variable to load an image