# Javascript Image switching

**URL:** <https://forum.servoy.com/t/javascript-image-switching/7030>\
**Category:** Classic Servoy\
**Created:** [February 2, 2007, 12:34pm UTC](https://forum.servoy.com/t/javascript-image-switching/7030 "2007-02-02T12:34:11Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![imJames](https://avatars.discourse-cdn.com/v4/letter/i/35a633/32.png) [@imJames](https://forum.servoy.com/u/imJames)\
**Post date:** [February 2, 2007, 12:34pm UTC](https://forum.servoy.com/t/javascript-image-switching/7030/1 "2007-02-02T12:34:11Z")

</div>

Hi,

I have simple (newbie) question about images.

I want to load an image with javascript and then show it on a form.

I know how to load the image:  
var image = plugins.images.getImage(“C:\asd\asd.png”);

But then I don’t know what element to put in the form to receive the image.

On the form there must be a placeholder or someting, what is the right type of the element knowing that the image is 800\*600 and will be switched often?

---

<div class="post-metadata">

**Author:** ![grahamg](https://avatars.discourse-cdn.com/v4/letter/g/a4c791/32.png) [@grahamg](https://forum.servoy.com/u/grahamg)\
**Post date:** [February 2, 2007, 1:35pm UTC](https://forum.servoy.com/t/javascript-image-switching/7030/2 "2007-02-02T13:35:31Z")

</div>

Welcome to Servoy

You can place the image in a media field or onto a Label/Button. Try this:

```auto
 var vFile = plugins.file.showFileOpenDialog();
var vImage = plugins.images.getImage(vFile);
var vHeight = 400;
var vWidth = 300;
var vScaled_image = image.resize(vWidth, vHeight);
image_1 = vScaled_image;

```

image\_1 is a field in this case and I’ve hardcoded vHeight & vWidth to shrink your photos by 50% but these would normally be variables selected by the User.

Hope this gets you started.

Graham Greensall  
Worxinfo Ltd

---

<div class="post-metadata">

**Author:** ![ROCLASI](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/roclasi/32/4371_2.png) [@ROCLASI](https://forum.servoy.com/u/ROCLASI)\
**Post date:** [February 2, 2007, 1:36pm UTC](https://forum.servoy.com/t/javascript-image-switching/7030/3 "2007-02-02T13:36:49Z")

</div>

Hi,

You can’t pass a string as file reference to the image plugin. It needs to be a JSFile object.  
The following code would work:

```auto
var f = plugins.file.convertToJSFile("C:\\asd\\asd.png")
globals.myBigImage = plugins.images.getImage(f);

```

As you can see I put the image into a global field. This field is of type Media.  
Now you can put a **label** or a **field** (with DisplayType set to image\_media) and use the global as dataprovider.  
You can’t do this with javascript variables, you need to use Servoy globals.

Hope this helps.

---

<div class="post-metadata">

**Author:** ![imJames](https://avatars.discourse-cdn.com/v4/letter/i/35a633/32.png) [@imJames](https://forum.servoy.com/u/imJames)\
**Post date:** [February 2, 2007, 3:51pm UTC](https://forum.servoy.com/t/javascript-image-switching/7030/4 "2007-02-02T15:51:58Z")

</div>

I must be missing something.

I’ve done that:

```auto
var s = "C:\\asdsad\\7141.png";
var file = plugins.file.convertToJSFile(s);
globals.gImgRel = plugins.images.getImage(file);

```

and I’ve created a label with the dataprovider set to globals.gImgRel.

However when I execute the method all I see inside the label is:

> org.mozilla.javascript.NativeJavaObject@1194a34

Same thing with a field.

What have I done wrong?

---

<div class="post-metadata">

**Author:** ![imJames](https://avatars.discourse-cdn.com/v4/letter/i/35a633/32.png) [@imJames](https://forum.servoy.com/u/imJames)\
**Post date:** [February 2, 2007, 4:09pm UTC](https://forum.servoy.com/t/javascript-image-switching/7030/5 "2007-02-02T16:09:16Z")

</div>

The only thing that seems to work right now is:

```auto
elements.placeholderImgRel.setImageURL("file:///C:/Documents%20and%20Settings/Admin/1052.png");

```

“placeholderImgRel” is the name of a label.

---

<div class="post-metadata">

**Author:** ![ROCLASI](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/roclasi/32/4371_2.png) [@ROCLASI](https://forum.servoy.com/u/ROCLASI)\
**Post date:** [February 2, 2007, 6:51pm UTC](https://forum.servoy.com/t/javascript-image-switching/7030/6 "2007-02-02T18:51:38Z")

</div>

> imJames:
> 
> > org.mozilla.javascript.NativeJavaObject@1194a34
> 
> Same thing with a field.
> 
> What have I done wrong?

You set the dataprovider property of the label or did you used a %%merge code%% in the text property? You should use the dataprovider property.  
Also make sure the global is of type MEDIA.  
I tested to code I posted and it works fine for me…I am on a Mac though but that shouldn’t make a difference.

Hope this helps.

---

<div class="post-metadata">

**Author:** ![imJames](https://avatars.discourse-cdn.com/v4/letter/i/35a633/32.png) [@imJames](https://forum.servoy.com/u/imJames)\
**Post date:** [February 3, 2007, 7:50am UTC](https://forum.servoy.com/t/javascript-image-switching/7030/7 "2007-02-03T07:50:13Z")

</div>

I did what you said: I set the dataprovider to the globas variable of MEDIA type and the text property was empty. And I saw what I saw.

I use Version 3.1-build 404 on Java version 1.6.0-b105 (Windows 2000).

---

<div class="post-metadata">

**Author:** ![ROCLASI](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/roclasi/32/4371_2.png) [@ROCLASI](https://forum.servoy.com/u/ROCLASI)\
**Post date:** [February 4, 2007, 2:25pm UTC](https://forum.servoy.com/t/javascript-image-switching/7030/8 "2007-02-04T14:25:28Z")

</div>

Hmm…I see the same thing in 3.1. (Java version 1.5.0\_06-64 (Mac OS X))  
Originally I tested it in 2.2.7 which worked fine.  
Seems it’s utterly broken/changed in 3.1.

---

<div class="post-metadata">

**Author:** ![rgansevles](https://avatars.discourse-cdn.com/v4/letter/r/3d9bf3/32.png) [@rgansevles](https://forum.servoy.com/u/rgansevles)\
**Post date:** [February 6, 2007, 8:40am UTC](https://forum.servoy.com/t/javascript-image-switching/7030/9 "2007-02-06T08:40:02Z")

</div>

Yes, this is a bug, it will be fixed in next release.  
Rob

---

<div class="post-metadata">

**Author:** ![ROCLASI](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/roclasi/32/4371_2.png) [@ROCLASI](https://forum.servoy.com/u/ROCLASI)\
**Post date:** [February 6, 2007, 9:15am UTC](https://forum.servoy.com/t/javascript-image-switching/7030/10 "2007-02-06T09:15:59Z")

</div>

Thanks Rob.

Can you also check out the getMetaDataProperties function of the image plugin. It seems to return a [Ljava.lang.String;.  
Apparently not something javaScript can handle.

Thanks again.

---

<div class="post-metadata">

**Author:** ![rgansevles](https://avatars.discourse-cdn.com/v4/letter/r/3d9bf3/32.png) [@rgansevles](https://forum.servoy.com/u/rgansevles)\
**Post date:** [February 6, 2007, 10:14am UTC](https://forum.servoy.com/t/javascript-image-switching/7030/11 "2007-02-06T10:14:14Z")

</div>

> ROCLASI:  
> Can you also check out the getMetaDataProperties function of the image plugin. It seems to return a [Ljava.lang.String

I can’t seem to reproduce this, can you show an example?

Rob

---

<div class="post-metadata">

**Author:** ![ROCLASI](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/roclasi/32/4371_2.png) [@ROCLASI](https://forum.servoy.com/u/ROCLASI)\
**Post date:** [February 6, 2007, 10:23am UTC](https://forum.servoy.com/t/javascript-image-switching/7030/12 "2007-02-06T10:23:31Z")

</div>

Ah, nevermind.

I tried it on a picture without Exif data and I didn’t realised it was an array that was returned. ![:oops:]( "Embarassed")