JavaScript - Change Multiple Image Style

I have several checkboxes with labels, all laid out in a table. All of the checkboxes have a class of "hide" and through CSS I have them hidden. Then with javascript it's set up so that when a user clicks on the label for the checkbox the background of the TD that contains it changes colors to indicate that that item is selected.

Works great except for those browsers that have javascript disabled. Then the form is useless.

I'm thinking now it would be better to use javascript to apply the "hide" class to the checkboxes. That way if it's disabled then the checkboxes will still be visible and the form useable. I'm just not sure how to go about doing that (not much of a javascript ninja).

Can anyone advise me on how to do that? I'd really appreciate the help! Thanks!

I have three divs, Step 1, Step 2, Step 3.
I'm trying to get it so when a person clicks the Facebook Like, the style changes to none and Step 2 is revealed and when the Facebook Share is clicked, the Step 3 is revealed. But when I like the first thing, it doesn't change to Step 2.

Any thoughts?


Code:

       <div id="Step1"><table border="0" width="630" height="174" background="images/step1-2.jpg"><tr><td valign="top" align="left" style="padding-left: 215px; padding-top: 80px"><br />
       <iframe src="http://www.facebook.com/plugins/like.php?href=LINKHERE&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35" scrolling="no" action="like" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
       <br />
       
       </tr></td></table></div><div id="Step2" ><table border="0" style="display: none" width="630" height="174" background="images/step2-2.jpg"><tr><td valign="top" align="left" style="padding-left: 210px; padding-top: 82px"><br />
           <a name="fb_share" type="button" share_url="LINKHERE"></a>
        <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
        type="text/javascript">
        </script>
        <br />
        
        </tr></td></table></div><div id="Step3" style="display: none"><table border="0" width="630" height="174" background="images/step3-2.jpg"><tr><td valign="top" align="left" style="padding-left: 210px; padding-top: 72px"><br />
        <center><a href="LINKHERE">Download Here</a>
        </center></tr></td></table></div><br />
       
<script type="text/javascript">
window.fbAsyncInit = function() {
   FB.init({appId: 'ID HERE', status: true, cookie: true, xfbml: true});
   FB.Event.subscribe('edge.create', function() {
      document.getElementById('Step1').style.display = 'none';
      document.getElementById('Step2').style.display = 'block';
      document.getElementById('Step3').style.display = 'none';
setTimeout('document.getElementById(\'Step1\').style.display = \'none\';document.getElementById(\'Step2\').style.display = \'none\';document.getElementById(\'Step3\').style.display = \'block\';', 7000);
   });
};

(function() {
   var e = document.createElement("script");
   e.type = 'text/javascript';
   e.src = document.location.protocol + "//connect.facebook.net/en_US/all.js"; 
   e.async = true;
   document.getElementById("fb-root").appendChild(e); 
}());
      
      </script>

Hi all,
I'm working on a script which is actually a very simple tab system.

Code:

<script>
window.addEvent('domready', function() {
var tabs = $$('div[id^="tab"]');
tabs.fade('hide');

$$('#buttons li a').each(function(element,index){
    element.addEvent('click',function(){
        tabs.fade(0);
        tabs[index].fade(1);
    });
});
});
</script> 

<ul id="buttons">
     <li><a href="#">button 1</a></li>
     <li><a href="#">button 2</a></li>
     <li><a href="#">button 3</a></li>
     <li><a href="#">button 4</a></li>
</ul>

<div id="tab1">content for button 1</div>
<div id="tab2">content for button 2</div>
<div id="tab3">content for button 3</div>
<div id="tab4">content for button 4</div>

I'm trying to change the style of the selected button. I mean that the button which is selected each time, should be highlighted (bold text). How can I add this function in the existing code? Can you help me please?

I'm using the 1.2.0 version of mootools for this.

Dear All,

The things needs to be work like if I click one of the NA radio button all other radio buttons and comments ,text box, span text needs to be disabled. But the code used below is disabling all the fields. Also if first question NA radio button is clicked first question all other fields should be disabled and shown with red color. If I click on the 2nd question first question fields needs to be enabled and only 2nd question needs to be enabled. The questions will be dynamically loaded based on some other conditions. I am stuck with something on the below. Could you please help to achieve the below concept?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>

<script language="javascript">
function enable_text(status)
{
status=status;
var form = document.forms[0];
var rads = form.elements.radio1;
for (var i=0; i < rads.length; i++)
{
var color = rads[i].checked? "red" : "";
document.getElementById("check"+i).style.backgroundColor = color;
document.getElementById("check"+i).disabled = status;
}
}
</script>
<body onload=enable_text(false);>
<div>
<form name="form1" method="post" action="">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td class="PortletText1" nowrap><strong>ALL Data</strong></td>
<td class="PortletText1" nowrap><strong>YES</strong></td>
<td class="PortletText1" nowrap><strong>NO</strong></td>
<td class="PortletText1" nowrap><strong>N/A</strong></td>
<td class="PortletText1" nowrap><strong>Comments</strong></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td class="PortletText1" nowrap>Data 1:</td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check0"/></td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check1" /></td>
<td class="PortletText1" nowrap>
<input type="radio" name="radio1" id="check2" onClick="enable_text(this.checked)" /></td>
<td class="PortletText1" nowrap><input type="text" id="other_text0" name="other_text"/></td>
</tr>
<tr>
<td class="PortletText1" nowrap>Data 2:</td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check3" /></td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check4" /></td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check5" onClick="enable_text(this.checked)" /></td>
<td class="PortletText1" nowrap><input type="text" id="other_text1" name="other_text"/></td>
</tr>
<tr>
<td class="PortletText1" nowrap>Data 3:</td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check6" /></td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check7" /></td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check8" onClick="enable_text(this.checked)" /></td>
<td class="PortletText1" nowrap><input type="text" id="other_text2" name="other_text"/></td>
</tr>
<tr>
</div>
</form>
</body>
</html>
</body>
</html>



thanks in advance.

Regards
sona

http://www.***.com/5.html

i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple....

thanks for any help

ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done?

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?

hello,

I have a problem changing the value of multiple text boxes, My page contain one text box named "price" and i need to set the value of this box to all other text boxes in the page which they attribute is <input type="text" value="" name="product[xxxx]" id="product"/>
xxxx = random number

the page may contain only one text box id=product or more

i have tried the following code but it only works with multiple text boxes and doesn't work if the page have one text box


Code:

              var price = document.getElementById('price').value;
              var allElements = document.form1.product;
              var len=allElements.length;
              if(allElements.length){
              for (i = 0; i < len; i++){
              allElements[i].value = price;
               }

I'm not a javascript expert so i don't know if this code is the right way to accomplish this.

Thank you very much for your help

Hi there, i've run into a bit of a problem, i've managed to get javascript to change an image when choosing an option from a dropdown menu, but when i try to get it to change multiple images it only ever changes one image...

Code:

   <script type="text/javascript"> 
function changeWalls(what, whatimg) 
{ 
if(what != "none")
{
document.images[whatimg].src = what;
}
} 
      </script>
      <select name="Walls" onchange="changeWalls(this.value,'walls')">
        <option value="images/white.gif" selected="selected">Please Select a Colour</option>
        <option value="images/WALLCC.png">Classic Cream</option>
        <option value="images/WALLSG.png">Shale Grey</option>
        <option value="images/WALLDO.png">Deep Ocean</option>
        <option value="images/WALLSM.png">Surfmist</option>
      </select>

then the images i want are multiples so i want to change 2 of these
Code:

<img src="images/front_0002_front-wall-colour.png" alt="" name="walls" border="0" id="walls2" />

Hi there! I need help!

Basically, I need to create a sentence and on one of the words the person accessing the site can click the word and it will change to another word and then again to a third word and so on for 5 words then it will, on click, return to the 1st word again. like a circle of various words.

I've managed to get it to work with 2 words back and forth - but I need it to have multiple states. I need the JS and how to impliment it in the HTML. JS isnt my strong point just yet

Please help me! Thanks so so much!

follow me on twitter - @robyn_90

I am having trouble implementing this script.

I am not a coder so please give exact, idiot proof advise. :-)

Thank You.

<script>
(function() {
var cx = 'user_id:field_id1';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);

// This basically takes the value of the radio button (requires jQuery)
$("input:radio[name='GCSField']").change(function() {
cx = $(this).val();
});

})();
</script>
<label for="user1">
<input name=GCSField id="user1" type="radio" value="user_id:field_id1" checked >User Field 1 </label>
<label for="user2">
<input name=GCSField id="user2" type="radio" value="user_id:field_id2">User Field 2 </label>

<gcse:search></gcse:search>

Here is my html.

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
<!--[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>TEST</title> <meta name="robots" content="noindex, nofollow"> <meta name="viewport" content=" width=device-width, initial-scale=1"><meta name="HandheldFriendly" content="true"><meta name="MobileOptimized" content="320">
<style>body{width:100%;max-width:25em;margin-left:auto;margin-right:auto;font-family:Verdana,'Palatino Linotype',Palatino,'Book Antiqua',Arial,Helvetica,sans-serif;text-align:justify;font-size:105%;background-color:#000;background:#000;}p{margin-bottom:1%;}strong{font-size:115%;font-weight:bold;}a{line-height:200%;text-decoration:underline;color:#0007C6;}article{margin: 0 0 1% 0; color:#000;background:#FEE800;background-color:#FEE800; text-align: center;}</style>
</head><body>
<article>
<div><script>
(function() {
var cx = 'user_id:field_id1';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);

// This basically takes the value of the radio button (requires jQuery)
$("input:radio[name='GCSField']").change(function() {
cx = $(this).val();
});

})();
</script>
<label for="user1">
<input name=GCSField id="user1" type="radio" value="011565775292567206849:xkh-s7ljiug" checked >User Field 1 </label>
<label for="user2">
<input name=GCSField id="user2" type="radio" value="partner-pub-4173665486685435:n2tml3-z5vf">User Field 2 </label>
<gcse:search></gcse:search></div>
<div><gcse:searchresults></gcse:searchresults></div>
</article>
</body></html>

Here is the above page off a server TEST

Thanks again.

Here is my code for two tab images.

Code:

    <a href="#page-2"><img src="/images/but02.png" style="margin-top:8px; float:left;"></a>
    <a href="#page-1"><img src="/images/but01.png" style="margin-top:8px; float:left;"></a>

I need to have it so when tab '#page-2' is clicked it will change the image to '/images/but03.png' and when tab '#page-1' is clicked it will change the image to '/images/but04.png' ?

Its basically to show which tab is active, one image is lighter then the other.


Can anyone help ?

Can anyone link me to code that will change an image everyweek to an image that I define? I have 52 different images, one for every week.

Hi!

Sorry for asking such noobish questions, I tried to search but couldnt find anything addressing my problem. It's probably pretty simple though.

I have an image on a website. I want the image to change, after the user has clicked on it five times. In other words, on the first 4 clicks, nothing should happen. But the fifth click should change the source of the image.

Here is my feeble attempt:

Code:

function image_changer(){
var i=0;
for (i=0;i<=5;i++)
{
document.getElementById('changingimage001').src = 'images/smile6.jpg';
}

}

HTML:

Code:

<img id="changingimage001" src="images/base.jpg" onclick="image_changer();" alt="a changing image" />'

I quess my main confusion is this:

How do I make a new iteration in my for loop happen only when the mouse is clicked (instead of all the iterations running trough as fast as possible)?

Hi there,

I have found some script to auto change an image on my website, but i would like to do this in 2 other places using completely new pictures. for ease i have set up 3 cells in a table and would like them to appear in each cell. Can any body help altering my code to allow this. The code i have so far is

Code:

<html lang="en"> 
<head> 

<script type="text/javascript"> 
var c=0 
var s 
function photoGallery() 
{ 
if (c%4==0){ 

document.getElementById('photo-gallery').src = "boots.jpg"; 
} 
if (c%4==1){ 

document.getElementById('photo-gallery').src = "adidas.jpg"; 
} 
if (c%4==2){ 

document.getElementById('photo-gallery').src = "play.jpg"; 
} 
if (c%4==3){ 
document.getElementById('photo-gallery').src = "argos.jpg"; 
} 

c=c+1 
s=setTimeout("photoGallery()",1000) 
} 
</script>

</head> 
<body onLoad="photoGallery()">
<table border="1">
<tr>
<td><img src="amazon.jpg" id="photo-gallery" width="420" height="260"></td>
<td>another image loop here</td>
<td>and another image loop here</td>
</tr>
</table>

</body> 
</html>

Thank you in advance