JavaScript - Next Button For Image, Beginner Here

I just started my javascript class two weeks ago and am having troubles already and my book is no help.

My first assignment is having a list of country names and when you click the radio button next to the name the country flag pops up in a designated area for the image. I have tried a few different things but nothing is working. I have the list of countrys and the radio buttons but when i click the radio button the image doesn't pop up. Also, when i click another radio button they all stay selected.

1)
I have a group of radio buttons and have an image for each button.
is there anyway to get that image to go with the value of the radio button to the next page when the radio button is pressed. I already have a script to place the value of the radio button into a text box but i cant seem to get the image to follow.
2)
also is the a script to have 3 text boxes in a form post in a second form hidden and reappear in a third form before submit

Hi,
I' will be using the code he
http://javascriptkit.com/script/cut1.shtml
which uses a button to randomly redirect - just what I need!
As a newby to JS:
1. Can i simply insert a special image for the button?
2. As I need to offer a hundred or more destinations ( internal pages) must I list them on the initiating page?
3. My intention is to use iframes to contain the imported pages.

OR, is there an easier way? :-)

TIA,

Hi,

I have this button:
Code:

  <input type="image" src="pause.png" onmouseover="src='pauseon.png'" onmouseout="src='pause.png'" onclick="togglePause()" id="pauseBtn"/>

which changes from the play image to the pause image when clicked, using this function:

Code:

function togglePause(){
	if (paused){
		paused=false;
		document.getElementById('pauseBtn').src="pause.png";
		setTimeout("animate("+(continueStep)+")", tick);
	} else {
		paused=true;
		document.getElementById('pauseBtn').src="play.png";
	}
}

but it doesn't really work how I want it to - first off, I can't get the same mouseover and mouseout effect working for when the button is on the "play" image

secondly, the button reverts to the pause image regardless of if it is in play or pause state.

I'm kind of lost - can someone throw me a line?

the page I'm working on is here if you want to have a look

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.

hi, on my website http://zend.warrencreative.com/gemini-group/index.html

I am using thickbox, if you click on Subscribe to newsletter at the top it opens up a box, I need to change type="button" to type="image" but this doesn't work?!


is there any other way?


Code:

<a class="newsletter thickbox" href="#TB_inline?height=325&amp;width=365&amp;inlineId=myOnPageContent&amp;modal=true">Subscribe to eNewsletter</a>
		<div id="myOnPageContent" class="hidden"><p>Please enter your Name:</p><p><input type="text" name="name" class="textbox"></p><p>Please enter your Email:</p><p><form action="#"><input type="text" name="email" class="textbox"></p><p>&nbsp;</p><p><input type="button" value="Send" class="thickbox" title="add a caption to title attribute / or leave blank" alt="#TB_inline?height=325&amp;width=365&amp;inlineId=myOnPageContent1">&nbsp;&nbsp;<input onclick="tb_remove()" type="image" alt="cancel button" src="images/cancelbutton.jpg"></form></p></div>
		<div id="myOnPageContent1" class="hidden"><p>Thank you for subscribing</p><input onclick="tb_remove()" type="image" alt="cancel button" src="images/cancelbutton.jpg"></div>

thanks in advance

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 to All,

I have this problem:
I' dl ike that, if one clicks a button, appear window_explorer in which it' s possible to choose an image that it will put in the specific td of the table.

<head>
<script>
function add_pic() {
document.forms[0].pic.value == code to choose image ... }
</script>
</head>

<body>
<form method="POST" name="FrontPage_Form1">
...
<table>
<tr><td><button onClick="add_pic()">Insert Statitistic map</button></td></tr>
<tr><td>Comments</td></tr>
<tr><td id="pic" name="pic"> PLACE IN WHICH IMAGE APPEAR </td></tr>
</table>
...
</body>

Thanks in advance !!!

P.S. I use IE6 and Windows XP

Hi all,

I have the following code in my html.

<form name="createaccount" action="" method="post">
<div class="formrow">
<label>Select an Avatar:</label>
<div class="fieldcontent">
<img src="images/avatar1.jpg" class="avatargal" id="Image1" />
<input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image1');" onblur="imageoff('Image1');" />
<img src="images/avatar3.jpg" class="avatargal" id="Image2" />
<input type="radio" name="selectavatar" class="radiobtn" checked="checked" onclick="imageon('Image2');" onblur="imageoff('Image2');" />
<img src="images/avatar4.jpg" class="avatargal" id="Image3" />
<input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image3');" onblur="imageoff('Image3');" />
<img src="images/avatar5.jpg" class="avatargal" id="Image4" />
<input type="radio" name="selectavatar" class="radiobtn lastbutton" onclick="imageon('Image4');" onblur="imageoff('Image4');" />
<img src="images/avatar3.jpg" class="avatargal" id="Image5" />
<input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image5');" onblur="imageoff('Image5');" />
<img src="images/avatar5.jpg" class="avatargal" id="Image6" />
<input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image6');" onblur="imageoff('Image6');" />
<img src="images/avatar1.jpg" class="avatargal" id="Image7" />
<input type="radio" name="selectavatar" class="radiobtn" onclick="imageon('Image7');" onblur="imageoff('Image7');" />
<img src="images/avatar4.jpg" class="avatargal" id="Image8" />
<input type="radio" name="selectavatar" class="radiobtn lastbutton" onclick="imageon('Image8');" onblur="imageoff('Image8');" />
</div>
</div>
</form>

-----------

The javascipt is:

function imageon(here)
{

var elem= document.getElementById(here);
elem.style.border = "solid 2px blue";
}
function imageoff(here)
{

var elem= document.getElementById(here);
elem.style.border = "solid 2px white";
}

----------

When user clicks radio button near "Image1" then "Image1" is highlighted in blue color border, and previously selected image gets white border.

This works in firefox and internet explorer but not on chrome and safari.

Any help?

I have built a webpage that is all one template and the use of an iframe to change the content and not reload the page graphics every time. The way the page is laid out is a background image in the farthest back table behind another table of a background image that is transparent and over lays the bottom table image.

I want the menu buttons; with the existing rollover image for them alone, to change the bottom layer background image "on click".

The only code sources i have found will swap images in the same table area and not to any image existing in the entire document.

thanx

I am trying to follow this article on doing a POST request with AJAX and PHP and it works fine, but as soon as I switch from the default submit button to an image I get an error. I would really appreciate any assistance on why switching the submit button to an image would affect it.

Thanks

http://www.hiteshagrawal.com/ajax/form-post-in-php-using-ajax/comment-page-1

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!!!!

When performing an Ajax request I want to change the submit button into a loading image and then swop it back again when the Ajax request is complete.

I don't want a loading image anywhere else as on mobile phones it can't always be seen due to small screen size.

I have grabbed the event (which references the form, is that right?) and I have something like this:

Code:

<button type="submit" name="name_can_vary">Search</button>
event.name_can_vary.style.visibility = 'hidden';
//(obviously this isn't complete code but no doubt explains what I am talking about)

..which would hide the button and works exactly as I want to this point, but of course it does;t return when Ajax has completed or show the loading image.

Ideally, instead of just hiding the button I want JavaScript to swop the button for the loading image. I suppose I could have extra HTML on every page that is made visible with the loading image but I would rather have JS do everything from here (saves editing all pages with submit buttons on).

Thanks for any help.

I have some code that will check a users screen resolution and open a new window with a particular version of my website in, I have several sites for different page sizes. But when this code runs in Safari the pop-up is blocked so I would like the image on my page to be a button that runs the code to open the 'correct' window (based on the screen res) and as a button is launching the new window Safari should be okay about it.

Unless I am doing something wrong?

http://www.meta.projectmio.com/pop.html


But how do I modify the code to do this, I'm hopeless?

Thanks.

So I found this script and i give all props to the author but can anyone help me to add text to the random images. Also i need a button that will generate the random images/text not when you refresh the page but when your press the button and to not display any image/text till the button is pressed?

Thanks in advance.

[CODE]
<script language="Javascript">

var currentdate = 0
var core = 0

function StringArray (n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ' '

}
}

image = new StringArray(10)
image[0] = 'images'
image[1] = 'images'
image[2] = 'images'
image[3] = 'images'
image[4] = 'images'
image[5] = 'images'
image[6] = 'images'
image[7] = 'images'
image[8] = 'images'
image[9] = 'images'

var ran = 60/image.length

function ranimage() {
currentdate = new Date()
core = currentdate.getSeconds()
core = Math.floor(core/ran)
return(image[core])
}

document.write("<img src='" +ranimage()+ "'>")

</script>
<form>
<p><input type="button" name="B1" value="Switch It Up" onclick="ranimage()"></p> </form>

[CODE]