0

Update image with javascript

I've created an xml file for the snippet and update its filename in application.js
CODE
- <window>
<image id="image1" src="image/960x540/application-icon.png" vOffset="17" hOffset="10" />
</window>


when I start the widget, I can see the image on the snippet.
My question is how to change this image in my javascript code.(update dynamically the src property of the element image)
I've tried the method getElementById('image1') .src="another_image.png" but it doesn't work.
Thank you for your help.

by
4 Replies
  • You are not finding the image object because you are not looking inside the window you placed it in.
    Give the Window an id="mywindow" and do the below:

    CODE
    <window id="mywindow">
    <image id="image1" src="image/960x540/application-icon.png" vOffset="17" hOffset="10" />
    </window>

    //Javascript
    (mywindow.getElementById("image1")).src="another_image.png";
    0
  • Thank you for your help.
    In the file application.js, I've defined the xml file for the snippets:
    CODE
    filename: 'config/windowSnippet.xml',

    So if the id of the window is "windowSnippet", as you said, the system must have created a global variable " windowSnippet" ?
    I've tried in my javascript code (windowSnippet.getElementById("image1")).src="another_image.png";
    But the console shows an error: ReferenceError: windowSnippet is not defined (xmlHTTP.js: Line 127)




    QUOTE (WidgetRealm @ May 27 2009, 08:49 AM) <{POST_SNAPBACK}>
    You are not finding the image object because you are not looking inside the window you placed it in.
    Give the Window an id="mywindow" and do the below:

    CODE
    <window id="mywindow">
    <image id="image1" src="image/960x540/application-icon.png" vOffset="17" hOffset="10" />
    </window>

    //Javascript
    (mywindow.getElementById("image1")).src="another_image.png";
    0
  • Just realized there was an error in the code I provided.

    CODE
    <window name="mywindow_name" id="mywindow">
    <image id="image1" src="image/960x540/application-icon.png" vOffset="17" hOffset="10" />
    </window>

    //Javascript
    //by var name
    ( mywindow_name.getElementById("image1") ).src="another_image.png";
    //OR
    //by ID
    ( (mywindow.getElementById("mywindow") ).getElementById("image1") ).src="another_image.png";
    //by Framework Shortcut - page 91 WDK
    ( $( 'image1' , $('mywindow') ) ).src="another_image.png";


    BTW - the ID of an object does not relate to the variable NAME given to the object.
    When using XML to define an object you must use the "name" attribute to define the variable reference.
    0
  • Thanks, it works :lWhen using XML to define an object you must use the "name" attribute to define the variable reference.
    0

Recent Posts

in General - Yahoo! TV Widgets