JavaScript - Update Img Src Of Div When Clicking Thumb
I'm using a jQuery lightbox in addition to a javascript page. When I click on a thumb it retrieves the appropriate div. Right now I have the div img src actually spelled out, but I've got so many of these on the page that it's taking forever to load. How do I tell the document that when I click on the thumbnail, to replace the div image source with the appropriate image? Or, is there an even more efficient way to do this?
Here's a sample of my code: Code: <p><a href="#pic1"><img src="images/art/thumb1_t.jpg" alt="A lovely picture" /></a></p> <p><a href="#pic2"><img src="images/art/thumb2_t.jpg" alt="Another lovely picture" /></a></p> <div id="pic1"> <img src="placeholder.gif" alt="A Lovely Picture" /> <p>A whole bunch of details and maybe a list or two</p> </div> <div id="pic2"> <img src="placeholder.gif" alt="Another Lovely Picture" /> <p>A whole bunch of details and maybe some popups</p> </div> The lightbox depends on the "a href='#whatever'" to function. If you need to see it in practice, here is the page. It works, but it is slow to load. http://www.brettkaufman.com/art.html Similar TutorialsWould anyone know why (and the fix) when I place my cursor over the scrolling thumbnails under the main slideshow rotator on my site they "disappear"? http://americanwebmakers.com/demo_college Thanks in advance! Please help. Have a site uploaded called theshoulderhopper.com, It says domain holding page. when you click on thumbnails on 15 inch screen image opens up ok, but anything bigger image opens up half way down page. Using a thumbnail viewer J.s script. here is copy. I can make image open where I like but how do I get it to open up in correct place on bigger screen? Think it is positioning itself to size of screen not size of page. // ------------------------------------------------------------------- // Image Thumbnail Viewer Script- By Dynamic Drive, available at: http://www.dynamicdrive.com // Last updated: July 7th, 2008- Fixed enlarged image not showing in IE sometimes // ------------------------------------------------------------------- var thumbnailviewer={ enableTitle: true, //Should "title" attribute of link be used as description? enableAnimation: true, //Enable fading animation? definefooter: '<div class="footerbar"></div>', //Define HTML for footer interface defineLoading: '<img src="loading.gif" /> Loading Image...', //Define HTML for "loading" div /////////////No need to edit beyond here///////////////////////// scrollbarwidth: 16, opacitystring: 'filterrogidXImageTransform.Microsoft.alpha(opacity=10); -moz-opacity: 0.1; opacity: 0.1', targetlinks:[], //Array to hold links with rel="thumbnail" createthumbBox:function(){ //write out HTML for Image Thumbnail Viewer plus loading div document.write('<div id="thumbBox" onClick="thumbnailviewer.closeit()"><div id="thumbImage"></div>'+this.definefooter+'</div>') document.write('<div id="thumbLoading">'+this.defineLoading+'</div>') this.thumbBox=document.getElementById("thumbBox") this.thumbImage=document.getElementById("thumbImage") //Reference div that holds the shown image this.thumbLoading=document.getElementById("thumbLoading") //Reference "loading" div that will be shown while image is fetched this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes }, centerDiv:function(divobj){ //Centers a div element on the page var ie=document.all && !window.opera var dom=document.getElementById var scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset var scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset var docwidth=(ie)? this.standardbody.clientWidth : window.innerWidth-this.scrollbarwidth var docheight=(ie)? this.standardbody.clientHeight: window.innerHeight var docheightcomplete=(this.standardbody.offsetHeight>this.standardbody.scrollHeight)? this.standardbody.offsetHeight : this.standardbody.scrollHeight //Full scroll height of document var objwidth=divobj.offsetWidth //width of div element var objheight=divobj.offsetHeight //height of div element var topposition=(docheight>objheight)? scroll_top+docheight/1.9-objheight/2+"px" : scroll_top+10+"px" //Vertical position of div element: Either centered, or if element height larger than viewpoint height, 10px from top of viewpoint divobj.style.left=docwidth/2.0-objwidth/2+"px" //Center div element horizontally divobj.style.top=Math.floor(parseInt(topposition))+"px" divobj.style.visibility="visible" }, showthumbBox:function(){ //Show ThumbBox div thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div this.centerDiv(this.thumbBox) if (this.enableAnimation){ //If fading animation enabled this.currentopacity=0.1 //Starting opacity value this.opacitytimer=setInterval("thumbnailviewer.opacityanimation()", 20) } }, loadimage:function(link){ //Load image function that gets attached to each link on the page with rel="thumbnail" if (this.thumbBox.style.visibility=="visible") //if thumbox is visible on the page already this.closeit() //Hide it first (not doing so causes triggers some positioning bug in Firefox var imageHTML='<img src="'+link.getAttribute("href")+'" style="'+this.opacitystring+'" />' //Construct HTML for shown image if (this.enableTitle && link.getAttribute("title")) //Use title attr of the link as description? imageHTML+='<br />'+link.getAttribute("title") this.centerDiv(this.thumbLoading) //Center and display "loading" div while we set up the image to be shown this.thumbImage.innerHTML=imageHTML //Populate thumbImage div with shown image's HTML (while still hidden) this.featureImage=this.thumbImage.getElementsByTagName("img")[0] //Reference shown image itself if (this.featureImage.complete) thumbnailviewer.showthumbBox() else{ this.featureImage.onload=function(){ //When target image has completely loaded thumbnailviewer.showthumbBox() //Display "thumbbox" div to the world! } } if (document.all && !window.createPopup) //Target IE5.0 browsers only. Address IE image cache not firing onload bug: panoramio.com/blog/onload-event/ this.featureImage.src=link.getAttribute("href") this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div, game over } }, setimgopacity:function(value){ //Sets the opacity of "thumbimage" div per the passed in value setting (0 to 1 and in between) var targetobject=this.featureImage if (targetobject.filters && targetobject.filters[0]){ //IE syntax if (typeof targetobject.filters[0].opacity=="number") //IE6 targetobject.filters[0].opacity=value*100 else //IE 5.5 targetobject.style.filter="alpha(opacity="+value*100+")" } else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax targetobject.style.MozOpacity=value else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax targetobject.style.opacity=value else //Non of the above, stop opacity animation this.stopanimation() }, opacityanimation:function(){ //Gradually increase opacity function this.setimgopacity(this.currentopacity) this.currentopacity+=0.1 if (this.currentopacity>1) this.stopanimation() }, stopanimation:function(){ if (typeof this.opacitytimer!="undefined") clearInterval(this.opacitytimer) }, closeit:function(){ //Close "thumbbox" div function this.stopanimation() this.thumbBox.style.visibility="hidden" this.thumbImage.innerHTML="" this.thumbBox.style.left="-2000px" this.thumbBox.style.top="-2000px" }, cleanup:function(){ //Clean up routine on page unload this.thumbLoading=null if (this.featureImage) this.featureImage.onload=null this.featureImage=null this.thumbImage=null for (var i=0; i<this.targetlinks.length; i++) this.targetlinks[i].onclick=null this.thumbBox=null }, dotask:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload) var tasktype=(window.addEventListener)? tasktype : "on"+tasktype if (target.addEventListener) target.addEventListener(tasktype, functionref, false) else if (target.attachEvent) target.attachEvent(tasktype, functionref) }, init:function(){ //Initialize thumbnail viewer script by scanning page and attaching appropriate function to links with rel="thumbnail" if (!this.enableAnimation) this.opacitystring="" var pagelinks=document.getElementsByTagName("a") for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP if (pagelinks[i].getAttribute("rel") && pagelinks[i].getAttribute("rel")=="thumbnail"){ //Begin if statement pagelinks[i].onclick=function(){ thumbnailviewer.stopanimation() //Stop any currently running fade animation on "thumbbox" div before proceeding thumbnailviewer.loadimage(this) //Load image return false } this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link } //end if statement } //END FOR LOOP //Reposition "thumbbox" div when page is resized this.dotask(window, function(){if (thumbnailviewer.thumbBox.style.visibility=="visible") thumbnailviewer.centerDiv(thumbnailviewer.thumbBox)}, "resize") } //END init() function } thumbnailviewer.createthumbBox() //Output HTML for the image thumbnail viewer thumbnailviewer.dotask(window, function(){thumbnailviewer.init()}, "load") //Initialize script on page load thumbnailviewer.dotask(window, function(){thumbnailviewer.cleanup()}, "unload") I need to use javascript in a way in which it will keep clicking a button. The source code for that button is below: Code: <script type="text/javascript"> function set_opacity(id, opacity) { element = document.getElementById(id) if (/MSIE/i.test(navigator.userAgent)) { element.style.filter='alpha(opacity='+opacity+')'; } else { element.style.opacity = opacity/100; } } </script> <div class="recruiter_enabled"> <table cellspacing="0" style="width: 100%"> <tr> <td> <p> <script type="text/javascript"> //<![CDATA[ recruiter_clicks = 1 //]]> </script><a href="/recruiter/recruit/3p5tjd4pdnbg0" id="recruit_link" onclick="return(submit_link_as_post_with_opacity(this, 'recruit_image'))"><img alt="" class="start_recruiting" id="recruit_image" src="/A.gif?1221518016" /></a><script type="text/javascript"> //<![CDATA[ link = document.getElementById('recruit_link'); link_href = link.href; link.href = "#"; set_opacity('recruit_image', 50); setTimeout("link = document.getElementById('recruit_link'); link.href = '" + link_href + "'; recruiter_clicks = 0; set_opacity('recruit_image', 100)", 2000); //]]> </script> Therefore, I need javascript to keep clicking the button until it has clicked it 375 times. How would I be able to do this? I have this script to close a div when I click outside of it. It works in Firefox but in IE7 i get an error: 'divid' is undefined. mydiv is the div I want to close and clickclick is the link that makes the div appear. Code: <script type="text/javascript"> function monitorClick(e){ var evt = (e)?e:event; var theElem = (evt.srcElement)?evt.srcElement:evt.target; while(theElem!=null){ if(theElem.id == "mydiv" || theElem.id == "clickclick" && document.getElementById(divid).style.display == 'none') { document.getElementById('mydiv').style.display = 'block'; return true; } theElem = theElem.offsetParent; } document.getElementById('mydiv').style.display = 'none'; return true; } document.onclick = monitorClick; </script> What should I change to make it work in IE7? Hi all, I want to have a javascript popup box so that when a hyperlink is clicked, a user is asked if they are sure they want to click this link, if they select ok then the page loads, if they click canel then nothing happens, so i have this code below: Code: <script type="text/javascript"> function confirmSubmit() { var agree=confirm("Are you sure you wish to click this link?"); if (agree) return true ; else return false ; } </script> Code: <a onclick="return confirmSubmit()" href="page.html">Page</a> However when a user clicks cancel the link still loads, can anyone see where I am going wrong? any help will be appreciated For school I'm supposed to write a JS code which visits a website, and then clicks on a button on that website. I used the document.location method to visit the web page, but then if I use the document.forms[0].elements[0].click() function to click a button, nothing happens. The click() function has always worked for me when the JS code is embedded in the web page, but its not in this case because the code has to click a button on an external website. So how can I do this? I just need me Javscript program to visit a site, and then click a button on that site. Please help, thanks.
I am creating a website as part of a university project. as part of this i am trying to make a menu in the top right. after looking around i have found javascript top be the best way to do this. how would i go about making it so that when i click on one div (called map) a separate div (called mapMenu) visibility is toggled. thanks Hi, After much searching and head-scratching (JS is not my forte!), I adapted some code to do what I want - well, almost! So here I am back again. I need to have three divs on a page, with each separate div changing onClick. Below is the code so far. Two problems: 1) when I open it in a browser window both divs show, then the one disappears when I click on the second div leaving only the numbers. How can I change it so that both divs remain open? 2) Instead of the numbers [1], [2], etc. to change the divs, I'd like to have to just click on one single 'click here for more' to display the next div then return to the first after the last one. Can this be integrated or is it too late? Thank you! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <title>Switching Divs</title> <style> #one {width: 500px; height: 100 px; border: 1px solid red; } #two {width: 500px; height: 100px; border: 1px solid blue; } #three {width: 500px; height: 100px; border: 1px solid purple; } #four {width: 500px; height: 100px; border: 1px solid green; } #five {width: 500px; height: 100 px; border: 1px solid red; } #six {width: 500px; height: 100px; border: 1px solid blue; } #seven {width: 500px; height: 100px; border: 1px solid purple; } #eight {width: 500px; height: 100px; border: 1px solid green; } #propertyfrance {float: left; color: #666666; font-family: tahoma arial, verdana, sans-serif; font-size: 11px; } .propertytext {float: left; clear: right; width: 300px; height: 100px; border: 1px solid #000; } .propertyphoto {float: left; width 200px; height: 100px; border: 1px solid #cceeff; text-align: center; } #image-switch #one { padding:0px; } #image-switch #two, #image-switch #three, #image-switch #four { display:none; } #image-switch #five { padding: 0px; } #image-switch #six, #image-switch #seven, #image-switch #eight { display:none; } </style> <script type="text/javascript"> function switch1(div) { if (document.getElementById('one')) { var option=['one','two','three','four', 'five', 'six', 'seven', 'eight']; for(var i=0; i<option.length; i++) { obj=document.getElementById(option[i]); obj.style.display=(option[i]==div)? "block" : "none"; } } } </script> </head> <body> <h4>Switching divs (javascript)</h4> <div id="image-switch"> <br>OnClick <br> <div id="one"> <div class="propertytext">We'll get some text in here for property 1</div> <div class="propertyphoto"><img src="property1.jpg" height="100" width="180" alt="Property 1"></div> </div> <div id="two"> <div class="propertytext">We'll get some text in here for property 2</div> <div class="propertyphoto"><img src="property2.jpg" height="100" width="180" alt="Property 2"></div> </div> <div id="three"> <div class="propertytext">We'll get some text in here for property 3</div> <div class="propertyphoto"><img src="property3.jpg" height="100" width="180" alt="Property 3"></div> </div> <div id="four"> <div class="propertytext">We'll get some text in here for property 4</div> <div class="propertyphoto"><img src="property4.jpg" height="100" width="180" alt="Property 4"></div> </div> <br> <a onClick="switch1('one');"> [1]</a> <a onClick="switch1('two');"> [2]</a> <a onClick="switch1('three');"> [3]</a> <a onClick="switch1('four');"> [4]</a> <br><br> <div id="five"> <div class="propertytext">We'll get some text in here for property 5</div> <div class="propertyphoto"><img src="property5.jpg" height="100" width="180" alt="Property 5"></div> </div> <div id="six"> <div class="propertytext">We'll get some text in here for property 6</div> <div class="propertyphoto"><img src="property6.jpg" height="100" width="180" alt="Property 6"></div> </div> <div id="seven"> <div class="propertytext">We'll get some text in here for property 7</div> <div class="propertyphoto"><img src="property7.jpg" height="100" width="180" alt="Property 7"></div> </div> <div id="eight"> <div class="propertytext">We'll get some text in here for property 8</div> <div class="propertyphoto"><img src="property6.jpg" height="100" width="180" alt="Property 8"></div> </div> <br> <a onClick="switch1('five');"> [5] </a> <a onClick="switch1('six');"> [6] </a> <a onClick="switch1('seven');"> [7] </a> <a onClick="switch1('eight');"> [8] </a> </div> </body> </html> Hi I've had this script for a few years which I use to make a search box, it adds the user's search to the end of a url, so you can make a search box for Google or pretty much anything. If the user clicks on submit ('Find') without selecting a pull down option I like the script to alert something like 'select a site' or if they don't enter any keyword to alert 'enter a keyword', however when either of these happens, the alert box needs to be clicked several times to get rid of the alert. so I'm wondering if the script is running in some kind of loop.... The script does what I wat I just want to make the alert boxes go after the first 'click' to hide them... hope this makes sense here's the script, thanks for any ideas folks.. --------------------- ---------------- searchdata.js ---------------- [CODE] function addplus(items) { var plussed = ""; for (var t = 1 ; t <= items.length ; t++) { if (items.substring(t-1,t) == " ") { plussed+="+"; } else { plussed+=items.substring(t-1,t); } } return plussed; } function searchdata() { var words; words = document.getElementById("querydata").value; var searchitems; searchitems=addplus(words); var index; index = document.getElementById("subjectdata").selectedIndex; collection = document.getElementById("subjectdata").value; if (document.getElementById("subjectdata").value == "null" || document.getElementById("subjectdata").value == "") {alert("\nSelect a site to search");} else { var site; site = document.getElementById("subjectdata").value; site+=searchitems; if (notEmpty(searchitems)) { window.open("","newwin","status=0,resizable=1, menubar=1, toolbar=1, scrollbars=1, location=1, directories=0, width=900, height=600, top=200, left=200"); window.open(site,"newwin"); } } } function notEmpty(word) { if (word == "" || word == null) { alert("\nEnter a keyword to search"); document.getElementById("querydata").focus(); return false; } else { return true; } } [CODE] ----------------------------------------------------------------- the form to display the search box --------------------------------- [CODE] <script src="searchdata.js" type="text/javascript"></script > <form id="searchform" onsubmit="searchdata()" action="javascript:searchdata()" method="get"> <select id="subjectdata"> <optgroup> <option select="selected" value="null">Choose coverage</option> <option value="http://www.statistics.gov.uk/hub/search/index.html?newquery=">National Statistics</option> <option value="http://www.intute.ac.uk/cgi-bin/search.pl?Search=Search&limit=0&subject=Statistics&term1=">Statistics & Data on the WWW</option> </optgroup> </select> <input id="querydata" value="type here" /> <input onkeypress="searchdata()" onclick="searchdata()" type="submit" value="Find" /> </form> [CODE] Hi there, I am pretty new to javascript coding, and I could use little help... As you can see here, I got this code where I can move image inside of a box, and I do it by clicking these "links". And now I want to ask you, is there any way that I could move image using keys on keyboard (arrows or WSAD)? I'd like to keep this as simple as possible since I am not really into very advanced scripts (although I could probably understand them if you give little explanation). Code: <html> <head> <body> <script type="application/ecmascript"> // X position of image var x = 0; // Y position of image var y = 0; // Move per click var inc = 10; function Init() { document.getElementById('autic').style.left = x + 'px'; document.getElementById('autic').style.top = y + 'px'; } function moveRight() { x += inc; document.getElementById('autic').style.left = x + 'px'; } function moveLeft() { x -= inc; document.getElementById('autic').style.left = x + 'px'; } function moveUp() { y -= inc; document.getElementById('autic').style.top = y + 'px'; } function moveDown() { y += inc; document.getElementById('autic').style.top = y + 'px'; } </script> <style> #box { width: 500px; height: 300px; position: relative; margin: 20px auto 0px auto; border: 5px outset #000; overflow: hidden; } .image { position: absolute; z-index: 100; } </style> </head> <body onload="javascript:Init()"> <div id="box"><img class="image" id="autic" src="auto.png"/></div> <a href="javascript:moveLeft()">Left</a> <a href="javascript:moveUp()">Up</a> <a href="javascript:moveDown()">Down</a> <a href="javascript:moveRight()">Right</a> </body> </html> I want to make a script selecting electronics category in this site http://eu.redeem-it.net/boutique.php A friend told me to use getElementsByClass but I still cant do it. Right now when someone clicks on my listbox I immediately do an update on the form to populate the selected item. Is there a way to detect if a user has clicked on some white area of a list box? If my list is sized 8 items but the list only has 4 items, if the user clicks near the bottom of the list where there is no item to select, can I detect that? Currently I get the form updating even if I click on the white area of the list and I'd like the form to update only if I actually click on an item in the list. Thanks Hello All, I am trying to find a solution for this ..... kindly help incase you know.... I need a drop down menu to appear when I left-click an image.... have tried a lot but failed... Please help me out on this Thanks in advance,,, Regards Hello. I have looked everywhere and I absolutely cannot find a method that works. I'm making an html website with flash. This is all I want...... A swf "this will be the default flash you see" underneath that flash I want 3 text links named..... Flash1 Flash2 Flash3 when you click flash1, 2, or 3 I want it to swap out the Current flash video with a different one. This way The user can watch all the flash vids on the same page, rather than a separate page for each flash. I found a way to swap them out using iframe, however that requires me to make a separate html page for each of my swf's themselves. I dont want to do that. Plz if someone could help me I would greatly appreciate it! I hope I am posting this in the correct section, I know swfobject involves javascripting so thats why I'm posting here. Not that your method HAS to involve swfobject to embed. If someone can give me code that I can just copy/paste into a blank page in dreamweaver (and I would adjust the embded swf file name and size etc obviously) and have it work that would be fantastic. thank you I know how to make something function onclick(), but how can I make it so it copies the area of a textarea element, does Javascript have the ability to do this? Thanks for any help in advance. Hello Having problems with the following...a client needs me to replicate this contact page: http://www.ravenrow.org/contact/ In particular he wants the subscribe/unsubscribe to appear only when one enters text into the text field (as it does here). I have recently changed from using tables to div tags but this was the first website where I started to experiment with divs. Unfortunately therefore it is a mixture of tables and divs. But here is my page: http://www.rowingpresents.com/contact.html Can someone tell me what I need in my code to have to subscribe/unsubscribe appear and disappear as it does at ravenrow.org. Many thanks S I am creating a popup for an online store so that when prospective customers put something in their shopping cart and then try to leave the site, they are offered a coupon in a popup. I am using the following code (FYI, uses prototype.js) Code: Event.observe(document.body, 'click', function(event) { if (Event.element(event).tagName == 'A' || Event.element(event).tagName == 'INPUT' || Event.element(event).tagName == 'IMG') { staying_in_site = true; } }); window.onbeforeunload = popup; function popup() { if (staying_in_site) { return; } if (popup_displayed) { return; } popup_displayed = true; //popup displayed here } The popup is not displayed when the user clicks on a link or submits a form (correct behavior) and it is displayed when the user types in a URL or tries to close the browser (also correct behavior). The problem is when the user clicks the back or forward buttons, the popup is displayed which is not the desired behavior. Anyone here have a solution for this? Hello, Can someone please show me how to do the following in Javascript. I basically want the background color of a div (banner) to change when the user clicks a green or blue table cell. So if they click the blue table cell, the backgound color of the div changes to blue (its green by default). Also, when they have picked what color they want, I'd like the color to be stored in the value of the form 'BannerBGColor' so I can post their banner color to database. Any help is greatly appreciated. Many thanks -------------------------------------------------------------------------- Banner: <div style="width:400px; float:center; background:#00FF00; border-color:#000000; border-style: solid; border-width: 2px;"> <p>This is a banner.</p></div>'; -------------------------------------------------------------------------- Colour picker table to change colour of Banner above: <table width="300" border="1" cellspacing="1" cellpadding="1"> <tr> <td colspan="2">Pick a color below to change banner background:</td> </tr> <tr> <td bgcolor="#00FF00">Green</td> <td bgcolor="#00FFFF">Blue</td> </tr> </table> ------------------------------------------------------------------------- Form field to insert chosen Banner Background colour when form is submitted - <input type="text" name="BannerBGColor" value="'.$_POST['BannerBGColor'].'"> Hi, I looked around to see javascript codes on websites but had no luck in finding what I wanted... or I just don't know how to work with it I want to switch/replace image with other images by clicking on radio buttons. i have the html, but how can I make this work??? can anyone help me out? Code: <body> <p><img name="main" src="black.jpg" width="100" height="100" alt=""></p> <p> <input type="radio" name="red" id="radio" value="radio" onClick="display red in main image"> </p> <p> <input type="radio" name="blue" id="radio2" value="radio" onClick="display blue in main image"> </p> <p> <input type="radio" name="green" id="radio3" value="radio" onClick="display green in main image"> </p> <p> <input type="radio" name="yellow" id="radio4" value="radio" onClick="display yellow in main image"> </p> <p> <input type="radio" name="black" id="radio5" value="radio" onClick="this would this play the main image 'black'.jpg"> </p> </body> thanks for any help in advance! |