JavaScript - Multiple Button Help
hi its me again.
i was using the data that I pulled out from my db and then provide a push button weather to lock it or not but the problem is, the js code doesn't mouse over on the next button, here's the js code Code: var once = true; function asktolock(){ if(once){ document.getElementById('locker').value = "Lock Me ?"; } } function lockme(){ document.getElementById('locker').value = "Locked"; once = false; } and here's my html with php/js code PHP Code: <?php foreach($task->result() as $row): ?> <tr> <td><?php echo $row->title; ?></td> <td><input type="button" id="locker" value="unlocked" onmouseover="asktolock()" onclick="lockme()" /></td> <td><?php echo $row->assign_to; ?></td> </tr> <?php endforeach; ?> if I will put an "onmouseout" and feed it with a function like this Code: function passby(){ document.getElementById('locker').value = "unlock"; } the clicking function won't work anymore, what's the best thing to do? Similar TutorialsFor some reason for the life of me I can't figure this out and posting on the forms is my last results. I'm trying to create something like this http://powerpetsplus.site88.net/guides/clicker.php You will see on top I'm trying to get a next button that will go to a new page. The url is something like petid1 and clicking next will go to petid2 and so on. (it's the end URL) example http://www.petadoptworld.com/pages/petpage.asp?PETID1 and I need it to go to http://www.petadoptworld.com/pages/petpage.asp?PETID2 and so on. I was able to do this with a help of a friend: http://o.aolcdn.com/hss/storage/fss/...test_next.html but for it to work we have to click the button then the link on top. What are we doing wrong? This is the coding I'm using now. <div id="test"> <p> <input type="button" onclick="update();" value="Click me for the next pet"> - <a id="test_link" href="http://www.petadoptworld.com/pages/petpage.asp?petid=1"> Click Me <input id="previous" type="hidden" value="1"><br> </p> </div> <script type="text/javascript"> function update() { var t1 = document.getElementById('test_link'); var v1 = document.getElementById('previous'); t1.href= "http://www.petadoptworld.com/pages/petpage.asp?petid=" + (parseInt(v1.value) + 1); v1.value = (parseInt(v1.value) + 1); } </script> I'm also trying to figure it out since 8000 are needed if the page is refreshed it remembers what one they are on. I'm having a problem with one of my Labs and My TA is not answering emails. I need to make a button, that when you click it, turns the bgColor blue, when you click it twice, it turns bgColor yellow, and a third time turns it orange. The tricky part is, I need to use an internal CSS style sheet for the color, and a function for the javascript. Here is what I have so far, but I'm completely stuck. Code: <html> <head> <style type="text/css" media="all"> highlight {background-color:yellow;} </style> <script type="text/javascript"> function blue() { document.bgcolor = blue; } </script> </head> <body> <p>Good morning. In less than an hour, aircraft from here will join others from around the world..... </p> <input type="button" value="Push me to change color!" onclick="document.bgColor= 'blue'"> </body> </html> (I cut out the doctype for readability) Obviously I'm not utilizing the function.. I tried replacing 'blue' with blue() (which is the name of the function) but that didn't work.. So how I utilize both the function, and the CSS sheet, AND get the button to do consecutive actions onClick..? -Thanks, this is my first post, I hope everything is understandable. I'm trying to create a button where I can click on it and it changes the colour of text. When I click the same button again, it will change the text to another colour. It would be helpful if someone could show me how to do it please.
Hi, i'm new here and I need help. I need a script that can alert in 2 ways for multiple radio button groups of "yes" and "no." I got the first question to alert the way I need (with alert #1 for yes and alert#2 for no.) However, starting from the 2nd question it alerts #1 for both yes and no. This is the script I'm working with: Code: <script type="text/javascript"> function valbutton(form) { myOption = -1; for (i=form.buttonset1.length-1; i > 0; i--) { if (form.buttonset1[i].checked) { myOption = i; i = -1; } } if (myOption == -1) { alert("Please select Yes or No"); return false; } if (myOption == 1) { alert("Yes, it works!"); return false; } if (myOption == 2) { alert("No, it won't work."); return false; } } </script> The following are the 1st two sets of radio buttons: Code: <form name="myform" action="formstest.html"> <tr> <td> <input type="reset" value="Click to Reset"> <br><input type="radio" name="buttonset1" value="1" rel="none" id="r1" /><label for="r1">Click to Start Over</label><br /></td> </tr> <tr><td class="question">Question #1</td> <td><input type="radio" name="buttonset1" value="2" rel="flat" id="r2" /> <label for="r2">Yes</label><br /> <input type="radio" name="buttonset1" value="3" rel="none" id="r3" /> <label for="r3">No</label><br /> </td> </tr> <tr rel="flat"> <td class="question"><label for="flat"><span class="accessibility">If metal:</span>Question #2</label></td> <td><input type="radio" name="buttonset2" value="4" rel="uneven" id="r4" /> <label for="r4">Yes</label><br /> <input type="radio" name="buttonset2" value="5" rel="none" id="r5" /> <label for="r5">No</label><br /> </td> </tr> Is it possible to switch out the alerts for yes and no for next 4 questions? And finally, the following is the lengthy, thorough version of my question if it clarifies what I'm trying to do. I would really appreciate someone to point me the right direction. I've tried all kinds of variation to the script and I just can't seem to make it work. Thanks in advance! (Lengthy Version) I also need questions to appear (or not show) below as select radio buttons are clicked. I have 6 groups of yes and no radio buttons. I would like the first two groups to have "alert 1" when yes is clicked (and "alert 2" for no.) I would like the rest to show "alert 2" when yes is clicked (and "alert 1" for no.) (I also have all the questions hidden below question 1. Each subsequent questions appear upon clicking yes for questions 1&2, and no for the rest. I would like to keep this intact - I put that js code I downloaded at the end of this post.) Here's what I have so far... I got most of it working except after the first question, "alert 1" appears for all the clicks submitted. I've been at it for a few weeks and I can't seem to figure it out. Thanks in advance! Code: <html> <head> <title>Form Test</title> <script type="text/javascript"> function valbutton(form) { myOption = -1; for (i=form.buttonset1.length-1; i > 0; i--) { if (form.buttonset1[i].checked) { myOption = i; i = -1; } } if (myOption == -1) { alert("Please select Yes or No"); return false; } if (myOption == 1) { alert("Yes, it works!"); return false; } if (myOption == 2) { alert("No, it won't work."); return false; } } </script> </head> <body> <form name="myform" action="formstest.html"> <tr> <td> <input type="reset" value="Click to Reset"> <br><input type="radio" name="buttonset1" value="1" rel="none" id="r1" /><label for="r1">Click to Start Over</label><br /></td> </tr> <tr><td class="question">Question #1</td> <td><input type="radio" name="buttonset1" value="2" rel="flat" id="r2" /> <label for="r2">Yes</label><br /> <input type="radio" name="buttonset1" value="3" rel="none" id="r3" /> <label for="r3">No</label><br /> </td> </tr> <tr rel="flat"> <td class="question"><label for="flat"><span class="accessibility">If metal:</span>Question #2</label></td> <td><input type="radio" name="buttonset2" value="4" rel="uneven" id="r4" /> <label for="r4">Yes</label><br /> <input type="radio" name="buttonset2" value="5" rel="none" id="r5" /> <label for="r5">No</label><br /> </td> </tr> <tr rel="uneven"> <td class="question"><label for="uneven"><span class="accessibility">If flat:</span> Question #3</label></td> <td><input type="radio" name="buttonset3" value="6" rel="none" id="r6" /> <label for="r6">Yes</label><br /> <input type="radio" name="buttonset3" value="7" rel="ridges" id="r7" /> <label for="r7">No</label><br /> </td> </tr> <tr rel="ridges"> <td class="question"><label for="ridges"><span class="accessibility">If uneven:</span> Question #4</label></td> <td><input type="radio" name="buttonset4" value="8" rel="none" id="r8" /> <label for="r8">Yes</label><br /> <input type="radio" name="buttonset4" value="9" rel="holes" id="r9" /> <label for="r9">No</label><br /> </td> </tr> <tr rel="holes"> <td class="question"><label for="holes"><span class="accessibility">If ridges:</span> Question #5</label></td> <td><input type="radio" name="buttonset5" value="10" rel="none" id="r10" /> <label for="r10">Yes</label><br /> <input type="radio" name="buttonset5" value="11" rel="curved" id="r11" /> <label for="r11">No</label><br /> </td> </tr> <tr rel="curved"> <td class="question"><label for="curved"><span class="accessibility">If holes:</span>Question #6 </label></td> <td><input type="radio" name="buttonset6" value="12" rel="none" id="r12" /> <label for="r12">Yes</label><br /> <input type="radio" name="buttonset6" value="13" rel="answer" id="r13" /> <label for="r13">No</label><br /> </td> </tr> <tr rel="answer"> <td></td> <td class="question"><label for="answer"><span class="accessibility">If not curved:</span><strong> Yes, correct answer!</strong></label></td> </tr> <tr> <td colspan="2"><input type="submit" name="submitit" onclick="valbutton(myform);return false;" value="Submit" /></td> </tr> </tbody> </table> </form> </body> </html> The following is the JS found to make corresponding questions appear as each relevant radio button answer is clicked: Code: /*****************************************/ /** Usable Forms 2.0, November 2005 **/ /** Written by ppk, www.quirksmode.org **/ /** Instructions for use on my site **/ /** **/ /** You may use or change this script **/ /** only when this copyright notice **/ /** is intact. **/ /** **/ /** If you extend the script, please **/ /** add a short description and your **/ /** name below. **/ /*****************************************/ var containerTag = 'TR'; var compatible = ( document.getElementById && document.getElementsByTagName && document.createElement && !(navigator.userAgent.indexOf('MSIE 5') != -1 && navigator.userAgent.indexOf('Mac') != -1) ); if (compatible) { document.write('<style>.accessibility{display: none}</style>'); var waitingRoom = document.createElement('div'); } var hiddenFormFieldsPointers = new Object(); function prepareForm() { if (!compatible) return; var marker = document.createElement(containerTag); marker.style.display = 'none'; var x = document.getElementsByTagName('select'); for (var i=0;i<x.length;i++) addEvent(x[i],'change',showHideFields) var x = document.getElementsByTagName(containerTag); var hiddenFields = new Array; for (var i=0;i<x.length;i++) { if (x[i].getAttribute('rel')) { var y = getAllFormFields(x[i]); x[i].nestedRels = new Array(); for (var j=0;j<y.length;j++) { var rel = y[j].getAttribute('rel'); if (!rel || rel == 'none') continue; x[i].nestedRels.push(rel); } if (!x[i].nestedRels.length) x[i].nestedRels = null; hiddenFields.push(x[i]); } } while (hiddenFields.length) { var rel = hiddenFields[0].getAttribute('rel'); if (!hiddenFormFieldsPointers[rel]) hiddenFormFieldsPointers[rel] = new Array(); var relIndex = hiddenFormFieldsPointers[rel].length; hiddenFormFieldsPointers[rel][relIndex] = hiddenFields[0]; var newMarker = marker.cloneNode(true); newMarker.id = rel + relIndex; hiddenFields[0].parentNode.replaceChild(newMarker,hiddenFields[0]); waitingRoom.appendChild(hiddenFields.shift()); } setDefaults(); addEvent(document,'click',showHideFields); } function setDefaults() { var y = document.getElementsByTagName('input'); for (var i=0;i<y.length;i++) { if (y[i].checked && y[i].getAttribute('rel')) intoMainForm(y[i].getAttribute('rel')) } var z = document.getElementsByTagName('select'); for (var i=0;i<z.length;i++) { if (z[i].options[z[i].selectedIndex].getAttribute('rel')) intoMainForm(z[i].options[z[i].selectedIndex].getAttribute('rel')) } } function showHideFields(e) { if (!e) var e = window.event; var tg = e.target || e.srcElement; if (tg.nodeName == 'LABEL') { var relatedFieldName = tg.getAttribute('for') || tg.getAttribute('htmlFor'); tg = document.getElementById(relatedFieldName); } if ( !(tg.nodeName == 'SELECT' && e.type == 'change') && !(tg.nodeName == 'INPUT' && tg.getAttribute('rel')) ) return; var fieldsToBeInserted = tg.getAttribute('rel'); if (tg.type == 'radio') { removeOthers(tg.form[tg.name],fieldsToBeInserted) intoMainForm(fieldsToBeInserted); } } function removeOthers(others,fieldsToBeInserted) { for (var i=0;i<others.length;i++) { var show = others[i].getAttribute('rel'); if (show == fieldsToBeInserted) continue; intoWaitingRoom(show); } } function intoWaitingRoom(relation) { if (relation == 'none') return; var Elements = hiddenFormFieldsPointers[relation]; for (var i=0;i<Elements.length;i++) { waitingRoom.appendChild(Elements[i]); if (Elements[i].nestedRels) for (var j=0;j<Elements[i].nestedRels.length;j++) intoWaitingRoom(Elements[i].nestedRels[j]); } } function intoMainForm(relation) { if (relation == 'none') return; var Elements = hiddenFormFieldsPointers[relation]; for (var i=0;i<Elements.length;i++) { var insertPoint = document.getElementById(relation+i); insertPoint.parentNode.insertBefore(Elements[i],insertPoint); if (Elements[i].nestedRels) { var fields = getAllFormFields(Elements[i]); for (var j=0;j<fields.length;j++) { if (!fields[j].getAttribute('rel')) continue; if (fields[j].checked || fields[j].selected) intoMainForm(fields[j].getAttribute('rel')); } } } } function getAllFormFields(node) { var allFormFields = new Array; var x = node.getElementsByTagName('input'); for (var i=0;i<x.length;i++) allFormFields.push(x[i]); var y = node.getElementsByTagName('option'); for (var i=0;i<y.length;i++) allFormFields.push(y[i]); return allFormFields; } /** ULTRA-SIMPLE EVENT ADDING **/ function addEvent(obj,type,fn) { if (obj.addEventListener) obj.addEventListener(type,fn,false); else if (obj.attachEvent) obj.attachEvent("on"+type,fn); } addEvent(window,"load",prepareForm); /** PUSH AND SHIFT FOR IE5 **/ function Array_push() { var A_p = 0 for (A_p = 0; A_p < arguments.length; A_p++) { this[this.length] = arguments[A_p] } return this.length } if (typeof Array.prototype.push == "undefined") { Array.prototype.push = Array_push } function Array_shift() { var A_s = 0 var response = this[0] for (A_s = 0; A_s < this.length-1; A_s++) { this[A_s] = this[A_s + 1] } this.length-- return response } if (typeof Array.prototype.shift == "undefined") { Array.prototype.shift = Array_shift } I am a new to js and GM but I am trying to make a script that will click a button on a page where there are multiple instances of the button. The source I am looking at is below and I have narrowed down what I am looking at to the bold section. <dl> <dd class="left"><div id='recommendstatus_article4458331'> <dl class="recommend"> <dt class='recs'><a href="javascript://" onclick="RecSpy( 'article', '4458331', 'tippers' ); return false;">50</a> </dt> <dd><a href="javascript:void(0);" onclick="RecommendItem(1,'article','4458331','1','recommendstatus_article4458331' ); return false;" onmouseover="return overlib('Give thumbs up', WRAP);" onmouseout="return nd();"> <img class='icon' title='' alt='Thumb up' style='background-position: -304px -48px;' src='http://geekdo-images.com/images/pixel.gif' /></a></dd> <dt class='tippers'><a href="javascript://" style='color: #969600;' onclick="RecSpy( 'article', '4458331', 'tippers' ); return false;"></a></dt> <dd><a href="javascript:void(0);" onmouseover = "return overlib( 'GeekGold Tip', WRAP );" onmouseout = "nd();" onClick="GeekGoldTip(0,'article','4458331','recommendstatus_article4458331'); return false;"> <img class='icon' title='' alt='tip' style='background-position: -368px -48px;' src='http://geekdo-images.com/images/pixel.gif' /></a></dd> <dd> <a href="javascript:void(0);" onclick="RecommendItem(0,'article','4458331','','recommendstatus_article4458331', 'article4458331' ); return false;" onmouseover="return overlib('Hide this post', WRAP);" onmouseout="return nd();"> <img class='icon' title='' alt='Thumb up' style='background-position: -336px -48px;' src='http://geekdo-images.com/images/pixel.gif' /></a> </dd> <dt class='thumbsdown'> </dt> </dl> How do I create a script to find each instance of the button and click it? I have three radio button groups with different values. My script only works for one group. Please help! <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script> function emailTo(){ var emails = document.getElementsByName("email1"); var emailAdress = null; for(var i = 0; i < emails.length; i++){ if(emails[i].checked){ emailAdress = emails[i].value; } } if(emailAdress == null){ alert("select the email address"); return; } var mailto_link = 'mailto:'+emailAdress; var win = window.open(mailto_link,'emailWindow'); if (win && win.open &&!win.closed) win.close(); } </script> </head> <body> <p> <input type = "radio" name = "email1" value = "email1.com"/> recipient 1a <input type = "radio" name = "email1" value = "email1.com"> recipient 1b </p> <p> <input type = "radio" name = "email2" value = "email2.com"/> recipient 2a <input type = "radio" name = "email2" value = "email2.com"> recipient 2b</p> <p> <input type = "radio" name = "email3" value = "email3.com"/> recipient 3a <input type = "radio" name = "email3" value = "email3.com"> recipient 3b</p> <p> </p> <p> <input type = "button" onClick = "emailTo()" value = "Email"/> </p> </body> </html> I need a script that will allow a user to select a vertical selection and Horizontal selection that displays a corresponding image. There are only 8 combinations (4 vertical choices and 2 horizontal choices) I just need to display the correct image and a description. There has to be only one of each selected and only display one image. I have tried several and have had no luck. Any ideas? Here is how the layout will look Hi there! I need help! Basically, I need to create a sentence and on one of the words the person accessing the site can click the word and it will change to another word and then again to a third word and so on for 5 words then it will, on click, return to the 1st word again. like a circle of various words. I've managed to get it to work with 2 words back and forth - but I need it to have multiple states. I need the JS and how to impliment it in the HTML. JS isnt my strong point just yet Please help me! Thanks so so much! follow me on twitter - @robyn_90 I'm only validating one (Consent) radio button with this code but i need to validate multiple different questions/buttons. Code: <script> function getRBtnName(GrpName) { var sel = document.getElementsByName(GrpName); var fnd = -1; var str = ''; for (var i=0; i<sel.length; i++) { if (sel[i].checked == true) { str = sel[i].value; fnd = i; } } return fnd; } function checkForm() { var chosen = getRBtnName('Consent'); if (chosen < 0) { alert( "Please choose one answer when you are asked to select a number." ); return false; } else { return true; } } </script> <form action="congratulations_aff.php" method="post" name="congratulations_aff" onSubmit="return checkForm()"> <table border="0" cellspacing="1" cellpadding="0"> <tr> <td colspan="3">I consent to providing my electronic signature.</p></td> </tr> <tr> <td colspan="3" valign="top"> <input type="radio" name="Consent" value="Y" /> Yes <input type="radio" name="Consent" value="N" /> No <table border="0" cellspacing="1" cellpadding="0"> <tr> <td>I consent to electronic receipt of my information reporting documentation.</td> </tr> <tr> <td valign="top"> <input type="radio" name="Consent1099YesNo" value="Y" /> Yes <input type="radio" name="Consent1099YesNo" value="N" /> No</td> </tr> <tr> <td valign="top"> For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation? <input type="radio" name="USPersonYesNo" value="Y" /> Yes <input type="radio" name="USPersonYesNo" value="N" /> No</tr> </table> <input type="submit" value="submit" value="Submit" /> </form> Any help would be greatly appreciated. This may seem a bit of an unusual question, but I've been tossing around an idea in my head for an experimental collaborative art & music website. I've not started building the site at all, and I've only a little HTML and no scripting experience. I plan on most likely using a service like squarespace for the ease of updating and member system and other features. (I imagine a few around here scoff at that kind of service! But that's beside the present issue.) So I imagine that if javascript is capable of handling this, it's not an extremely complicated solution. For example: say I have a song I'd like users to be able to listen to, but I want to split the parts (drums, strings, guitars, vocals, etc.) among a few different audio files, all embedded within close proximity of each other (say arranged vertically in two columns) on the same page. I want this so that users are free to play around with the parts, dropping them, lowering & raising volume, even pulling them out of sync if they please. Now what I want is a single button that will trigger all of the audio files to begin playback simultaneously, say, above the embedded files and centered. Would this be possible? Could anyone offer assistance in setting up this kind of thing? Thanks in advance! Hey guys. This is vague because I dont know what exactly to tell you but please reply with me so I can fix this. I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image) I do not know how to achieve this but shouldnt be too hard. Here are the two sources you will need to look through to help me fix the forum. http://neoweather.com/FWFORUM.JS http://static.websimages.com/JS/fw.js THANKS Hey guys. I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image) I do not know how to achieve this but shouldnt be too hard. Here are the two sources you will need to look through to help me fix the forum. http://neoweather.com/FWFORUM.JS http://static.websimages.com/JS/fw.js THANKS i'm still a relative noob and this has me stuck - i have a save button with a "save as copy" in the save dropdown list. add new item directs to a premade/formatted project that is used as a template, so on that item i only want/need the "save as copy" but on all other items that use the form i need to only have the "save" function. is there any way to either change the function of the button depending on item that is being viewed in the edit screen OR hide the "save" button and only show the button associated with "save as copy - and vis versa for the rest of the items?? current button code is - protected function getToolbar() { $options = array(); $user = JFactory::getUser(); $create_ms = $user->authorise('core.create', 'com_pfmilestones'); $create_task = $user->authorise('core.create', 'com_pftasks'); $options[] = array( 'text' => 'JSAVE', 'task' => $this->getName() . '.save'); $options[] = array( 'text' => 'Save as new project', 'task' => $this->getName() . '.save2copy', 'options' => array('access' => ($this->item->id > 0))); PFToolbar::dropdownButton($options, array('icon' => 'icon-white icon-ok')); item used as template is id=8 any help or suggestions would be greatly appreciated.. Hi, I am not entirely sure what I am doing wrong here, and I have been looking at this for ages, so apologies in advance if I have become so bleary eyed I can't see something simple. I use php to create buttons based on values pulled for a table. The problem I have is when you click on the first button the javascript function works great, when you click on the next button you get the same output even though it should be different results. I am working in ff and I can see on my firebug console that the javascript function is being called, but it is not passing the new value of the second or third button, it just keeps repassing the value of the first button. So not entirely sure where I am going wrong here. My page is: Code: <script type="text/javascript"> function loadXMLDoc2(File,ID,Msg){ if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { try{ xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById(ID).innerHTML=xmlhttp.responseText; } } var params=Msg; xmlhttp.open("POST",File,true); xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache"); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-length", params.length); xmlhttp.setRequestHeader("Connection", "close"); xmlhttp.send(params); } </script> <head> <body> <?php $con = mysql_connect("localhost","user","password"); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("mydb", $con); $result = mysql_query("SELECT DISTINCT theme FROM goods WHERE category='{$_POST['category']}' ORDER BY theme DESC"); while($row = mysql_fetch_array($result)){ echo '<input type="text" class="hidden" name="theme" id="theme" value="' . $row['theme'] . '" ><input type="button" class="button3" name="product" id="product" value="' . $row['product'] . '" onClick="loadXMLDoc2(\'getShow.php\',\'txtHint\',\'theme=\'+encodeURI(document.getElementById(\'rtheme\').value))" > '; } echo '<br /><br /> <div id="txtHint"><div> <br /> <br />'; mysql_close($con); ?> And getShow.php produces a table with a list of product images, names and prices, based on theme. So basically not sure where I am going wrong here? Hi, I hope someone can help me. I'll be honest and say I don't know much about javascript, but am fairly comfortable in html. I am building a website that will have multiple image swaps on multiple pages. I am building this in wordpress, and I'm guessing that means my approach will be different than if I wasn't using wordpress. Here's how one page would work: There are 10 images shown. 1,2,3,4,5,6,7,8,9,10. When number 1 is clicked on, I want a new image - 1a. When 2 is clicked on, 2a. So there are 20 different images in all on a given page. Also, I want the user to be able to click on the image again to restore the original image. I would prefer onclick to onmouseover. There will be literally dozens of pages like this on the site, managed by wordpress, so hundreds of images to swap. Basically the first image is a question - the second image is the answer. Is this possible? i got javascripts button : Code: <input type="button" value="select" onClick="document.getElementById('input').select()" /> how can i transform "button" to image button (gif) I have 4 rows in a table. Each row consist of 4 radio buttons. Each radio button per row has different values in it but has the same name (group) ex: <input type="radio" name="a" value="1"> <input type="radio" name="a" value="2"> <input type="radio" name="a" value="3"> <input type="radio" name="a" value="4"> <input type="radio" name="b" value="1"> <input type="radio" name="b" value="2"> <input type="radio" name="b" value="3"> <input type="radio" name="b" value="4"> and so on.. If I click radio button A with value 2, I want to output the total at the bottom as "2".. Also, if I click radio button B with value 3, I want to output the total of A and B as 5 and so on.. How can I automatically calculate the answer based on which radio button was click? update: I got my answer from this site: http://stackoverflow.com/questions/1...s-using-jquery i am trying to make a button which is a .gif that will change when a mouse over occurs and a animation will occur when click then will relocate to a new page but i am getting multiple images at the same time pleas help. Code: <html> <body> <img src="Jepordy/Fla files/Button set 1.gif" > <img name="jsbutton" src="Jepordy/Fla files/Button set 1.gif" width="550" height="400" border="0" alt="javascript button"> <SCRIPT language="JavaScript"> var myimgobj = document.images["jsbutton"]; </SCRIPT> <A href="#" onMouseOver="return changeImage()" ><img name="jsbutton" src="Jepordy/Fla files/Button mouse over.gif" width="550" height="400" border="0" alt="javascript button"></A> <SCRIPT language="JavaScript"> function changeImage() { document.images["jsbutton"].src= "C:\Documents and Settings\fus10n\Desktop\Jepordy\Fla files\Button mouse over.gif"; return true; } </SCRIPT> <A href="#" onMouseOver="return changeImage()" onMouseOutwidth="550" height="400" border="0" alt="javascript button"= "return changeImageBack()" onMouseDown="return handleMDown()" onMouseUp="return handleMUp()" ><img name="jsbutton" src="Jepordy/Fla files/Button set 1.gif" width="550" height="400" border="0" alt="javascript button"></A> <SCRIPT language="JavaScript"> function changeImage() { document.images["jsbutton"].src= "C:\Documents and Settings\fus10n\Desktop\Jepordy\Fla files\Button set 1.gif"; return true; } function changeImageBack() { document.images["jsbutton"].src = "C:\Documents and Settings\fus10n\Desktop\Jepordy\Fla files\Button set 1.gif"; return true; } function handleMDown() { document.images["jsbutton"].src = "C:\Documents and Settings\fus10n\Desktop\Jepordy\Fla files\Button set 1.gif"; return true; } function handleMUp() { changeImage(); return true; } </SCRIPT> <A href="QUESTION LOCATION FOR THIS BUTTON GOES HERE!" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()" onMouseDown="return handleMDown()" onMouseUp="return handleMUp()"> <A href="http://www.javascript-coder.com/" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()" onMouseDown="return handleMDown()" onMouseUp="return handleMUp()" ><img name="jsbutton" src="Jepordy/Fla files/Button mouse over.gif" width="550" height="400" border="0" alt="javascript button"></A> </body> </html> Trying to build a timer for an image array, it works, I've created also a stopTimer on hover event. But, what I wish to do Is create buttons so the users can press previous or next and see the sliding images as they wish. here'S my code so far : <script type="text/javascript"> var currPic=1; var totPics=8; var keepTime; function setupPicChange() { keepTime=setTimeout("changePic()", 15000); } function changePic() { currPic++; if(currPic>totPics) currPic=1; document.getElementById("picture").src="/images/services/picture"+currPic+".png"; setupPicChange(); } function stopTimer() { clearTimeout(keepTime); } function startTimer() { keepTime=setTimeout("changePic()", 5000); } function prevTimer() { currPic-1 } function nextTimer() {currPic+1} </script> I've created the nextTimer and prevTimer functions but they do not seem to work. I do not know how to integrated these functions in CSS sor my button, which are designed with CSS hover, down and active states... can you guys help me out ? am pretty basic here with codes... |