|
JavaScript - Image Highlighting On Clicking Radio Button
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? Similar TutorialsA dynamically-generated div pops up with absolute positioning, prompting user radio-button selection. div is selected and focused, and triggers onblur event to remove it from DOM. Clicking one of the radio buttons within the div should not remove the div from the DOM. problem: clicking radio button removes the div from the DOM even though the radio button is inside the div and even though clicking the radio button triggers onclick event to cancelBubble. I'm about to post this, and thinking that I should modify the blur event to remove the div only if the click event is outside of its coords... (...terribly sleep-deprived, lol) Since I've already prepped this post..., any thoughts / suggestions? Sample code: Code: var items = ['carrots', 'bananas', 'apples'], fragment = null, item = null;
if (items.length > 0) {
fragment = <div id="AddItemSelector" onblur="Cancel_AddNewItem();"><div name="title">Select Item:</div>';
do {
item = items.shift();
fragment += '<div><input name="radNewItem" type="radio" value="' + item + '" onclick="Click_NewItem(event)">' + item + '</div>';
} while (items.length > 0);
fragment += '<div><input type="button" value="Cancel" onclick="Cancel_AddNewItem();"><input type="button" value="Select" onclick="Select_AddNewItem();"></div></div>';
$(blahblah).after(fragment);
$('#AddItemSelector').select().focus();
}
items = null;
fragment = null;
item = null;
...
function Click_NewItem(Event) {
Event.cancelBubble = true;
}
function Cancel_AddNewItem() {
$('#AddItemSelector').remove();
}
Hi, I looked around to see javascript codes on websites but had no luck in finding what I wanted... or I just don't know how to work with it I want to switch/replace image with other images by clicking on radio buttons. i have the html, but how can I make this work??? can anyone help me out? Code: <body> <p><img name="main" src="black.jpg" width="100" height="100" alt=""></p> <p> <input type="radio" name="red" id="radio" value="radio" onClick="display red in main image"> </p> <p> <input type="radio" name="blue" id="radio2" value="radio" onClick="display blue in main image"> </p> <p> <input type="radio" name="green" id="radio3" value="radio" onClick="display green in main image"> </p> <p> <input type="radio" name="yellow" id="radio4" value="radio" onClick="display yellow in main image"> </p> <p> <input type="radio" name="black" id="radio5" value="radio" onClick="this would this play the main image 'black'.jpg"> </p> </body> thanks for any help in advance! 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 I need a script that will allow a user to select a vertical selection and Horizontal selection that displays a corresponding image. There are only 8 combinations (4 vertical choices and 2 horizontal choices) I just need to display the correct image and a description. There has to be only one of each selected and only display one image. I have tried several and have had no luck. Any ideas? Here is how the layout will look I have 4 rows in a table. Each row consist of 4 radio buttons. Each radio button per row has different values in it but has the same name (group) ex: <input type="radio" name="a" value="1"> <input type="radio" name="a" value="2"> <input type="radio" name="a" value="3"> <input type="radio" name="a" value="4"> <input type="radio" name="b" value="1"> <input type="radio" name="b" value="2"> <input type="radio" name="b" value="3"> <input type="radio" name="b" value="4"> and so on.. If I click radio button A with value 2, I want to output the total at the bottom as "2".. Also, if I click radio button B with value 3, I want to output the total of A and B as 5 and so on.. How can I automatically calculate the answer based on which radio button was click? update: I got my answer from this site: http://stackoverflow.com/questions/1...s-using-jquery Hey all, I'm trying to make it so that when a user clicks on a radio button, the image that is related to the radio button is displayed next to it (without reloading the page). At the moment all it shows is the image related to the currently saved option, which I'd like to keep on page load. Is this possible? If so, I'd appriciate any help. Here is my code for the radio buttons. Thanks. Code: <tr valign="top">
<td id="community-legal-services-logo-selection">
<p><label><?php _e('<strong class="table_tags">Display the following Community Legal Services logo:</strong>'); ?></p>
<p><label for="cls-mono">
<input class="" id="cls-mono" name="cls_logo" type="radio" value="cls_mono" <?php if($general_options['cls_logo'] === 'cls_mono'){ echo 'checked="checked"'; } ?> />
<?php _e('Mono'); ?></label>
</p>
<p><label for="cls-color">
<input class="" id="cls-color" name="cls_logo" type="radio" value="cls_color" <?php if($general_options['cls_logo'] === 'cls_color'){ echo 'checked="checked"'; } ?> />
<?php _e('Colour'); ?></label>
</p>
<p><label for="cls-none">
<input class="" id="cls-none" name="cls_logo" type="radio" value="cls_none" <?php if($general_options['cls_logo'] === 'cls_none'){ echo 'checked="checked"'; } ?> />
<?php _e('None'); ?></label>
</p>
<p>
<label><?php _e('<span class="table_tags">Link to the Community Legal Services website<span>'); ?></label>
</p>
<p>
<input class="large_input_box" id="cls-link" name="cls_link" type="text" value="<?php echo $general_options['cls_link']; ?>" /></label>
</p>
</td>
<?php if($general_options['cls_logo'] && $general_options['cls_logo'] !== 'cls_none'){ ?>
<td>
<img id="community-legal-services-logo-preview" class="image-preview" src="<?php echo $general_options['cls_logo_path']?>" />
</td>
<?php } ?>
</tr>
I need to use javascript in a way in which it will keep clicking a button. The source code for that button is below: Code: <script type="text/javascript">
function set_opacity(id, opacity) {
element = document.getElementById(id)
if (/MSIE/i.test(navigator.userAgent)) { element.style.filter='alpha(opacity='+opacity+')'; }
else { element.style.opacity = opacity/100; }
}
</script>
<div class="recruiter_enabled">
<table cellspacing="0" style="width: 100%">
<tr>
<td>
<p>
<script type="text/javascript">
//<![CDATA[
recruiter_clicks = 1
//]]>
</script><a href="/recruiter/recruit/3p5tjd4pdnbg0" id="recruit_link" onclick="return(submit_link_as_post_with_opacity(this, 'recruit_image'))"><img alt="" class="start_recruiting" id="recruit_image" src="/A.gif?1221518016" /></a><script type="text/javascript">
//<![CDATA[
link = document.getElementById('recruit_link');
link_href = link.href;
link.href = "#";
set_opacity('recruit_image', 50);
setTimeout("link = document.getElementById('recruit_link'); link.href = '" + link_href + "'; recruiter_clicks = 0; set_opacity('recruit_image', 100)", 2000);
//]]>
</script>
Therefore, I need javascript to keep clicking the button until it has clicked it 375 times. How would I be able to do this? For school I'm supposed to write a JS code which visits a website, and then clicks on a button on that website. I used the document.location method to visit the web page, but then if I use the document.forms[0].elements[0].click() function to click a button, nothing happens. The click() function has always worked for me when the JS code is embedded in the web page, but its not in this case because the code has to click a button on an external website. So how can I do this? I just need me Javscript program to visit a site, and then click a button on that site. Please help, thanks.
Hello. I have looked everywhere and I absolutely cannot find a method that works. I'm making an html website with flash. This is all I want...... A swf "this will be the default flash you see" underneath that flash I want 3 text links named..... Flash1 Flash2 Flash3 when you click flash1, 2, or 3 I want it to swap out the Current flash video with a different one. This way The user can watch all the flash vids on the same page, rather than a separate page for each flash. I found a way to swap them out using iframe, however that requires me to make a separate html page for each of my swf's themselves. I dont want to do that. Plz if someone could help me I would greatly appreciate it! I hope I am posting this in the correct section, I know swfobject involves javascripting so thats why I'm posting here. Not that your method HAS to involve swfobject to embed. If someone can give me code that I can just copy/paste into a blank page in dreamweaver (and I would adjust the embded swf file name and size etc obviously) and have it work that would be fantastic. thank you I know how to make something function onclick(), but how can I make it so it copies the area of a textarea element, does Javascript have the ability to do this? Thanks for any help in advance. Hello Having problems with the following...a client needs me to replicate this contact page: http://www.ravenrow.org/contact/ In particular he wants the subscribe/unsubscribe to appear only when one enters text into the text field (as it does here). I have recently changed from using tables to div tags but this was the first website where I started to experiment with divs. Unfortunately therefore it is a mixture of tables and divs. But here is my page: http://www.rowingpresents.com/contact.html Can someone tell me what I need in my code to have to subscribe/unsubscribe appear and disappear as it does at ravenrow.org. Many thanks S i used the code window.close(); it works well for Internet Explorer but it not worked in firefox I am creating a popup for an online store so that when prospective customers put something in their shopping cart and then try to leave the site, they are offered a coupon in a popup. I am using the following code (FYI, uses prototype.js) Code: Event.observe(document.body, 'click', function(event) {
if (Event.element(event).tagName == 'A' || Event.element(event).tagName == 'INPUT' || Event.element(event).tagName == 'IMG') {
staying_in_site = true;
}
});
window.onbeforeunload = popup;
function popup() {
if (staying_in_site) {
return;
}
if (popup_displayed) {
return;
}
popup_displayed = true;
//popup displayed here
}
The popup is not displayed when the user clicks on a link or submits a form (correct behavior) and it is displayed when the user types in a URL or tries to close the browser (also correct behavior). The problem is when the user clicks the back or forward buttons, the popup is displayed which is not the desired behavior. Anyone here have a solution for this? Hi, I have an admin page in which I enter information for a Math Education website. I have to pre-load 10 video fields just in case a lesson has 10 videos. This is an over simplification: -------------------------------------------- Subject: ____________ Chapter: ____________ Lesson: _____________ -------------------------------------------- Video 1 Video Title: __________ Video Desc:__________ -------------------------------------------- Video 2 Video Title: __________ Video Desc:__________ -------------------------------------------- . . . -------------------------------------------- Video 10 Video Title: __________ Video Desc:__________ -------------------------------------------- What I would like to do is load 1 single video field and then have a button that when it is clicked automatically creates another field. Any ideas? I'm sure this is possible but everything I know I've learned from searching the internet and reading a few simple books so my knowledge is fragmented. THANKS! I am a new to js and GM but I am trying to make a script that will click a button on a page where there are multiple instances of the button. The source I am looking at is below and I have narrowed down what I am looking at to the bold section. <dl> <dd class="left"><div id='recommendstatus_article4458331'> <dl class="recommend"> <dt class='recs'><a href="javascript://" onclick="RecSpy( 'article', '4458331', 'tippers' ); return false;">50</a> </dt> <dd><a href="javascript:void(0);" onclick="RecommendItem(1,'article','4458331','1','recommendstatus_article4458331' ); return false;" onmouseover="return overlib('Give thumbs up', WRAP);" onmouseout="return nd();"> <img class='icon' title='' alt='Thumb up' style='background-position: -304px -48px;' src='http://geekdo-images.com/images/pixel.gif' /></a></dd> <dt class='tippers'><a href="javascript://" style='color: #969600;' onclick="RecSpy( 'article', '4458331', 'tippers' ); return false;"></a></dt> <dd><a href="javascript:void(0);" onmouseover = "return overlib( 'GeekGold Tip', WRAP );" onmouseout = "nd();" onClick="GeekGoldTip(0,'article','4458331','recommendstatus_article4458331'); return false;"> <img class='icon' title='' alt='tip' style='background-position: -368px -48px;' src='http://geekdo-images.com/images/pixel.gif' /></a></dd> <dd> <a href="javascript:void(0);" onclick="RecommendItem(0,'article','4458331','','recommendstatus_article4458331', 'article4458331' ); return false;" onmouseover="return overlib('Hide this post', WRAP);" onmouseout="return nd();"> <img class='icon' title='' alt='Thumb up' style='background-position: -336px -48px;' src='http://geekdo-images.com/images/pixel.gif' /></a> </dd> <dt class='thumbsdown'> </dt> </dl> How do I create a script to find each instance of the button and click it? I am trying to write script that allows a user to select a new page using a select menu. But if a user changes mind and clicks Back button. i want a use to see again "Select a New Page" as a first option in the select menu. instead i see the page that was chosen before. in firefox, even when i click Refresh button, the select menu does not go back to its initial format. I tried to use the principle that each time window is loaded, the selected Index would be 0. it is not working. Could anyone give me a hint on how to fix this problem? my script is below. <html> <head> <title>Jump Menu 2</title> <script type="text/javascript"> function new_page() { var selectmenu=document.getElementById("states_form").states_select; selectmenu.onchange=function new_state() { var i=selectmenu.selectedIndex; var state=selectmenu.options[i].value; var new_page="http://www.50states.com/"+state+".htm"; location.href=new_page; window.onload=function select_reload() { i=0; } } } window.onload=new_page; </script> </head> <body> <form id="states_form"> <select name="states_select"> <option value="0"> -- Select a New State--</option> <option value="nebraska"> Nebraska</option> <option value="texas"> Texas</option> <option value="florida">Florida </option> <option value="oregon"> Oregon</option> <option value="wisconsi"> Wisconsin</option> </select> </form> </body> </html> Hi, this is my first post on the forum. I was just wondering whether there is a way to hide an element on another page after clicking on a button? Basically, I have a login page, and for testing purposes, I want it so when you click a button, it runs some javascript in a file called ajax.util.js, and I have a jQuery file attached to the HTML file as well (http://ajax.googleapis.com/ajax/libs.../jquery.min.js), and I am using Google App Engine, which im not sure whether thats relevant. I tried using the show and hide functions provided by the jQuery file, but no luck, i want to hide an element which is a link with ID admintools. I have also tried getting the element by ID and changing the display style to none and hidden but still no luck. Im not sure whether its only possible to hide elements in the login.html page. What I want it to do basically is click on the submit button in the login page, it will then run a javascript function which redirects you to index.html (which i am doing using window.location), and then hides an element in the index.html page (id=admintools). Any help would be great, Thanks in advance Hi, I'm working on a simple website in which I'm required to use two types of forms input on a webpage. I have decided to make a simple quiz which will be designed as follows; -------------------------------------------------------- Q1: The largest mammal on land is: (radio button choices) Q2: Please tick the two correct answers: (tick boxes, four available... only two correct) ---------------------------------------------------------- (BUTTON: Please click here for the answers) ... answers should appear once the above button is pressed... Answers: Q1: B Q2: A * C Is this possible in a simple way? Sounds quite straight-forward but I'm no expert so forgive me.. Ps: Is it possible to design a radio button which, depending on the choice, the related-text will appear underneath on the same page? So if they select 'A' then paragraph 'A' will show, if they select 'C' then paragraph 'C' will appear (with the rest hiding)... Thanks 4 your time! I want to make a script selecting electronics category in this site http://eu.redeem-it.net/boutique.php A friend told me to use getElementsByClass but I still cant do it. |
|||||||