JavaScript Forum

**Sleeping Troll** · 05-28-2008, 08:32 PM

<img src= var>?
sorry if this seems simple I am converting a site from vbscript.

**vn5ltr** · 05-29-2008, 02:29 AM

HTML Code:

<html>

<head>

<script language = "JavaScript">

function preloader() 

{

heavyImage = new Image(); 

heavyImage.src = "heavyimagefile.jpg";

}

</script>

</head>

<body onLoad="javascript:preloader()">

<a href="#" onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'">

<img name="img01" src="justanotherfile.jpg"></a>

</body>

</html>

**chrishirst** · 05-29-2008, 05:30 AM

@Sleeping Troll

If this is server side JScript (as the majority of your posts are) please use the ASP forum. This forum is for client side javascript. So you are very likely to get perfectly correct answers that are incorrect for your situation.

**Sleeping Troll** · 05-29-2008, 07:37 AM

Nope, this one is preferably client side code for a sub.

**Sleeping Troll** · 05-29-2008, 07:52 AM

<td height="300" bordercolor="#000000"><div align="center" id="LayerProd">
<img name="ProdImg" id="ProdImg" src="dynamic image source"/>

With VB I would put <%= IMGSRC%> How would this change for jscript?

**chrishirst** · 05-29-2008, 07:39 PM

Quote:

<%= IMGSRC%>

???

Thought it wasn't server side?

**Sleeping Troll** · 05-29-2008, 08:10 PM

<img id= "apic" src=<%=PicVal%> ... Is not serverside.

**Sleeping Troll** · 05-29-2008, 08:10 PM

Not ungrateful for the advice though!

**chrishirst** · 05-29-2008, 08:24 PM

'fraid it is. (or it looks like it is)

the <% %> are server side code delimiters. IF they appear in client side code they should simply be ignored along with any code between them but they really shouldn't be there. AND JScript IS a ASP server side language, javascript is client side.

**wayfarer07** · 05-29-2008, 08:33 PM

Not totally sure what you are trying to do, but here is what I think you are talking about:

let's start with an image, somewhere in the body of your document. Just to make things easy, we'll put an id attribute on it, like this:

HTML Code:

<img src="wherever/img.jpg" id="myimage">

Now, in the head, we'll put a script, like this:

HTML Code:

<head>
<script type="text/javascript">
function init() {
var imgSrc = document.getElementById('myimage').src;
}
window.onload=init; //wait for the DOM and all images to load, then execute function
</script>
</head>

That should do it. Now the variable imgSrc is an object representing the src atribute of the image "myimage". Now, not only can you use the text of the src attribute dynamically { example: alert(imgSrc); }, but you could also set the src in the image like this:
imgSrc = "wherever/otherimg.jpg";

The variable imgSrc is local to the function init(). If you want it to be a global variable you need to declare it before the window.onload event, and preface it with the var keyword. Then, if you want to access it as a global variable, you don't declare it inside of the function. This is one of the tricky things about Javascript that causes many developers to trip up.

**Sleeping Troll** · 05-29-2008, 10:00 PM

Chris, jscript is just the Microsoft version of javascript, any language can be a server side language as long as your server can interpret it. Vbscript, javascript, Jscript, C++, C#, PHP... and any language can be a client script as long as your browser can interpret it. Not to worry though I am new to Jscript and Javascript, haven't even touched PHP. I am just as confused and caffein baked as the rest of you!

**wayfarer07** · 11:06 PM

I'm going to expand on my previous thread. After talking to you privately, I think I understand what you need. Let's take my previous example and expand on it:

HTML Code:

<head>
<script type="text/javascript">
function init() {
var myImg = document.getElementById('myimage');

document.getElementById('mylink').onclick = function() {
myImg.src = "wherever/img2.jpg";
}

}
window.onload=init; //wait for the DOM and all images to load, then execute function
</script>
</head>

<body>
<img src="whatever/img1.jpg" id="myimage">
<a href="#" id="mylink">Click to change image</a>
</body>

Let's break down each part of this.

First, the window.onload event activates the function init. Note that I use no parenthesis here. Although the function would still work, it would ruin potential usage of the 'this' keyword, which I don't want, in case I need it in the future.

The first thing that happens in the init() function is the creation of the variable(or object) myImg, which is bound together with getElementbyId and the id "myimage". This object now represents the image, which can be chained together with the 'src' attribute to change the image dynamically.

Next, I create a simple event on the anchor with the id of "mylink" by chaining it to the onclick method, then wrapping a statement in an anonymous function since it's just a one-line code. (myImg.src = "wherever/img2.jpg").

All this means is that if I click on the anchor "mylink", the image src of "myimage" will change from "whatever/img1.jpg" to "wherever/img2.jpg".

Hope this helps.