Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Location
    London UK
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help With displaying an Image in HTML

    Hi,

    I'm having problems displaying images on a site. Basically I have a to change an image each time a button is pressed on a piece of hardware.

    This is the code to detect a button press

    Code:
    	// Check Button
    	tstileo = new Image();
    	tstilec = new Image();
    	tstileo.src = '/images/1.jpg';
    	tstilec.src = '/images/2.jpg';
    	
    	document.getElementById('btn0').innerHTML = (getXMLValue(xmlData, 'btn0') == 'up') ? document.Image=(tstileo): document.Image=(tstilec);
    So when the button is pressed/unpressed it should display tstileo and tstilec

    What format should my HTML code be to display the image ?

    This is whats there at the moment

    Code:
    <span id="btn0">?</span></p>
    When running all I get is text saying
    Code:
     [OBJECT HTMLImageElement]
    This site is being hosted on a microchip, btn0 is a press button switch on the board. The idea is to use this as a remote monitoring system. It runs Javascript XML HTML and CSS.

    Any help would be greatly appreciated, I have spent hours searching for a way to do this ( simple ? ) task but haven't got any further than this.

    Thanks

    Jay
    Last edited by odessa; 07-10-2011 at 04:36 PM.

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    Unless you really want to preload those images, just do this:

    Code:
    	// Check Button
    	document.getElementById('btn0').innerHTML = '<img src="/images/'+(getXMLValue(xmlData, 'btn0') == 'up' ? '1' : '2')+'.jpg">';
    I'm the founder of Loggur, a place to build and share web apps focused on maximizing efficiency and productivity:
    http://www.loggur.com

    My personal site and blog:
    http://www.tfburgess.com

  • Users who have thanked tfburges for this post:

    odessa (07-10-2011)

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Location
    London UK
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much

    That works perfectly

    I've been having to get to grips with Javascript / CSS / XML and C to do this so its a bit of a struggle ... fun though !!

    I really appreciate your help and time


    Jay


  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Location
    London UK
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi,

    I have another similar question/problem.

    I want to modify a line of HTML like above using a variable. The idea is to turn my voltage reading red if it drops below 22 or above 26 volts. I'm using this:

    Code:
    document.getElementById('volstat0').innerHTML= '<div class = "'+getXMLValue(xmlData, 'volstat0')+'">';
    This idea is if the voltage is ok the variable 'volok' is sent telling page to use black color or 'volprob' which tells it to display in red.

    I have checked that 'volstat0' changes from 'volok' to 'volprob' when the voltage does so I presume my problem lies in the way I'm writing the Java ?

    Can anyone help please ?

    Edit: Solved it at last,

    Used this instead:

    document.getElementById('volstat0').style.color = (getXMLValue(xmlData, 'volstat0') == '1') ? '#F00' : '#090';
    Last edited by odessa; 07-30-2011 at 05:05 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •