Need help with JavaScript, please. My plan is to copy image url onClick and paste it onto input field but instead of showing the link i want to show thumbnail of the image link. What I found online is just to show the link. Here's the code: <head> <script type="text/javascript"> function clicked(address) { document.getElementById('copy_img').value = address.src; } </script> </head> <body> <div id="imagecontainer01"> <ul id="image_list"> <li><img src="images01.png" onclick="clicked(this)" /></li> <li><img src="images02.png" onclick="clicked(this)" /></li> <li><img src="images03.png" onclick="clicked(this)" /></li> </ul> </div> <div id="imagecontainer02"> <form> <label for="copy_img">Image</label> <input type="text" name="copy_img" id="copy_img" /> </form> </div> I also want to save 9 image url and of course display 9 thumbnails. Thank you in advance!
Well... while what you are thinking is practical to do, you've got a few little niggling 'flaws' in the approach. The biggest of these is that when building something like a form, you should first whenever possible ask "How is this going to work WITHOUT scripting?" In this case, I'd probably consider making each selection IMG be the LABEL for a radio button. Fun thing about labels is that if you use FOR pointing at a checkbox or radio's ID, clicking on the label will toggle that INPUT's state in any browser newer than IE 5.0. (so that's pretty safe to use). The reason for thinking about making it work scripting off is that's really the cornerstone of good scripting -- progressively enhance the page, instead of supplanting it's functionality. You have people like myself who often browse scripting disabled -- MANY sites are destroying their usability through the overuse of scripting; and it's not like we can't make most things work both ways! From there the other issues are 'minor'... manually setting the triggers on each image in the markup instead of nabbing them all from the scripting, while it might be a list of choices the use of labels and inputs in a fieldset would be far more appropriate than a UL, there's no real reason to use any extra DIV when things like FORM or UL are perfectly good block-level containers in their own right, etc, etc... So, first order of business is to clean up the markup and make a version that would work scripting off... something like: <form action="#" method="post" class="selectImgForm"> <fieldset id="imageSelector" class="selectImgSet"> <legend><span>Select an Image</span></legend> <label for="imageSelector_1"> <img src="images/image01_thumb.jpg" alt="First Image" /> <input type="radio" name="imageSelector" id="imageSelector_1" value="images/image01.jpg" /> </label> <br /> <label for="imageSelector_2"> <img src="images/image02_thumb.jpg" alt="Second Image" /> <input type="radio" name="imageSelector" id="imageSelector_2" value="images/image02.jpg" /> </label> <br /> <label for="imageSelector_3"> <img src="images/image03_thumb.jpg" alt="Third Image" /> <input type="radio" name="imageSelector" id="imageSelector_3" value="images/image03.jpg" /> </label> <br /> <label for="imageSelector_4"> <img src="images/image04_thumb.jpg" alt="Fourth Image" /> <input type="radio" name="imageSelector" id="imageSelector_4" value="images/image04.jpg" /> </label> <br /> <label for="imageSelector_5"> <img src="images/image05_thumb.jpg" alt="Fifth Image" /> <input type="radio" name="imageSelector" id="imageSelector_5" value="images/image05.jpg" /> </label> <br /> <label for="imageSelector_6"> <img src="images/image06_thumb.jpg" alt="Sixth Image" /> <input type="radio" name="imageSelector" id="imageSelector_6" value="images/image06.jpg" /> </label> </fieldset> <div class="submitsAndData"> <input type="submit" name="submit" value="Submit" /> </div> </form> Code (markup): It might feel a little class and DIV heavy, but really the classes are there for styling, the ID's are there as scripting hooks. I have a distinct class as you might target MORE than one fieldset on a page having multiple previews as well. Extending the functionality one might ID's on multiple DIV for said previews, having the script insert the IMG there instead. From there we just need a method to target the fieldset by it's ID, and then automatically add all our scripting hooks, and let's add the preview image to the 'submitsAndData' DIV with the scripting -- since there's no reason for it to even be in the markup since it would be non-functional scripting off. Something like this: function addImageList(id) { var fs = document.getElementById(id), list = fs.getElementsByTagName('input'), img = document.createElement('img'), t = 0, e; fs.className += (fs.className ? ' ' : '') + 'scriptOn'; e = fs.nextSibling; while (e && (e.className != 'submitsAndData')) e = e.nextSibling; if (e.className = 'submitsAndData') { img.src = 'images/select.png'; img.className = 'selectedImage'; img.alt = 'Selected Image'; e.insertBefore(img,e.firstChild); while (e = list[t++]) { e.targetImg = img; e.onchange = function(e) { e = e || window.event; var t = e.target || e.srcElement; if (t.checked) t.targetImg.src = t.value; } } } } Code (markup): Get the fieldset, make a list of it's inputs, make the preview image, let the fieldset know scripting is on so we can hide the checkboxes (I slide them off the screen with CSS instead of display:none -- screen readers wouldn't let you select them otherwise!). Find the 'submitsAndData' DIV by looking at the fieldset's siblings (that way we don't waste an ID)... fill in the preview image's attributes, then loop through the inputs, extending them with a pointer to the selected image, and then adding our onchange property to them. Again clicking anywhere on the label trips onchange, we hook the input[radio] instead of each IMG. This means server side all you'd have to check is $_POST['imageSelector'] and it will return that checkbox's value. Notice I also set it up so that the value points to the 'full' image, while the IMG tag points at a thumbnail -- as it should be. A little AJAX trickery to cache load the larger images might make it 'prettier', but I'm not sure it's worth the effort/bandwidth difference. I put up a live demo here: http://www.cutcodedown.com/for_others/gab0natchi/ CSS off graceful degradation, scripting off graceful degradation -- all because I wrote it to work without scripting, then progressively enhance it. That about what you were looking for? Hope this helps.
Thank you so much for the help and lecture! I appreciate the time and effort you spent. What you've done is hardcore, will take time to digest. I have a new concern though. My image list is the result from php (echo "<img src=\"{$data->images->thumbnail->url}\">". I have no idea how to put them in label. So far, this is the best answer.
Hard to say without seeing the full code being used to generate it -- specifically the structure of $data as I've no clue what that has in it for values... can I assume that there's some form of 'text' and the regular image url? Guessing wildly: // outside your loop (probably a foreach?) $counter=0; Code (markup): // inside the loop $newId='imageSelector_'.$counter++; echo ' <label for="',$newId,'"> <img src="',$data->images->thumbnail->url,'" alt="',$data->images->alt,'" /> <input type="radio" name="imageSelector" id="',$newId,'" value="',$data->images->url,'" /> </label>'; Code (markup): obviously you'd have to replace $data->images->url and $data->images->alt with the correct values from that object. There might even be a unique value suitable to use as an ID instead of using a counter (like if that's a foreach, does $data have corresponding keys?) What system is this you are working on? Is it something 'off the shelf' or custom code? Can you post a print_r of $data for one of the images? echo '<pre>',print_r($data->images),'</pre>'; The output from that for one of the images would give a better picture of what values are available to be plugged in, and which ones have to be 'made up'.
I'm not sure if I'm allowed to post the code here, but the code I used came from a tutorial online. I'll try to put these codes that you gave me. Thanks again for your help! I appreciate it.