JavaScript - Button On Click Swaps Background Image

i am trying to change my background image after click on given in grid option. any body show me complete code in java script.

resource: HP Laptop Repair and Solution Service Center in Delhi

Hi,

I'm very new to coding Javascript, so have no idea what I'm doing, so sorry

What I'm trying to do is, on my Wordpress Blog I have a button/Image: Code:

src="http://Mysite.com/Images/Button.png"

I would like for when a user Clicks this Image/button, 2 things to happen - 1. For my Content Locker to pop up, I believe that i already have the correct code for that?:

Code:

onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://MYCONTENTLOCKER.com/guid?:1234567890')

For this content locker to trigger, The whole action needs to have a ID e.g. 'ID="button1'?

And 2. For a timer to start for say 30 Seconds.

When that timer ends, i would like the original button/image to be replaced with a different button/image. And when that New button is clicked i would like a text string to appear below the button - saying something e.g. 'You've completed this part'

I know that this is a lot to ask, and I will be so very grateful if someone helps me out here!

Thanks!
Harry.

Hi,

I have a button with a class name as below:

<input type="button" class="test" value="Add" onclick=Dothis(this);>

class test
{
background-image: url("test.png");
}

I would like to disable the button when clicked
function Dothis (element)
{
element.disabled = 'true';
}

This is working fine (i'm seeing it as disabled(grayedout)) when i wont set any class. But when i set the class to "test" i'm not seeing any change. Can you please let me know how i can resolve this.

I am trying to make a button that would change the background image whenever somebody clicks it.

I have tried something along the lines of this:

Quote:
<input type="button"
value="Pattern1"
onClick="background-image: url(background.png);background-repeat: no-repeat;">
and,

Quote:
<input type="button"
value="Pattern2"
onClick="background: url(background.png);background-repeat: no-repeat;">
as you can see, I am a beginner at coding in general so any help is appreciated.

My assumption to why it doesn't work is that I am combining javascript with CSS, but I am most likely wrong.

Hi

Complete novice with Java so need some help please!

I want to put a button on a website that when clicked changes the background. The button needs to be an image.

For example, click on the image and it makes the background image1 and then click again to switch to background image2. The image/button that is being clicked will be 2 images (one says "turn lights on" then when clicked shows other image "turn lights off")

I have managed to pick up bits of code from the net that change the background and got another code that makes 2 images a toggle button. The button changes the background on the first click but no back again on the second click.

I guess it needs an if/else statement but not sure.

Thanks for any help!!!!

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?

Hi

I have created the following effects on the images seen here http://techavid.com/design/test3.html . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code.

Here code I have now....

Code:

<style type="text/css" media="screen">

#wrapper {
 background: url('_assets/images/sun-inactive.p') no-repeat #777eee;
  width: 470px;
  margin: 0 auto;
}

a#sun{
  background: url('_assets/images/sun-inactive.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
  float: left;
  
}

a#sun:hover,
a#sun.active {
  background: url('_assets/images/sun.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
}

a#plane {
  background: url('_assets/images/plane-inactive.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
  float: left;
}

a#plane:hover,
a#plane.active {
  background: url('_assets/images/plane.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
}

a#nano {
  background: url('_assets/images/nano-inactive.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
  float: left;
}

a#nano:hover,
a#nano.active {
  background: url('_assets/images/nano.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
}

#popuptext {
float: left;
margin: -30px 0 0 0;
padding: 0 0 0 0px;
font-size: 11px;
}

#popuptext a {
color: #ff6600;
padding: 0 30px; 
}




</style>


</head>
<body>

<div id="wrapper">
<div id="navigation">
  <a id="sun" href="#"></a>
  <a id="plane" href="#"></a>
  <a id="nano" href="#"></a>
</div>

<div style="clear:both"></div>
  <div id="popuptext">1st: <a href="#">Sun</a>
2nd: <a href="#">Airplane</a>
3rd: <a href="#">Nano</a> 

</div>

</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

  // target each link in the navigation div
  $('#navigation a').click(function() {
    // link that you clicked
    clicked = $(this).attr('id');

    // make sure that all the others are not active
    // except for the clicked one
    $('#navigation a').each(function() {
      if ($(this).attr('id') == clicked) {
        $(this).addClass('active');
      } else {
        $(this).removeClass('active');
      }
    });

    // prevent the default link action
    return false;
  });

});
</script>

What jquery or javascript code do I need to do this?

thanks,
chaser

Hello, I am working on a tool for hardware quoting, I'm currently trying to add a button for adding line items to the quote.

Here is what I currently have:
The HTML:
Code:

<html>
...
<input type="button" id="sbutt" onclick="buttinc()" value="Click Me" />
<div id="txtarea"></div>
...
</html>

The script:
Code:

vbutt = 0
function buttinc()
 {
 var buttona = document.getElementById("txtarea");
   if (vbutt<100)
     {
      buttona.innerHTML="<div id='newdiv" + vbutt + "'></div><br />";
      var buttb = document.getElementById("newdiv"+vbutt);
      buttb.innerHTML = "some text" + vbutt + "close tags and stuff";
      vbutt = vbutt + 1;
      }
 }

Now, it is sort of working the way I expect. When the button is clicked, it creates the new div, starts the id at 0, and increments the div id each time the button is pressed afterwards.

It also displays the text (buttb.innerHTML) in the new div. However, it only increments the id of the same div, it doesn't create a new div under the first one.

What I am hoping for is:
click 1 : <div id="newdiv0">0</div>
click 2 : <div id="newdiv1">1</div>
click 3 : <div id="newdiv2">2</div>
etc

What it is doing:
click 1 : <div id="newdiv0">0</div>
click 2 : <div id="newdiv1">1</div> (newdiv0 disappears)
click 3 : <div id="newdiv2">2</div> (newdiv1 disappears)

What am I missing? Any help is appreciated.

Hey

I want to enforce a click on the facebook share button, please help me out here.

I was thinking something like this:
Code:

javascript:window.location="http://www.facebook.com/connect/prompt_feed.php?locale=en_US&message=hi"; javascript:function selectFirst() { publish.focus(); publish.click();}  selectFirst();

Something wrong with that code? What code would work? Is it not possible?

Thanks a lot,
Sarah

I would like for the script to say "Ok here is the button on this page *clicks* (or submit)"

I have tried this with out help, I'm not really sure what to do. I've tried learning what I can on my own, I've tried using the search tool.

Here is the part of the code I am trying to use to make my click button.

Code:

<div id="interactiveBox"> 
    <div class="divpad3">
              
                    <form name="buyform" method="POST" action="/marketplace/userstore/2690240/buy/?id=567595175&amp;step=submit" ENCTYPE="application/x-www-form-urlencoded">
                <strong>Buy It Now</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                <strong>Password</strong> <input type="password" class="marketplaceInputField" name="password">
                <input type="hidden" name="nonce" value="860307364.1283901229.441212630">
                <button type="submit" class="cta-button-sm"><span>Buy Now</span></button>
                <br /><br />
            </form>

Here is what I have tried and failed.. This code will be used in combination with greasemonkey

Code:

<script>function clickOnLoad()
{
document.buyform.submit.value = "true";
}

body onload="clickOnLoad()"</script>

Hi.

1) I would like to click the Download button on this site, then wait lets say 60 sec & click free download button.

http://uploading.com/files/S4WYPP73/...r_ENG.rar.html

I remember that somehow it is possible to create the Request URL & then input it into IE & the server will think I hit the button.

But how can I make the URL? And how is it called? posting URL request?

I will be using firefox or I can make HTML file & execute it in IE for every file.

PHP Code:
<form action="http://uploading.com/files/get/S4WYPP73/" method="post" id="downloadform">
        <input type="hidden" name="action" value="second_page" />
        <input type="hidden" name="file_id" value="4663720" /> 


PHP Code:
    function do_step_1()
    {
        do_request('files', 'get', {file_id: 4663720, action: 'step_1'}, function(wait_time){
            if(wait_time > 0)
                start_timer(wait_time);
            else if(wait_time <= 0)
                download();
        });
    }

    function do_step_2()
    {
        do_request('files', 'get', {file_id: 4663720, action: 'step_2'});
    } 


PHP Code:
    function download()
    {
                    $('#waitblock').html('Free Download');
            $('#waitblock').click(function(){
                do_step_2();
            });
            } 

hye..

i'm trying to calculate value of balance by substract cash to total. But nothing happen.

here is my code:
Code:

<script type="text/javascript">

function substract(){

{
 document.calculate.Cash.value = ZA;
 document.calculate.Total.value = Z1;
 balance();
 }
 
function balance(){
 AAA = document.calculate.Balance;
 AAA.value = (ZA-Z1).toFixed(2);
}

</script>

 </head>
 <body style="background-color: #99FF99">
 <?php 
 // if there are any errors, display them
 if ($error != 'Unable to update')
 {
 echo '<div style="padding:12px; border:1px solid purple; color:red; font-weight: bold; text-align: center; font-size: medium; ">'.$error.'</div>';
 }
 ?> 
 
 <form action="" method="post" name="calculate" style="width: 1320px; ">
 	<div class="style1">
 <input type="hidden" name="CustID" value="<?php echo $CustID; ?>">
 <input type="hidden" name="Total" value="<?php echo $Total; ?>">
 <input type="hidden" name="TableID" value="<?php echo $TableID; ?>">
 <div class="style5" style="width: 820px; height: 148px; margin-left: auto; margin-right: auto;">
 <p class="style9">&nbsp;</p>
	 <p class="style17"><span class="style19">CUSTOMER </span> <strong>
	 <span class="style19">ID:</span></strong> <strong> <?php echo $CustID; ?>
 </strong></p>
 	<table style="width: 35%; height: 185px; margin-left: auto; margin-right: auto;" class="style15">
		<tr>
			<td class="style11" style="width: 111px; height: 30px;"><strong>Table ID : 
			</strong></td>
			<td style="height: 30px; width: 169px;" class="style18"><strong><?php echo $TableID; ?></strong></td>
		</tr>
		<tr>
			<td class="style1" style="width: 111px; height: 20px;"></td>
			<td style="height: 20px; width: 169px;" class="style1"></td>
		</tr>
		<tr>
			<td class="style16" style="width: 111px; height: 30px;"><strong>Total : 
			</strong></td>
			<td style="height: 30px; width: 169px;" class="style18"><strong> 
			RM<?php echo $Total; ?> </strong></td>
			</tr>
		<tr>
			<td class="style1" style="width: 111px; height: 20px;"></td>
			<td style="height: 20px; width: 169px;" class="style1"></td>
		</tr>
		<tr>
			<td class="style16" style="width: 111px; height: 30px;"><strong>Cash : 
			</strong></td>
			<td style="height: 30px; width: 169px;" class="style1"> <strong>
			<span class="style20">RM</span>
			<input type="text" name="Cash" id="Cash" class="style17" style="width: 120px"></strong></td>
		</tr>
		<tr>
			<td class="style1" style="width: 111px; height: 20px;"></td>
			<td style="height: 20px; width: 169px;" class="style1"></td>
		</tr>
		<tr>
			<td class="style16" style="width: 111px; "><strong>Balance : 
			</strong></td>
					 <td style="width: 169px;" class="style1"><strong>
					 <span class="style20">RM</span>
					 <input type="text" name="Balance" id="Balance" value="0.00" class="style17" style="width: 120px"></strong></td>
					 </tr>
				 </table>
 	<p class="style5"><strong>
    <input class="style3" name="calculate" type="button" onclick="substract()" value="Calculate">&nbsp;&nbsp;&nbsp; <input class="style3" name="submit" type="submit" value="Done"></strong> </div>
 		</div>
 </form>

How can I do this? I'm new to JavaScript. I tried messing with While but it just caused lag as it kept looping infinitely.

The problem I think is that I have a variable that changes every time I click the button. The function changes the variable. So it successfully changes the variable once to my likings, then when I click the button (thus running the function) it does nothing.

Here's an example I created to show you

Quote:
<html>
<head>
<script type="text/javascript">
var x = 50;
var y = Math.floor(Math.random()*5);
function test()
{
var a = x+y
document.getElementById("testing").innerHTML=a;
}
</head>
<body>
<p id="testing"></p>
<input type="button" value="asdf" onclick="test()" />
</body>
</html>


So in this case, I need to click the button multiple times in which each time it should add y to x. It only works once and then goes kaput.

Thanks!

I want to show an hourglass instead of a mouse pointer on click of a button.
I'm having both client and server side validations on the button click event.
I have written the code for hourglass in the javascript function along with the validations.
Now, on click of the button the hourglass gets displayed after 3-4 seconds and not immediately. According to me, the hourglass is getting displayed after the javascript function(client side validation) is executed and before server side validation begins.
Is there any way to display the hourglass without delays ?
Kindly let me know if there is any fix for eliminating this delay. I hope my question is clear. Please let me know if i'm wrong somewhere as i'm new to javascript programming.

Thanks in advance.
zizou.

Hi there. I want to alert the user that he or she has not clicked on any of the radio buttons in each group. How do I do so?

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" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
function validateRadio(obj,correct){
  var result = 0
  for(var i=0; i<obj.length; i++){
    if(obj[i].checked==true && obj[i].value==correct) result = 1
  }
  if(!result && obj.value == correct) result = 1
  return result;
}
</script>

</head>
<body>
<form onsubmit="
  var err = ''
  if(!validateRadio(this.a,3 || 1))
  { 
        err+='\nFirst radio is wrong';
  }
  if(!validateRadio(this.b,2 || 1))
  { 
        err+='\nSecond radio is wrong';
  }
  
  if(err.length)
  { 
        alert('Problem:'+err); 
            return false; 
  }
  
  else
  { 
        alert('Good Job -- Submitting'); 
            return true; }" 
action="#">


Choose "3"
<input type="radio" name="a" value="1" /> 1
<input type="radio" name="a" value="3" /> 3


<p>Choose "2"
<input type="radio" name="b" value="1" /> 1
<input type="radio" name="b" value="2" /> 2


</p><p><input type="submit" value="Submit" />
</p></form>
</body>
</html>

Please advise.