JavaScript - Changing Highslide Js Buttons

Hi all,

I'm having trouble getting the following right:

Code:

<IMG border="0" onMouseOver=this.src="home2.gif" onMouseOut=this.src="home.gif" onClick=this.src="home2.gif" SRC="home.gif">

The idea is that after somebody clicks it, the button will remain home2.gif, but ofcourse if u mouseout after the click it will return to home.gif. Can somebody please help me with this problem?! I'm not really good at js, so I've been struggling with this for quite a few days !

Thnx alot!

Sjaroow

hello, I created this program to hold 5 cd's and some information relating to them. I keep getting an error that says:
cannot find symbol
symbol : class ButtonListener
location: class inventoryprogram.InventoryProgram
ActionListener btnListen = new ButtonListener(); // create listener

here is the part of code with the actionlistener in it

[CODE]
private JPanel createButtonPanel()
{ // begin method createButtonpanel method
ActionListener btnListen = new ButtonListener(); // create listener
// create button objects
JButton nextButton = new JButton("Display Cd"); // create and label button
nextButton.setActionCommand("Next"); // action command for click
nextButton.addActionListener(btnListen);
nextButton.addActionListener(this);

JPanel panel = new JPanel();

panel.add(nextButton); // add next button to panel
return panel; // return panel
} // end method createButtonPanel
[ICODE]

i have a simple frame that looks like this
http://i307.photobucket.com/albums/n...aker/help2.jpg

i have 3 pages (side.html, page1.html and page2.html) the above picture has side.html and page1.html loaded on default, what i want to do is whenever i click on the page 1 button, page1.html will load on the right side and when i click on page 2 button, page2.html will load

i cant figure out what the code for this is and googling for the solution isn't getting me anywhere

help please

how can i make a button that takes the user to the top of the page without the url#top being displayed in addy bar? i just dont like the way it looks

thanks peeps

On custom button images, how do you give them the effect that they're "pushed" when the user clicks them and "unpushed" when the user lets his finger off the mouse button? I'm guessing it's some type of rollover effect, but I'm not sure how it's done.

Im trying to configuere a form that
a. a radio buttons that allow the user to choose between quarters, nickels, dimes and pennies.
and show image when click on my radio button
im confused on how to get the image to display whenthey click on the radio button

I'm having trouble with a 3-state rollover with rollClick staying active for a series of buttons. Each button reveals it's own content within the same page.

Here's a working example of what I have.

The roll in and out works fine at first, but after the second click the images start getting jumbled together. Something to do with the lastClick code at the bottom I think.

HTML-side my button images get class="rollover" and a unique id.

Code:

window.onload = rolloverInit;
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
function rolloverInit(){
	var rollOvers = document.getElementsByClassName("rollover");
	for(var i=0; i<rollOvers.length; i++){
		setupRollover(rollOvers[i]);
		}
}
function setupRollover(thisImage){
	//UP
	thisImage.outImage = new Image();
	thisImage.outImage.src = "images/" + thisImage.id + "1.gif";
	thisImage.onerror = thisImage;
	thisImage.onmouseout = rollOut;
	//OVER
	thisImage.clickImage = new Image();
	thisImage.clickImage.src = "images/" + thisImage.id + "2.gif";
	thisImage.onerror = rollOut;
	thisImage.onmousedown = rollClick;
	//DOWN
	thisImage.overImage = new Image();
	thisImage.overImage.src = "images/" + thisImage.id+"2.gif";
	thisImage.onerror = rollOut;
	thisImage.onmouseover = rollOver;
	thisImage.onmouseup = rollOver;
}
function rollOver() {
	this.src = this.overImage.src;
}
function rollOut() {
	this.src = this.outImage.src;
}
function rollClick() {
	if(lastClick){
	lastClick.onmouseout = rollOut;
	lastClick.src = this.outImage.src;
	}	
this.src = this.clickImage.src;
this.onmouseout = rollClick;
lastClick = this;
}
var lastClick = null;

What I'd also like, since these buttons act as tabs, is for the first button to already be in the rollClick active state on page load (since that button's content is already displayed by default). Is this possible?

Thanks for any help you can provide!

hello,

Im trying to write a program when the user clicks on the button,
the textbox should display "how are you ".
This is what I tried :



<html>
<head>
<title>"Click"</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<p>
<input name="text1" type="text" id="text1" value="textbox 1" onFocus="this.style.background ='yellow'" onBlur="this.style.background='white'">
</p>
<p>
<input name="text2" type="text" id="text2" value="textbox 2" onFocus="this.style.background = 'yellow'" onBlur="this.style.background='white'">
</p>


<p>

<button onclick="textbox1.value="how are you">Click Me!</button>

</p>



</body>

</html>

To be clear my approach to coding is basically that of building some kind of Java Frakenstein's Monster... which also explains why everything I create invariably ends up in a windmill on fire...


This is what I have managed to put together so far:

Code:

<script type="text/javascript">
var homeDown = new Array()
homeDown[0] = "images/home001.png";
homeDown[1] = "images/home002.png";
homeDown[2] = "images/home003.png";
homeDown[3] = "images/home004.png";
homeDown[4] = "images/home005.png";
homeDown[5] = "images/home006.png";
homeDown[6] = "images/home007.png";
homeDown[7] = "images/home008.png";
homeDown[8] = "images/home009.png";
homeDown[9] = "images/home010.png";
homeDown[10] = "images/home011.png";
homeDown[11] = "images/home012.png";
homeDown[12] = "images/home013.png";
homeDown[13] = "images/home014.png";
homeDown[14] = "images/home015.png";

var homeOver = new Array()
homeOver[0] = "images/image001.png";
homeOver[1] = "images/image002.png";
homeOver[2] = "images/image003.png";
homeOver[3] = "images/image004.png";

var x=0;

function NormalImage()
{
document.getElementById("button1").src="images/home.png";
}


function MouseOver()
{
document.getElementById("button1").src=homeOver[x];
x++;
setTimeout("MouseOver()", 8);
}


function MouseDown()
{
document.getElementById("button1").src=homeDown[x];
x++;
setTimeout("MouseDown()", 8);
}
</script>

...and the HTML:

Code:

<a href="http://www.google.com">
	<img id="button1" src="images/home.png" onmousedown="MouseDown(button1)" onmouseover="MouseOver(button1)"
onmouseout="NormalImage(button1)"/>
</a>

I'm sure that's probably the wrong way of doing it but it vaguely works. What I ultimately want is a button that will play the long image sequence on click and the shorter sequence on mouse over.

However at the moment it appears that the states of the mouse being over and clicked are clashing so I need something to ignore mouseover images on click and another bit to reset the count on mouseover so it can play again.

If I remove the mouseover event the animation on mousedown plays well, though I suspect it might be necessary to preload the images when it's online.


Alternatively if anyone feels like writing a much easier bit of script that will do the same thing and slap me for being stupid that is acceptable too...

hello, this is my first attempt in javascript. im trying to make custom radio buttons here is the code i have:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	
	<head>
		
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		
		<title>Untitled Document</title>
		
		<style type="text/css">
		
			.hide {display:none;}
		
			.radio {width:16px;height:16px;}
		
		</style>
		
		<script type="text/javascript">
			
			// declare variables or different states
			var off = 'images/check-off.png';
			var on = 'images/check-on.png';
			var radioImage = document.createElement('img');
			
			function replaceRadios(){
				
				var radios = document.getElementsByName('radio1');
				
				radios.type = 'radio'
				
				for (r = 1; r < radios.length; r++) {
					
					// if radio is checked configure the img src to var on
					if (radios[r].type = 'radio' && radios[r].checked) {
						
						radioImage.src = on;	
						radioImage.className= 'radio on';
								
					} else {
							
						// otherwise configure the img src to var normal/off and give it a class of radio
						radioImage.src = off;
						radioImage.className= 'radio off';

					}
						
					// give the image an id of radio
					radioImage.className = 'radio';
					
					radioImage.onclick= radioStates;
							
					radios[r].parentNode.insertBefore(radioImage,radios[r]);
						
					// hide the radio button to show image
					radios[r].className = 'hide';
				
					}
					
				}
					
				function radioStates(r) {
				
					var radios = document.getElementsByName('radio1');
				
					if (radios.checked = true) {
				
						radioImage.setAttribute("class", "radio on");
						radioImage.src = on;
					
					} else if (radios.checked = false) {
					
						radioImage.setAttribute("class", "radio off");
						radioImage.src = off;
						
					} else {
					
						radioImage.setAttribute("class", "radio off");
						radioImage.src = off;
						
					}
					
    			}	
		
				setTimeout("replaceRadios()", 0);
		
		</script>
		
	</head>
	
	<body>
	
		<form name="radiotest">
	
			<input type="radio"  id="radio1" class="radio" name="radio1" />
	
			<input type="radio"  id="radio2" class="radio" name="radio1" />
	
			<input type="submit" id="submit" name="submit" />
	
		</form>
	
	</body>

</html>

If anyone could help me, I would greatly appreciate it.

Hi,

I have buttons like these:
PHP Code:
<button type="button" onclick="izdas()">I&#382;das</button> 
<button type="button" onclick="miestas()">Miestas</button> 
<button type="button" onclick="map()">&#381;emėlapis</button> 
<button type="button" onclick="infantry()">Kariuomen&#279;</button> 
<button type="button" onclick="biuld()">Statiniai</button> 


How I can add images on them?? Size would be 100x20px.

Also, I would e thankful if someone would help me position them in one vertical line.

Thanks in advance...

On my website I have a radio button as any other normal radio button.

<input type="radio" name="crime" value="4" id="4" class="submit">

is there any way to get rid of this radio button and click something for example
<tr>
<td>Blah blah</td>
<td>Blah Blah</td>
</tr>

is there any code i can put in the <tr> tag so if i click that section it will act as a radio button and when its selected change the background of the tr section.

I've been looking around and all the validation stuff I've seen doesn't work for what I have.

Here is what I am trying to do:
The user selects the Heads or Tails radio button for the first flip and then selects heads or tails radio button for the 2nd flip. The script then randomly flips two coins and compares it to what the user selected and if they are the same the user wins and if not then they lose.

So there would be 4 buttons total, two Heads and two Tails. The first set of Heads and Tails needs to be assigned to "guess1" and the 2nd set is "guess2".

So if the user clicks Tails for Flip1 and Heads for Flip2 then Tails is assigned to guess1 and Heads is assigned to guess2.

Right now the script just assumes the user is selecting heads for both flips.

Code:

<html> 
<head>
<title>Guess Two Coin Tosses</title>

<script>

function flip5(){
	
	//Input
	var guess1 = document.getElementById('guess1').value
	var guess2 = document.getElementById('guess2').value
	var flip1 = Math.floor(Math.random() * 2)
	var flip2 = Math.floor(Math.random() * 2)
	var outcomes

	if (flip1 == 0) flip1 = 'Heads';
		else flip1 = 'Tails';
	if (flip2 == 0) flip2 = 'Heads';
		else flip2 = 'Tails';

	//Processing
	if (flip1.toUpperCase() == guess1.toUpperCase()) {
	   if (flip2.toUpperCase() == guess2.toUpperCase()) 
	      outcomes = 'win win';
	   else 
	      outcomes = 'win lose';
	}
	else { // here we lost the first
	   if (flip2.toUpperCase() == guess2.toUpperCase())
	      outcomes = 'lose win';
	   else 
	      outcomes = 'lose lose';
	}

	//Output
	document.getElementById('flip1').value = flip1
	document.getElementById('flip2').value = flip2
	document.getElementById('outcomes').value = outcomes
}
	

</script>

</head>

<body>
<h3>Predict the Futu  Guess Two Coin Flips</h3>
Enter Heads for Heads, Tails for Tails! Case does not matter!
<p/>Your Guess for Flip-1: 
<input type=radio id="guess1" size="5" value="Heads" />Heads
<input type=radio id="guess1" size="5" value="Tails" />Tails
<p/>Your Guess for Flip-2: 
<input type=radio id="guess2" size="5" value="Heads" />Heads
<input type=radio id="guess2" size="5" value="Tails" />Tails
<p/>Flip-1: 
<input type="text" id="flip1"  size="5" value="???" />
<p/>Flip-2: 
<input type="text" id="flip2"  size="5" value="???" />

<p/><input type="button" value="Flip Two!" 
 onclick="flip5()" />
<p/>Outcomes: 
<input type="text" id="outcomes" size="20" value="" />
<hr>
</body>
</html>

Hello. I am a new user.
I have got a website, www.eastbourneinks.co.uk where the quantity buttons (+) & (-) do not work on most computers where I have had feedback. Is there any way of making them work on any/all computers. This is one of the pages:
http://eastbourneinks.co.uk/product/...nk-cartridges/
Many thanks.
Phil.

There has to be a way to do what I want to do but I'm fugged iif I know how. Here's the problem...

A page has three frames - top, left and disp. Top and left contain a number of buttons that display another page in disp. All the buttons need to behave as one set of radio buttons; when a button is clicked any other button returns to the non-clicked state. The really awkward bit is there's an image in top that changes depending on the currently clicked button and that image is behind the buttons.

Here it is in pseudocode of sorts.

Code:

On click button[n]
    Button[LastClicked].Image := Button[LastClicked].UnClickedImage;
    Button[n].Image := Button[n].ClickedImage;
    Top.Image := Button[n].TopImage;
end;

I hope that makes sense.

If some kind soul has any idea of how to do that I'd be very grateful.

Thanks.

Simon.