HTML - Trying To Display Product Images When Check Boxes Are Clicked.
Hello, I have designed sites in the past but am in need of some assistance. I am designing a website for an artist who wants to be able to offer his clients fine art prints for sale. He needs to be able prints with several different product options; i.e. canvas print with 1" stretch, 2" stretch and framed prints. I want to be able to offer check boxes (or equivalent) that will display an image of the different product options available. If the 1" stretch check box is checked I need an image of a canvas on a 1" gallery wrap frame to be displayed. If they click on the "frame" check box, I need an image of a framed painting to be displayed. What is the best method to use to accomplish this? I've researched and experimented but am at a bit of a loss. Any help will be greatly appreciated. Thank you in advance!! -John
Similar TutorialsHiya! My question today is- how do you disable the border that pops up when clicking on an image, either in HTML or DW, doesn't matter. Thanks! Example: Hello! I hope someone can help! On the left column of my website he http://www.showlistportland.com ...there are ads. Hyperlinked images. But, when clicked they move out of the way!! How can I stabilize these images??? Any help is much appreciated!!! Thanks, b I have had this problem on almost all the websites I've made and I'm too picky to let it go... When I make the navigation images/buttons for a website, I set the border to zero as usual and link each image to its respective page. But, when I click on the image to take me where it's supposed to, this pesky dotted border appears around the edge of the image after it has been clicked and it remains there until I click on something else on that page. (This also happens to text links when clicked, but I'm not too worried about the text links.) For the websites I've made that go to an entirely new page after an image link is clicked, the dotted line appears around the linked image after it's clicked and before the next page has loaded, but then after the new page loads the dotted line is gone. But, for websites I have built that utilize frames, because the new page that loads is in an iframe, and because the page the navigation buttons are located on never changes, the dotted border stays around the image after its been clicked and, like I mentioned earlier, doesn't go away until I click on something else on that same page. An example of this can be seen when you click the images in the navigation column along the left side of a website I built located at the following URL: http://www.djprogress1.com/ This border problem could be specific to my website browser (I use Firefox), but I am not sure. And the border could be added entirely by the browser and there may be no way to get rid of it through coding, but again, I am not sure of this. So, does anyone know if anything can be done to fix this or am I stuck with these dotted borders? Thanks, Jase I was wondering if there was any way to do this: I have a site that has a catalog. There are 10 - 20 items per page and about 15 pages/categories. Each item will have a check box. When a checkbox is clicked a window will open (containing a list of EVERY item, quantities, etc.) and a check box next to that particular item will be automatically checked. Then as the user clicks through the catalog and checks off boxes they will be filled in in the new window as well. Basically I need to know how to check a box in one window and have it check a box in another window at the same time. Thanks. hi guys! great day. i'm having problems getting the code for the submit button linked to my checkboxes. our professor wanted that every option or choice that we check on the check box, by clicking the submit button, the pop window should display "you have chosen (your choice/s that you have checked)" this is the code that my professor gave us. (just copy paste the code and open it) <!Doctype html public *-'W3C// DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content ="text/html; charset = ISO-8859" http-equiv="content-type"> <meta keywords = "begin javascript"> <script type="text/javascript"> function outputVariableValues() { var yourName= document.myform.name.value; window.alert ("Hello: "+ yourName); window.alert ("Your Comment: "+ document.myform.comments.value); window.alert ("Thanks for rating us: " + document.myform.rating.value); } </script> <script type="text/javascript"> document.write("www.Ricmer.Mylene"); window.alert ("Welcome to heaven on earth") </script> <title>Web Form01</title> </head> <body> <center><h1>Nikki Nikko Webpage</h1></center> <form name="myform" method="" action=""> <p><label>Name:<input type ="text" value = "jasmine" name="name" size="25"></label> <p><label>Comments:<br><textarea name = "comments" rows = "4" cols ="36">Enter your comments here. </textarea></label></p> <p><label>Rate our Website</label> <select name = "rating"> <option selected ="selected">Amazing</option> <option>10</option> <option>9</option> <option>8</option> <option>7</option> <option>6</option> <option>5</option> <option>4</option>\ <option>3</option> <option>2</option> <option>1</option> <option>Awful</option> <input type = "button" name="submit" Value="Submit" onclick="outputVariableValues()"> <input type ="reset" value ="Reset" name="Reset"> </form> </body> </html> we're going to pass this activity tonight at 9pm. it's 4:12pm now..-_- this is our first time in html coding so i'm very sorry guys..and thanks in advance! Hello, I'm fairly new to HTML and scripting and could use some help. I'm setting up an HTML form with a CGI script (script1) and submitting data to another CGI script (script2) with the POST method using enctype="application/x-www-form-urlencoded". I create my form page with script1 based upon files and it will create a number of check boxes. My problem is that I do not know exactly how many check boxes are created. If they are checked they submit a value, however, if they are not checked, they are not listed in the Query String. So script2 does not know if there is an unchecked check box after the last checked one. Is there an option or a different enctype that will submit their value with a NULL string if they are not checked? Or is there any other way to get around this issue? Any Help you can give me is greatly appreciated. Thanks in advance I'm trying to modify the code from php fusions forum, the problem is that when users post images (using the [img] tag) and the image is big, the page layout moves to accomodate the large image, this is of course not really any good. So. I'm attempting to make large images (Bigger than 360x600) have scroll bars, so they don't damage the page layout. I've managed to get this code working, after alot of beating it around. The problem is, is that in IE an image that is smaller than 360x600 still takes up 360x600 on the page, this is of course bad. Code: <div style="max-width: 360px; width: auto !important; width: 360px; max-height: 600px; height: auto !important; height: 600px; overflow: auto;"><img src="imgurl" /></div> So, if anyone can figure out how to make this not take up 360x600 with images that are not that large, it'd be great. You can see an example of the problem by viewing this page in firefox, and IE. Firefox displays the page correctly. Hi everyone Newbie here and nearly finished my first site - phew! I have one quick question - you know how a browser shows an outline box of the shape of an image before the image downloads, well, is there any way to get rid of it? This box disappears once the image has loaded so it is nothing to do with the "border" tag and all of my images have the height, width border="0" and alt tags completed. (I use a lot of images on the my site as I am a photographer and it looks really ugly while it is waiting for the images on a slow connection) Am happy to use html, css, java... Thanks for any help. Tre Why do the images in the background show through the drop in box on my site? http://www.nomoreheartdiseaseandstrokes.com/ Should I put all the information within a table in the drop in box? Thanks I figured i would post all of my questions in one post so here i go. 1: What is a blue box, where can i find it, and how do i use it? 2: How can i make a background image so that it fits perfectly into the background and everything else just goes over it. 3:Could someone give me a list of colors that look very good together, and some cool color schemes. 4:how do i use divs? 5:Is there a way that i can make a solid color bar and put text over it? and how can i put text over images? Attention all HTML lovers, geeks and essentially anyone who can relieve me of my burden... for you will surely be blessed. Check out this site: equinat-usa.com For whatever the reason, and one clearly above and beyond my HTML ability to see... the page images should be at the very top on both sides. BUT NO!! There is a bit 'o white space at the top. What's up with that? At first, everything was fine... until one day the mysterious white space appeared. DTM *anxiously awaiting your reply* Hello i am having some trouble aligning some checkboxes. I am trying to get them to sit side by side horizontally but when i do this with absolute positioning i will click the first set and it will check the second so i have to go way to the left of the first set to check mark it. Sorry for the butchered script. Thanks <div> <tr> <td height="40"> <label for="budget" class="label">Budget: From</label> <input name="budget" type="text" id="budget"> <span class="from">To</span> <label for="to" class="from"></label> <input name="to" type="text" id="to"> </td> </tr> </div> <tr> <td> <input name="boxesh" type="checkbox" id="home" value="walkdis"> <label for="home" class="checkboxes">Home</label><br> <input name="boxesb" type="checkbox" id="BoatDock" value="walkdis"> <label for="BoatDock" class="checkboxes">Boat dock</label><br> <input name="boxesv" type="checkbox" id="viewofwater" value="walkdis" title="Check the ones you want"> <label for="viewofwater" class="checkboxes">View of Water</label><br> </td> <td> All right, I've stumbled upon a bit on a design block. I'm not sure what I want to do to display images. I don't know if I want to do a gallery...or just have thumbnails and then you click on them to view a larger image...I just don't know what I want to do. So, I was wondering if someone out there could help me and decide what would be best to use with my layout - which here is what it looks like: http://i46.tinypic.com/jj74hw.png - here is the homepage thus far: http://thexoticzoo.webs.com/home.html Any suggestions and help on coding? Hi, I have this msql database containing images, when user enter a query, the program needs to display images back, what is the usual practice for this kind of task? copy all those images to a folder and refer to them with img tag? delete all of them later? care to share some of your tips? Thanks, A.C. In the following code, the image display is inconcsistent: - Firefox: works in all cases - IE7 over Internet: works - IE7 locally: image does not display; I get a placeholder. - IE7 locally on my other computer: works. By "locally", I mean that the HTML file and the image are on my local hard disk; by "Internet", I mean that the HTML file and the image are on the server at my web site service. The image is in the same directory as the HTML file in all cases. Here's the code: <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html> <head> <title>My Page</title> </head> <body> <p>Welcome to My Page</p> <img height="231" width="346" border="0" src="roadtrip003.gif"> </body> </html> I suspect an IE7 setting on the offending computer, but I've looked around quite a bit and it ain't obvious to me. Any thoughts? I just started learning HTML, and made a file just to try out the various things I have learned. The below is said file. When I attempt to view it my picture does not appear, and I don't understand why. Help is much appreciated. <html> <head> <title>Test page</title> </head> <body> <center><h1>Yay for me</h1></center> <p>This is cool</p> <p>Bla bla bak</p> <ul> <li>Yay</li> <li>for</li> <li>me</li> </ul> <br> <img src=“Caster.jpg” /> </body> </html> I am making a page with a load of thumbnails which are links to other pages. The code is essentially... Code: <a href="#"> <img src="thumbnail" /> <span> <img src="larger image with some nice css styling" /> </span> </a> a span has display none and and a:hover span has display block. What I want to know is does the larger image load with the whole page or does it only load when you hover on the link. I.E. does having loads of hidden images effect page load time? Thanks I have list of files in a folder which are to be displayed in html table. Each file should be shown as follows ------------ | image1| | | ------------ <image 1 file name> ------------ | image2| | | ------------ < image 2 file name> its image and name of the file below the image. I am new to this html and needs help! Thank you, Krishna. Hi all, I'm helping a friend out with his website but have come across a bit of an issue which I think may be related to the web server itself although I'm sure there's a way round it? http://www.pixelrite.co.uk/completed/ Basically my friend wants to be able to upload images that he has worked on into this folder so people can then browse to the above url and simply download the images they want. I used to have a similar thing on an old site of my own which was just a load of files I had uploaded into a folder, anyone could then download them from there. I suspect it's some sort of server side security implemented by the host... is there some way to insert a very basic index.html page into the folder that somehow would show any files that were currently in that folder allowing someone to right click and download them? Thanks in advance! I'm looking for a lightbox type script that can show an external .html (iframe) on my page. I saw it a while back while I searching for scripts but I can't find it anymore, and I wasn't if it was reliable or not. What I want it to do: Click on a picture or link Opens up a lightbox on top of the Website, but instead of an image it will be an iframe displaying a contact form. Thanks! |