JavaScript - Change Image Src Value Onclick Not Working Ff

I'm very inexperienced with Javascript, but want to use the onclick event to change an image to text. I'm working on a directory type website and want users to have to click on the image of a telephone in order to reveal the telephone number they are looking for. how do i do this?
Also is there a way of tracking how many clicks each person gets?
I'd really appreciate any help you guys can give me on this

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.

Hi,

I have a row of buttons that are made by innerhtml using this code:


Code:

 sidebar_html += '<div id="button"><input type="button" onclick="toggleRun('+poly_num+')" value="Start Bus" id="runBtn'+poly_num+'" style="width:120px; height:24px; text-align:center"></div><br />';

to fire this function:

Code:

function toggleRun(poly_num){
 var btn = document.getElementById('runBtn'+poly_num);
  if (document.getElementById('runBtn'+poly_num).onclick) {	
  if (run){
		run=false;
		document.getElementById('runBtn'+poly_num).value="Reload Page";
		startAnimation(poly_num);
		} else {
		run=true;
		document.getElementById('runBtn'+poly_num).value="Reload Page";
		window.location.reload();
		} 
}
}

the function can only run once, so the idea is that the button either runs it the first time or reloads the page.

at the moment, the way it's working is that the button that's clicked changes its value to "Reload Page" but the others keep their original value, even though it reloads if you click them.

So I'd like a way to change the value of the rest of the buttons when one is clicked. Is that possible?

Here's the page if I didn't explain myself well enough.

Hi Guys,

How could I change

Code:

<a onclick="processForm();">Continue</a>

to

Code:

<input type="checkbox" name="agree" value="1" onclick="if(this.checked).processForm();" /><label for="agree">Continue</label>

or to
Code:

<input type="checkbox" name="agree" value="1" checked="checked" onchange="if(this.checked).processForm();" /><label for="agree">Continue</label>

Code:

<script type="text/javascript">
function processForm() { 
        $.ajax( {
            type: 'POST',
            url: '<?php echo $submit); ?>',
            data: '<?php $data); ?>',
			success: function(data) {
                $('#message').html(data);
            }
        } );
}
</script>

when i Using <a onclick="processForm();">Continue</a> then work fine, but i needed the checkbox.

Anyone could help me?

I have managed to get my program running perfectly for outputting alert boxes, however instead of alert boxes I would like my image to change with an IF statement.

My main image is a pic with text saying Please enter Temperature. if the user enters a temperature it will display an alert saying HOT, MODERATE or COLD. I have made other images that basically say the same thing and I would like the appropriate image to replace the original image depending on the IF statement

I have commented out my alertboxes (which work) and replaced new code above that I can't seem to get working. On lines 21, 27 and 33.

Any help would be greatly appreciated.

Code:

<html>
	<head>
	<title>TempReader™</title>
	<script type="text/javascript">
	//This is where we decare our function to validate the HTML form
	function validateform()
	{
		// Setting our variable name and it's value by calling it from the HTML form textbox
		var temp = document.forms["inputform"]["temperature"].value
		
		// If the input is not a number or an empty field, alert the user and stop the program
		if (isNaN(temp) || temp == "")
			{
			alert("Please enter a number");
			return false;
			}
			
		//If the input is valid we compare the input value and display the appropriate output	
		if (temp > 35)
			{
			document.getElementById("temp_img").src ="temp_hot.png";
			//alert("Wow, it's really hot!");
			}
						
		else if (temp <= 35 && parseFloat(temp) >= 18)
			{
			document.getElementById("temp_img").src ="temp_mid.png";
			//alert("It's a comfortable temperature right now");
			}
										
		else if (temp < 18)
			{
			document.getElementById("temp_img").src ="temp_cold.png";
			//alert("Brrr, it's a little bit cold for my liking");
			}	
	}
	</script>
	</head>
	<body> 
	<div style="margin-top:0px; text-align:center">
      <img id="temp_img" src="what_temp.png" alt="Temperature" />
    </div>
	<form name="inputform" method="post" action="">
		<table>
		<tr><td><input type="text" name="temperature" value="Enter Temperature"></td></tr>
		<!-- Below is submit button that when pressed validates the form -->
		<tr><td><input type="submit" value="Submit" onclick = validateform()></td></tr>
		</table>
	</form>	
	</body>
</html>

BTW, My images are stored in the same directory as the HTML file and the img names are correct

Hi im trying to do this:

I have an app multilanguage english & spanish at the start of page it appears english flag but webpage on spanish like this pictu



and when i click english flag then it turns english webpage and flag change to spanish like this image:



im trying to make a loop cause when i click again spanish flag it turns to english flag but when i click again english flag it doesnt appears anything i dont get any javascript error here is my code of flags:

Code:

<div id="lang_panel">
  <div id="ZA_lang" onclick="setLang('PA'); toggle2();"></div>
  <div id="PA_lang" onclick="setLang('ZA'); toggle();"></div>
 </div>

the Code:

setLang('PA')

is for set webpage language.

and Code:

toggle(); & toggle2():

i made if for changes the flag

here is full toogle & toggle2 functions:

Code:

function toggle() {
 var ele = document.getElementById("PA_lang");
 if(ele.style.display == "block") {
      ele.style.display = "block";
   $("PA_lang").style.background = "url('./img/ui/l_ZA_on.png') no-repeat";
   }
 else {
  ele.style.display = "block";
 }
} 
function toggle2() {
 var ele = document.getElementById("PA_lang");
 if(ele.style.display == "block") {
      ele.style.display = "none";
   $("ZA_lang").style.background = "url('./img/ui/l_ZA_on.png') no-repeat";
   }
 else {
  ele.style.display = "block";
 }
}

Code:

l_ZA_on.png

is USA flag

Code:

l_PA_on.png

is Panama flag

How do I change the Button's value onClick?

I want it to initially be "Read More" and then change to "Show Less"

Code:

<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>
<div>Why are we going to stop making investments in companies like this?</div>
<span id="obamaenergyapril212011" style="display:none;">
END 12:50 P.M. PDT</span>
<input type="button" name="obama" onclick="return toggleMe('obamaenergyapril212011')" value="Read/Hide More" >

hi all,

I am using ajaxcontent javascript to load content into certain parts of the website and all my links work that way.. the problem with that is that I can't use classical approach for building menus.. like when you assign "current " class to your link and then it changes color or whatever when you follow link to another html or whichever website. So I have menu like this ..

Code:

<li class="current"><a href="index.htm"><b>One</b></a></li>
<li><a href="javascript:ajaxpage('2.php', 'right');"><b>Two</b></a></li>
<li><a href="javascript:ajaxpage('3.php', 'right');"><b>Three</b></a></li>
<li><a href="javascript:ajaxpage('4.php', 'right');"><b>Four</b></a></li>
<li><a href="javascript:ajaxpage('5.php', 'right');"><b>Five</b></a></li>

I'm sorry for my English is so bad.. but I will try to explain what I'd like to achieve.. I'd like to put in some kind of onclick script which will change class of that <li> to current but at the same time I want to change <li class="current"> to <li class=""> or <li class="whatever">... so here I go again..

Code:

<li class="current"><a href="index.htm"><b>One</b></a></li>
<li><a href="javascript:ajaxpage('2.php', 'right');"><b>Two</b></a></li>
<li><a href="javascript:ajaxpage('3.php', 'right');"><b>Three</b></a></li>
<li><a href="javascript:ajaxpage('4.php', 'right');"><b>Four</b></a></li>
<li><a href="javascript:ajaxpage('5.php', 'right');" onclick="this.className='current'"><b>Five</b></a></li>

Now this changes the <li> class to current and I only want to have 1 current. In this case link "Five" should have current class others should have no class or class="whatever" its same

Thank you for any answers in advance

I have the concept down to change the CSS for a label when I click it.

<label class="text" onClick="this.className='big_text" style="margin:5px;">Text</label>

I was wondering, the goal is that it works, it changes from small text to big text when selected, but how can I change to back to small text from big text and vice versa using java for only the CSS?

Much appreciated!
C8

I would like to have a text link do 2 things:
1. Change #box1.style1 to class="style2" (from style1)
2. Change #box2.style2 to class="style1" (from style2)
So the text link would not change its own style, but change the class of 2 different divs

Your help on this is very much appreciated. Thank you

Hi, is it possible to change the class of an element onClick with a fade?

This is the code I have so far which works great for changing the class but I have no idea how to include a fade in this. I am changing the class in order to change the background-image of a div.

Code:

<a href="#none" onclick="document.getElementById('tool').className ='tool1'">

Many thanks, M

Hello again
today I am trying to figure out how to change or maybe even assign the arguments passed in a link.

Code:

function link(x)
{
alert("The word you are thinking is" +x);
}

<a href="#" onclick="link('cow')"> LINK</a>

As you can see from the code above clicking on the LINK would produce an alert box saying "The word you are thinking is cow" I need to find a way to use JS to change the passed argument 'cow' to something else like 'cat'

I need this to be a funtion and not an input box. I will be running this through a loop and the passed parameter will be changing so if I can just figure out how to adjust the argument from a function then I think I can figure out the next stem of my project

Thanks

Hello, So I have two pieces of Javascript attached to my open/close text boxes.

One for the visibility function:
Code:

<script type="text/javascript">
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
</script>

The other for changinging the image to reflect the text box's status (open of closed):
Code:

<script type="text/javascript">
var ImgPath='../images/portfolio/';
function changeImage (id) {
var tab = document.getElementById(id);
if (tab.src.match('open.png')) {
tab.src = ImgPath + 'close.png';
}
else {
tab.src = ImgPath + 'open.png';
}
}
</script>

The problem only shows further down the page, when I click to open a box it automatically goes back to the top of the page instead of staying at the user's current page position

I would like it to stop changing the page position onclick. Any help would be much appreciated!

I just cannot get the html to load for each linked button to the Iframe. If I remove the "onclick" command for the backround images, the links load to the Iframe. If I leave the "onclick" command in there only the background changes.

So, I would assume there is a conflicting issue with loading the "a href" and the "onclick" commands together. Maybe I need to know how to do multiple "onclick" commands...suggestions?

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!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>Welcome to Whitetail Fantasies</title>
	<link href="layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">

		body {
			font-family:Tahoma, Geneva, sans-serif;
			background-color: #000;
			}
			
		#background {
			position:absolute;
			float:left;
			width:1024px;
			height:768px;
			background-image:url(wf_layout/wf_bkgnd-1.jpg);
			z-index:0;
}
		
	</style>
	<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
    </script>
</head>



<body onload="MM_preloadImages('wf_layout/buttons/home_inv.png','wf_layout/buttons/aboutus_inv.png','wf_layout/buttons/trophies_inv.png','wf_layout/buttons/trailcams_inv.png','wf_layout/buttons/calendar_inv.png','wf_layout/buttons/contact_inv.png')">

<div id="background"></div>

<div id="outer">
	
<div id="header"></div>
    	
		<div id="wrapper">
    
  			<div id="left_side"><br /><br /><br /><br /><br /><br /><br />
            	<table width="140" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="wf_home.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-1.jpg)'; return false;" onmouseover="MM_swapImage('btn_home','','url(wf_layout/buttons/home_inv.png)',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/home.png" alt="Home button" name="btn_home" width="140" height="42" border="0" id="btn_home" /></a></td>
  </tr>
  <tr>
    <td><a href="wf_aboutus.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-2.jpg)'; return false;" onmouseover="MM_swapImage('btn_aboutut','','wf_layout/buttons/aboutus_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/aboutus.png" alt="About Us Button" name="btn_aboutut" width="140" height="42" border="0" id="btn_aboutut" /></a></td>
  </tr>
  <tr>
    <td><a href="wf_trophies.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-3.jpg)'; return false;" onmouseover="MM_swapImage('btn_trophies','','wf_layout/buttons/trophies_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/trophies.png" alt="Trophies button" name="btn_trophies" width="140" height="42" border="0" id="btn_trophies" /></a></td>
  </tr>
  <tr>
    <td><a href="wf_trailcams.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-4.jpg)'; return false;" onmouseover="MM_swapImage('btn_trailcams','','wf_layout/buttons/trailcams_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/trailcams.png" alt="Trial Cams Button" name="btn_trailcams" width="140" height="42" border="0" id="btn_trailcams" /></a></td>
  </tr>
  <tr>
    <td><a href="wf_prices.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-5.jpg)'; return false;" onmouseover="MM_swapImage('btn_prices','','wf_layout/buttons/calendar_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/calendar.png" alt="Prices button" name="btn_prices" width="140" height="42" border="0" id="btn_prices"  /></a></td>
  </tr>
  <tr>
    <td height="41" align="center" valign="middle"><a href="wf_contact.html" target="_IFrame" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_contact','','wf_layout/buttons/contact_inv.png',1)" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-6.jpg)'; return false;"><img src="wf_layout/buttons/contact.png" alt="contact button" name="btn_contact" width="137" height="41" border="0" id="btn_contact" /></a></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td align="center"><img src="mdclogo.png" alt="mdc_logo" width="120" height="106" border="0" usemap="#Map" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
            </div>
            
        	<div id="content_area">
            <br /><br /><br />
        	  <iframe name="_IFrame" style="width:800px; height:500px;" src="wf_home.html" frameborder="0" allowtransparency="true"></iframe>
        	</div>
        	iu
        
		</div>
        
</div>
<div id="footer"></div>



<map name="Map" id="Map">
  <area shape="poly" coords="0,100" href="#" />
  <area shape="poly" coords="58,1,119,97,1,99" href="http://mdc.mo.gov/hunt/" target="_blank" />
</map>
</body>


</html>