Load and display an image.
in [JavaScript]
|
Prev: FAQ Topic - Why does K = parseInt('09') set K to 0? (2010-05-29)
Next: Can't show flash player again on IE
From: Thomas 'PointedEars' Lahn on 29 May 2010 06:54 johncoltrane wrote: > bruce a écrit : >> <script type='text/javascript'> >> >> function getImage() { >> var image = "images/MtRushmore.JPG" ; >> document.getElementById('imgSpot').src=image; >> } >> >> </script> >> <form name="form1" id="form1" method="post" action=""> >> <img id='imgSpot' name='imgSpot' src="" height="200" width="200"/> >> <br ? /> <http://validator.w3.org/> >> <input name="Submit" type="submit" onclick="getImage()" >> value="Submit" /> >> </form> > > You need to prevent the default behavior of your form's Submit button: > > <form name="form1" id="form1" method="post" action=""> > <img id="imgSpot" name="imgSpot" src="" height="200" width="200"> > <br> > <input name="Submit" > type="submit" > onclick="getImage();return false;" // here > value="Submit"> > </form> No. 1. Never name a form control "submit", that overrides the built-in submit() method of the form. 2. Cancel the `submit' event of the form, not the `click' event of the submit button. You never know how the user is going to submit the form. 3. For this to work, the form does not need a name and ID, and the image does not need an ID. The form "knows itself" by `this' in the event handler attribute, and the image can be accessed through the `document.images[...]' collection. The proper way to do this is of course <form action="" method="post" onsubmit="getImage('imgSpot'); return false;"> <img name="imgSpot" src="" height="200" width="200" alt="alternative text"> <br> <input type="submit" name="submit_button" value="Submit"> </form> or not to use a form at all. The form(er) approach can be made accessible, though (by use of an iframe and the `target' attribute), the latter is less user-friendly (navigation to an image). You would want to change the required `alt' attribute according to the image selected, by assigning to the image object's `alt' property. PointedEars -- realism: HTML 4.01 Strict evangelism: XHTML 1.0 Strict madness: XHTML 1.1 as application/xhtml+xml -- Bjoern Hoehrmann
From: bruce on 29 May 2010 12:02 On May 29, 6:54 am, Thomas 'PointedEars' Lahn <PointedE...(a)web.de> wrote: > johncoltrane wrote: > > bruce a écrit : > >> <script type='text/javascript'> > > >> function getImage() { > >> var image = "images/MtRushmore.JPG" ; > >> document.getElementById('imgSpot').src=image; > >> } > > >> </script> > >> <form name="form1" id="form1" method="post" action=""> > >> <img id='imgSpot' name='imgSpot' src="" height="200" width="200"/> > >> <br ? /> > > <http://validator.w3.org/> > > >> <input name="Submit" type="submit" onclick="getImage()" > >> value="Submit" /> > >> </form> > > > You need to prevent the default behavior of your form's Submit button: > > > <form name="form1" id="form1" method="post" action=""> > > <img id="imgSpot" name="imgSpot" src="" height="200" width="200"> > > <br> > > <input name="Submit" > > type="submit" > > onclick="getImage();return false;" // here > > value="Submit"> > > </form> > > No. > > 1. Never name a form control "submit", that overrides the built-in submit() > method of the form. > > 2. Cancel the `submit' event of the form, not the `click' event of the > submit button. You never know how the user is going to submit the form. > > 3. For this to work, the form does not need a name and ID, and the image > does not need an ID. The form "knows itself" by `this' in the event > handler attribute, and the image can be accessed through the > `document.images[...]' collection. > > The proper way to do this is of course > > <form action="" method="post" > onsubmit="getImage('imgSpot'); return false;"> > <img name="imgSpot" src="" height="200" width="200" > alt="alternative text"> > <br> > <input type="submit" name="submit_button" value="Submit"> > </form> > > or not to use a form at all. The form(er) approach can be made accessible, > though (by use of an iframe and the `target' attribute), the latter is > less user-friendly (navigation to an image). > > You would want to change the required `alt' attribute according to the image > selected, by assigning to the image object's `alt' property. > > PointedEars > -- > realism: HTML 4.01 Strict > evangelism: XHTML 1.0 Strict > madness: XHTML 1.1 as application/xhtml+xml > -- Bjoern Hoehrmann Thanks to all for the responses. These suggestions will solve my problem. A brief apology. The sample code was indeed sloppy. Next time I'll try to be more careful. The <br ?/> was a typo. Should have been <br />... Thanks again for the great examples... Bruce
From: bruce on 29 May 2010 12:14 On May 29, 6:54 am, Thomas 'PointedEars' Lahn <PointedE...(a)web.de> wrote: > johncoltrane wrote: > > bruce a écrit : > >> <script type='text/javascript'> > > >> function getImage() { > >> var image = "images/MtRushmore.JPG" ; > >> document.getElementById('imgSpot').src=image; > >> } > > >> </script> > >> <form name="form1" id="form1" method="post" action=""> > >> <img id='imgSpot' name='imgSpot' src="" height="200" width="200"/> > >> <br ? /> > > <http://validator.w3.org/> > > >> <input name="Submit" type="submit" onclick="getImage()" > >> value="Submit" /> > >> </form> > > > You need to prevent the default behavior of your form's Submit button: > > > <form name="form1" id="form1" method="post" action=""> > > <img id="imgSpot" name="imgSpot" src="" height="200" width="200"> > > <br> > > <input name="Submit" > > type="submit" > > onclick="getImage();return false;" // here > > value="Submit"> > > </form> > > No. > > 1. Never name a form control "submit", that overrides the built-in submit() > method of the form. > > 2. Cancel the `submit' event of the form, not the `click' event of the > submit button. You never know how the user is going to submit the form. > > 3. For this to work, the form does not need a name and ID, and the image > does not need an ID. The form "knows itself" by `this' in the event > handler attribute, and the image can be accessed through the > `document.images[...]' collection. > > The proper way to do this is of course > > <form action="" method="post" > onsubmit="getImage('imgSpot'); return false;"> > <img name="imgSpot" src="" height="200" width="200" > alt="alternative text"> > <br> > <input type="submit" name="submit_button" value="Submit"> > </form> > > or not to use a form at all. The form(er) approach can be made accessible, > though (by use of an iframe and the `target' attribute), the latter is > less user-friendly (navigation to an image). > > You would want to change the required `alt' attribute according to the image > selected, by assigning to the image object's `alt' property. > > PointedEars > -- > realism: HTML 4.01 Strict > evangelism: XHTML 1.0 Strict > madness: XHTML 1.1 as application/xhtml+xml > -- Bjoern Hoehrmann I'm using a form because the actual image I want to display is on the server. I plan to send a POST request, using AJAX, to get the image as well as some other data. Thoughts on this approach? Thanks...
From: Thomas 'PointedEars' Lahn on 29 May 2010 12:50 bruce wrote: > Thomas 'PointedEars' Lahn wrote: >> The proper way to do this is of course >> >> <form action="" method="post" >> onsubmit="getImage('imgSpot'); return false;"> >> <img name="imgSpot" src="" height="200" width="200" >> alt="alternative text"> >> <br> >> <input type="submit" name="submit_button" value="Submit"> >> </form> >> >> or not to use a form at all. The form(er) approach can be made >> accessible, though (by use of an iframe and the `target' attribute), the >> latter is less user-friendly (navigation to an image). >> [...] > > I'm using a form because the actual image I want to display is on the > server. I plan to send a POST request, using AJAX, to get the image as > well as some other data. Thoughts on this approach? AISB, you will need one or two fallback solutions (but you can use basically the same markup for them). Neither XHR/AJAX nor client-side scripting may be supported. A first step would be to return `false' only if retrieving the image with scripting failed, so that the default action (the form submit) is not prevented then. Please trim your quotes to the relevant minimum, do not quote signatures unless you are referring to them. <http://jibbering.com/faq/#posting> PointedEars -- realism: HTML 4.01 Strict evangelism: XHTML 1.0 Strict madness: XHTML 1.1 as application/xhtml+xml -- Bjoern Hoehrmann
From: SAM on 29 May 2010 18:50 Le 5/29/10 6:14 PM, bruce a �crit : > > I'm using a form because the actual image I want to display is on the > server. I plan to send a POST request, using AJAX, to get the image as > well as some other data. Thoughts on this approach? Not sure that Ajax needs absolutely to be activated by a form submission. The function that will send the request via Ajax ways can "post" by itself. .../... httpRequest.open('POST', url, true); .../... Using the form solution permits to send easily the request in "normal" way if the Ajax fails (javascript disabled for instance), if you need to send too some more data as name of visitor, a date, or anything else requested by visitor. If no visitor's info are needed, a simple link may do the job (but not in post method). <form action="emergencyWay.php" method="post" onsubmit="return myAjax()"> <a href="emergencyWay.php?image=tutu.jpg&text=file.htm" onclick="return myAjax()"> in both solutions myAjax() in case of : - success will have to return false - failure will have to return true <https://developer.mozilla.org/en/AJAX/Getting_Started> (in several languages) -- sm
First
|
Prev
|
Next
|
Last
Pages: 1 2 3 Prev: FAQ Topic - Why does K = parseInt('09') set K to 0? (2010-05-29) Next: Can't show flash player again on IE |