Jump to content

dynamic variable to display image?


markgibson77
 Share

Recommended Posts

HiCan anyone help me?I am using a dynamic variable on my site, the variable is coming from an external source and is displayed on my site as a number, it counts 0, 1, 2, 3, 4, 5 (then loops) this all works fine.I now want to assign an image based on the variable, ie variable 0=image1, variable 1=image2 etc…My current code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>mark</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" language="javascript" src="mchp.js"></script><link href="piclinkstylesheet.css" rel="stylesheet" type="text/css"><style type="text/css">body {	background-color: #FFF;}</style><!--this does not work--><script type="text/javascript">var (markscounter);</script></head><body ><!--this displays my variable and works fine!--><span id="markscounter"></span></br><!--this does not work--><script>document.write ('markscounter');</script></body></html><!--this is used to get the variable, then update it!--><script type="text/javascript"><!--// Parses the xmlResponse from Diagnostics.xml and updates the status boxfunction updateStatus(xmlData) {               document.getElementById('markscounter').innerHTML = getXMLValue(xmlData, 'markscounter');     	}	setTimeout("newAJAXCommand('marks.xml', updateStatus, true)",500);//--></script>

Link to comment
Share on other sites

just create a javascript array containing img file names, then use returned value to select image from arrayinnerHTML="<image src='myimagefolder/"+myImages[markscounter]+"' />";this wont work<!--this does not work--><script>document.write ('markscounter');</script>the function has not been run yet!, so it can't provide the value, and will run once when page is first loaded, so won't update when the value changes anyway.

Edited by dsonesuk
Link to comment
Share on other sites

Thanks for the fast response! I have tried implementing as suggested?? Not sure if I have got this correct, but it doesn't work?I'm sure it's just my lack of JS knowledge!!!!my images are:images/photo01.jpgimages/photo02.jpg...The variable output (markscounter) = 01, 02, 03....-------------------------------------------------------------------------------------<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>mark</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" language="javascript" src="mchp.js"></script><link href="piclinkstylesheet.css" rel="stylesheet" type="text/css"><style type="text/css">body { background-color: #FFF;}</style></head><body ><span id="markscounter"></span></br><script>innerHTML="<image src='images/"+photo[markscounter]+.jpg"' />";</script></body></html><script type="text/javascript"><!--// Parses the xmlResponse from Diagnostics.xml and updates the status boxfunction updateStatus(xmlData) { document.getElementById('markscounter').innerHTML = getXMLValue(xmlData, 'markscounter'); } setTimeout("newAJAXCommand('marks.xml', updateStatus, true)",500);//--></script>---------------------------------------------------------------------------------

Link to comment
Share on other sites

No, not like that, like thiscreate container with id ref under span, or anywhere in body<div id="showimagehere"></div>now i know images are going to have identical name, except for 01 , 02 at end, we can forget the array and go for this methodin javascript code underdocument.getElementById('markscounter').innerHTML = getXMLValue(xmlData, 'markscounter'); newimageref=getXMLValue(xmlData, 'markscounter')document.getElementById('showimagehere').innerHTML="<image src='images/photo"+newimageref+".jpg' />";there maybe a problem with 01 being converted to 1, have not tested it, but try it out.edit: slight error in code in bold

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...