|
JavaScript - Onclick Img Array Help
Hello,
I am trying to use the onclick function to allow a user to change the color of a photo. Everything works but I need a more practical way than using a bunch of IF statements. Here is what I have so far. This is just the function part I can include it all if needed. Code: function changeImage(c_img) {
if(c_img == "cameo") {
document.images("changingImage").src = "content/Image/Cameo.jpg";
} else {
document.images("changingImage").src = "content/Image/GreenChili.jpg";
}
Now I need to add 12 more imgs to this. It works if I throw 12 more if(c_img...)but there must be a better way. I am kinda a newbie when it comes to Java.. Thanks for any advice. Similar Tutorialshi, i currently have an array of 20 images. on load a random selection of 15 are taken, then they ordered randomly on the page and doubled (to play a match the pairs memory game) clicking restart will reorder the images randomly, but will use the same 15 chosen on page load. i need the restart button to choose another random 15 images from the 20 in the array. here is the site: http://www.thebigappwall.com/test.htm and here is the code: Code: // Concentration Memory Game with Images - Head Script
// copyright Stephen Chapman, 28th February 2006, 24th December 2009
// you may copy this script provided that you retain the copyright notice
function randomOrd(){return (Math.round(Math.random())-0.5); }
var back = '/images/back.png';
var tile = ['/images/lij.png','/images/myh_appwall.png','/images/Tap-Forms-icon-40.png','/images/urban-rivals-app-40.png','/images/warshipicon.png','/images/www2pdf-40.png',
'/images/pandora.png','/images/preschoolicon.png','/images/my_virtual_girlfriend_40x40_01.jpg','/images/my_virtual_girlfriend_40x40_02.jpg','/images/my_virtual_girlfriend_40x40_03.jpg','/images/my_virtual_girlfriend_40x40_04.jpg','/images/www2pdf-40.png','/images/preschoolicon.png','/images/pandora.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png'];
tile.sort( randomOrd );
function randOrd(a, b){return (Math.round(Math.random())-0.5);} var im = []; for (var i = 0; i < 15; i++) {im[i] = new Image(); im[i].src = tile[i]; tile[i] = '<img src="'+tile[i]+'" width="40" height="40" alt="tile" \/>'; tile[i+15] = tile[i];} function displayBack(i) {document.getElementById('t'+i).innerHTML = '<div onclick="disp('+i+');return false;"><img src="'+back+'" width="40" height="40" onclick="addClick();" alt="back" \/><\/div>';} var ch1, ch2, tmr, tno, tid, cid, cnt; window.onload=start; function start() {for (var i = 0; i <= 29 ;i++) displayBack(i);clearInterval(tid);tmr = tno = cnt = 0;tile.sort( randOrd );cntr(); tid = setInterval('cntr()', 1000);} function cntr() {var min = Math.floor(tmr/60);var sec = tmr%60;document.getElementById('c-timer').innerHTML = min+':'+ (sec<10 ? '0' : '') + sec;tmr++;} function disp(sel) {if (tno>1) {clearTimeout(cid); conceal();}document.getElementById('t'+sel).innerHTML = tile[sel];if (tno==0) ch1 = sel;else {ch2 = sel; cid = setTimeout('conceal()', 900);}tno++;} function conceal() {tno = 0; if (tile[ch1] != tile[ch2]) {displayBack(ch1);displayBack(ch2);} else cnt++; if (cnt >= 15) clearInterval(tid); }
Thanks Hi.. I should warn, i know almost nothing about javascript. . i've been trying read sample scripts and examples on how to modify this script; but I just don't know enough. I have a script that pulls data from an array, and copies it directly to the clipboard when a user clicks on it. The problem is this only works in IE, because Firefox doesn't by default allow that to happen. I'm trying to change it so that when it is clicked, instead, it takes what was going to be copied to the clipboard, and puts it in a Prompt box for the user to copy and paste. I had other scripts that do that, but I can't for the life of me figure out how to learn from it! This is the function in the current script Code: <script language="javascript" type="text/javascript">
<!--
function selectThis(src) {
document.selection.clear;
txt = eval(src +".innerText");
theObj = document.all(txt);
txtRange = document.body.createTextRange();
txtRange.moveToElementText(eval(src));
txtRange.select();
txtRange.execCommand("RemoveFormat");
txtRange.execCommand("Copy");
alert(txt + " '.$caption[ 'paste' ].'");
}
-->
</script>
';
}
and this is the onclick code Code: ';
foreach ( $ausgabe as $key => $data) {
if ( $key == '' )
continue;
if ( ( $_GET[ 'group' ] != '*' )
&& ( $this->info[ $key ][ 'xx_data' ] != $_GET[ 'group' ] ) )
continue;
$tpack = $this->info[ $key ][ 'pack' ];
$tname = $this->info[ $key ][ 'xx_desc' ];
$jsid= $nick2.'_'.$tpack;
if ( isset( $this->info[ $key ][ 'xx_lock' ] ) ) {
if ( $this->hide_locked > 0 )
continue;
$tname .= ' (gesperrt)';
}
$tname = htmlspecialchars( $tname);
if ( $javascript > 0 ) {
$tname = '<span class="selectable" onclick="javascript:selectThis(\''.
$jsid.'\');">'.
$tname."</span>\n".
'<span id="'.$jsid.'" class="hidden">'.
'/msg '.$this->nick.' xdcc send '.$tpack."</span>\n";
}
if ( isset( $this->info[ $key ][ 'xx_note' ] ) )
$tname .= '<br>'.$this->info[ $key ][ 'xx_note' ];
$label = "Download mit:\n/msg ".$this->nick.' xdcc send '.$tpack."\n";
if ( isset( $this->info[ $key ][ 'xx_md5' ] ) )
$label .= " \nmd5: ".$this->info[ $key ][ 'xx_md5' ];
if ( isset( $this->info[ $key ][ 'xx_crc' ] ) )
$label .= " \ncrc32: ".$this->info[ $key ][ 'xx_crc' ];
echo '
<tr>
<td class="right">#'.$tpack.'</td>
<td class="right">'.$this->info[ $key ][ 'xx_gets' ].'</td>
<td class="right">'.makesize($this->info[ $key ][ 'size' ]).'</td>
<td class="content" title="'.$label.'">'.$tname.'</td>
</tr>
';
I've spent days at trying to customize it.. but.. i'm not a programmer I was able to get it to open a prompt box, and had it populate with ("copy this code", $variable), but cannot figure out how to have it display the proper values that was clicked on. I have no idea though what is considered efficient either in the code. I hope this isn't considered asking for TOO much help.... So here's my problem. I have a long list of buttons that I want to declare their onclick with values from an array. It looks something like this. It seems simple but obviously there's something that I'm not seeing that isn't allowing this to run.Here's what the code looks like Code: <html>
<body>
<form name="form1">
<input type="button" name="one">
<input type="button" name="two">
<input type="button" name="three">
</form>
<script>
function hello()
{
....
....
}
goodbye = ["one","two","three"]
for(i=0;i< 3; i++)
{
document.form1.goodbye[i].onclick=hello;
}
If anybody could help me out with this I would greatly appreciate it. I'm currently working on a project and I am doing a bunch of image switching. I'm having a problem with the following... I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click. Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already. What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function. What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top. Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure. Is it possible disable an onclick after clicking it and then enable it from another onclick by id Code: <img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;"> This code runs when it is clicked: Code: $("#one").click(function() {
runEffectB();
return false;
});
What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run. I am assuming I will be able to re-enable it from another onclick running a similar function. This is jquery and jquery ui if that helps. Any ideas much appreciated. Hello... Here is an example of a site I'm working on: http://mrmatthewreese.com/surine/custominlays.php notice the links for the alien cross bones, celtic knot etc...change colors once they are clicked on? Is it possible to have the top (alien crossbone) be set to black before it is clicked on then changed to the grey color once a different link is clicked? Just curious if anyone can help. Here is the javascript code: <script language="JavaScript" type="text/javascript"> /*<![CDATA[*/ var Lst; function CngClass(obj){ if (Lst) Lst.className=''; obj.className='boldlink'; Lst=obj; } /*]]>*/ </script> <a href="#" onclick='changeimage();'><span onclick="CngClass(this);">Alien Crossbones</span></a><br /> <a href="#" onclick='changeimage2()'><span onclick="CngClass(this);">Celtic Knot</span></a><br /> <a href="#" onclick='changeimage3()'><span onclick="CngClass(this);">Compass Rose</span></a><br /> <a href="#" onclick='changeimage4()'><span onclick="CngClass(this);">Fleurdelis</span></a><br /> <a href="#" onclick='changeimage5()'><span onclick="CngClass(this);">Geometrix</span></a><br /> <a href="#" onclick='changeimage6()'><span onclick="CngClass(this);">Modern Vine</span></a><br /> <a href="#" onclick='changeimage7()'><span onclick="CngClass(this);">Nouveau</span></a><br /> <a href="#" onclick='changeimage8()'><span onclick="CngClass(this);">Scorpion</span></a><br /> <a href="#" onclick='changeimage9()'><span onclick="CngClass(this);">Traditional Block</span></a><br /> <a href="#" onclick='changeimage10()'><span onclick="CngClass(this);">TrebleBass Clef</span></a> <a href="#" onClick="showClubs(<% Response.Write x_ID_Nanny %>);" > Now this showclubs function shows a hidden div and at the end I have a return:false; but when you click on the link - it still seems to reload to the page and take you to the top how can I get it to just show the div without seeming to reload the page? hi everybody.. i have this simple code: Quote: <html> <head> <script language="javascript" type="text/javascript"> document.write("<input type='button' value='push' onclick='hi()'/>"); function hi() { alert("hi"); document.write("<input type='button' value='enter' onclick='javascript: bye()'/>"); } function bye() { alert("bye"); } </script> </head> <body> </body> </html> if i try to run it on chrom its works well.. but on IE or FireFox its not define the bye() function.. whats the reason?! and how i can solve it?.. thanks very much.. Hi i have a page that allows the user to enter details and also upload an image , I have onclick event on a submit button that goes off and performs a geocode on the postcode and saves the lat long to a database along with the other details they enter ( which all works fine) . The problem is that when i use the onclick event with the submit button it seems to bypass the onclick JS function and just go straight to the image upload bit. Can a button be a submit button and also have an onclick event or is there anything else i can do to fix the problem? Hey. When a checkbox is checked, I want it to add the id number of what I've got in a PHP variable, to appear in a <input type="text" />. For example: The id is 1, 2, and 3. So 3 checkbox's. I click on the first, and it adds to another input field, '1'. I hit the second, and the same thing happens, except the id is 2. Of course, I know how to do the ID and all with PHP. All I need to do now, is where when you click a check box, it adds to another field, and adds & after every check. Here is my code: Code: <input type="checkbox" name="delete"
onclick="this.checkedbox.style.display=(this.value=='checked' ? 'inline' : '2' )" />
<input type="text" name="checkedbox" />
Thanks. Hey guys, OK, so I have two buttons (code below) that when a user clicks on it, it will place text in a textarea. You can view all the code below: Buttons: Code: <div id="newButton">
<a href="#"><img src="http://i49.servimg.com/u/f49/17/29/94/19/graphi10.png" alt="Request a Graphic"></a>
<a href="#"><img src="http://i49.servimg.com/u/f49/17/29/94/19/review11.png" alt="Request a Review"</a>
</div>
The textarea ID is: Code: text_editor_textarea and this is the code that I would like to be placed inside the textarea: Code: Nature of Request: Creation Size: Primary Colors: Text To Insert: Donation: Extra Information: URL: I tried this, but the BBCode would not keep it's structure and would all end up on one line. EDIT: Oh...The BBCode is parsing inside the code box >.< Hi there Looking at adding a sound file to a game to play when an image, a .png image is pressed.. it will be a simple 1sec (or less) sound file i.e. bell, whistle etc. Just looking at some help on where to start with the code. Many thanks LL We have a function that validates a form and then does submit (and a bunch of other stuff) We called it using: Code: <td class="MyButtonStyle"> <a href="#" OnClick="MyFunction();" title="Save changes and continue">SAVE</a> </td> This worked fine on the browsers we were using (IE6 in the main), but we now find doesn't work on IE5.01, Mac and some others. OK, so having done some research I now realise I needed RETURN FALSE in OnClick. So ... faced with having to change a lot of pages I'd like to have the best possible syntax (by which I suppose I rellay mean most-browser-compatible), and I've seen a number of options; advice on picking a good'un would be much appreciated. Amongst the stuff I've seen is: Code: 1. href="#" onclick="MyFunction();return false;" 2. href="#null" onclick="MyFunction();return false;" 3. href="NoJavaScriptAbility.htm" onclick="MyFunction();return false;" 4. href="#" onclick="return MyFunction();" 5. href="javascript:;" onclick="return MyFunction();" 6. href="javascript://" onclick="return MyFunction();" 7. href="javascript:void(0);" onclick="return MyFunction();" 8. href="javascript:MyFunction();" What about what shows in the Status bar? Should I have an OnMouseOver event too to describe what MyFunction is going to do? Rather than displaying a meaningless link. Anything else to note? (This function is part of a library being reused for major web site development over the next however many years, and not for single-project build-and-throw-away, so all possible functionality, including The Kitchen Sink!, is up for consideration). Thanks Kristen Hello, can you help me work it out - I need a link to do two things at the same time - the main function of opening url and executing javascript. How can i do that?
Hi, I have created the following text input field: Code: <form name="xyz">
<input type="text" name="myText" size="30"
value="Initial text"
onclick="document.xyz.myText.value='';"/>
</form>
When the field is clicked the initial text is removed, clearing the way for new text to be entered, which is what I want. The trouble is if the field is again clicked the new text entered is also cleared which is not what I want. I only the field cleared for the first click and not for subsequent clicks. How can this be achieved? I will be grateful for all help. Hi I have this code which works fine: Code: <td class="Content_TD" onclick="_gaq.push(['_trackEvent', 'navigation ', 'link', 'blocks']); window.open('http://www.google.dk/');">
But I dont now the parameters instead of window.open, if I want it to open on top. Can somebody please help me? Thanks in advance Claus Hi Guys I have been trying to implement a way of using `onclick` to fill out a form field, with a Value assigned by a clickable rollover image. So i have a image rollover of a PC, i give the PC a Value? ID? of `PC No34` When the image is clicked it updates its Value of PC No34 to a Form text field which is named `pcid` the Form is on the same page as the PC rollover image. I have been trying most of the day but not getting it. Pls help Thanks for any help with this Willo I am trying to use an onclick statement to go to an alternate web page displaying a different version of tha file being displayed in the current page. In the HEAD section of the current page I have a global variable named currentfile that contains a file name. This function is also in the HEAD section immediately below the variable's declaration Code: function altlink()
{
gotolink = "http://www.mydomain.com/testpage.htm?alt=" + currentfile;
return gotolink
}
I have tried every combination I can think of in the onclick code to get it to work but, no joy. here is an example: Code: <a href="#" onClick=altlink(); return false; <img src="change.png" width="47" height="30"></a> If anyone here can sort me out I'd really appreciate it. I just can't get the next page to load. Ok here is my form: Code: $sql = "SELECT storage.quantity, items.name, items.image, items.description, items.itemid
FROM storage
JOIN items USING(itemid)
WHERE userid='".$_SESSION['userid']."'
ORDER BY items.name
LIMIT $offset, $rowsperpage";
$result = mysqli_query($cxn, $sql) or die(mysqli_error($cxn));
$imagecount = 0;
$tableOutput = "";
while ($row = mysqli_fetch_assoc($result)) //while there are still results
{
$imagecount++;
$quantity = $row['quantity'];
$name = $row['name'];
$image = $row['image'];
$description = $row['description'];
$itemid = $row['itemid'];
//Create TD
$tableOutput .= "<tr>\n";
$tableOutput .= "<td width=\"50\" style=\"text-align:center;\">\n";
$tableOutput .= "<img src=\"http://www.elvonica.com/".$image."\"><br>";
$tableOutput .= $name."</td>\n";
$tableOutput .= "<td width=\"400\" style=\"text-align:center;\">".$description."</td>\n";
$tableOutput .= "<td width=\"50\" style=\"text-align:center;\">".$quantity."</td>\n";
$tableOutput .= "<td width=\"100\" style=\"text-align:center;\">\n";
$tableOutput .= "<button type=\"button\" onclick=\"removeOne(".$itemid.")\">Remove 1</button><br />\n";
$tableOutput .= "<button type=\"button\" onclick=\"removeAll(".$itemid.")\">Remove All</button>\n";
$tableOutput .= "</td>\n";
$tableOutput .= "</tr>\n";
}
echo "<form action=\"storageprocess.php\" method=\"get\">\n";
echo "<table cellspacing=\"0\" class=\"news\" align=\"center\">\n";
echo "<tr>\n";
echo "<td width=\"50\" style=\"text-align:center;background-color:#EEEEEE;\"><b>Item</b></td>\n";
echo "<td width=\"400\" style=\"text-align:center;background-color:#EEEEEE;\"><b>Description</b></td>\n";
echo "<td width=\"50\" style=\"text-align:center;background-color:#EEEEEE;\"><b>Quantity</b></td>\n";
echo "<td width=\"100\" style=\"text-align:center;background-color:#EEEEEE;\"><b>Remove</b></td>\n";
echo "</tr>\n";
echo $tableOutput;
echo "</table><br />\n";
echo "</form>\n";
Just ignore the PHP part of it. This is going through a while loop as you can see, but the function "removeOne()" and "removeAll()" has the itemid in the parantheses so the javascript can catch that value. But the problem is, that it's not even catching the function. One of the functions (removeOne) looks like this: Code: <script>
$(document).ready(function() {
function removeOne(n)
{
alert("hi");
$.ajax(
{
type: "GET",
url: "storageprocess.php?itemid="+ n,
data: "itemid="+ n,
success: function()
{
alert("Item has been moved to inventory.");
}
});
}
});
</script>
Just ignore the AJAX part. I put the alert("hi"); in the beginning to see if it's even catching the onclick and it's not. So I don't understand why the onclick isn't preparing the function.. Can anyone help me here? If you wanted to change an ids onclick would int you just do this document.getElementById("").onclick = ""; Is there a way to do it? |
|||||||