Toggling/Switching Between Multiple Images With OnClick

Apr 8, 2009

I have created a long list of items. For each item, there is 1 image. In my case, I use the same image each time.

I would like to use JS to allow users to check an item by clicking on it. Please note, I am not using radio buttons or any other forms.

This is my JS function:

It is triggered using this:

It works for each image. It switches to 2.png when a user clicks on each instance of that image. But how do you make sure it switches back to 1.png on the next click, and so on, effectively creating a switch for multiple instances of the same image?

View 2 Replies


ADVERTISEMENT

Switching Between Two CSS Classes Via Onclick?

Dec 11, 2009

I have a navigation pane with 4 links. Two of these links show collapsable submenus. When one clicks a link, I want the CSS class of that link to change. For the two "real" links, I've just changed the class on the page itself. For the two collapsible menus, I'm trying to employ javascript.Ultimately for these two links, I want the class to change when clicked, and change back when clicked again.Here's the code for the page:

<div id="navigation">
<ul>
<li><h3><a href="javascript:;" onclick="changeclass(this);" onmousedown="toggleSlide('slidemenu');" class="colmain">COLLAPSIBLE MENU[code]....

1. Seeing as I've been working with javascript for a grand total of six days so far, could you explain the best way to make my code work? What's the significance of colstatus=obj?

2. The javascript works if I leave out the else statement. It will change the class after being clicked, but, of course, doesn't change it back. However, if I click the other collapsible menu, it will change as expected, but the first will revert back to the original class. Why is this happening?

3. Seeing as the code is adopted, I have no idea what /*<![CDATA[*/ and /*]]>*/ mean. Would you explain?

View 2 Replies View Related

Toggling DIV Visibility (multiple DIVs)?

Mar 5, 2008

I have a page with a number of divs on it. The number of actual divs is variable and is database dependent. Each div has a sequential id, e.g.:

<div id = "id0">
<div>
<div id = "id1">

[code]....

Initially the first div's visibility is set to "display: block" and all the rest to "display:none". What I would like to be able to do is present the user with a series of links which when clicked would result in just one of the divs being displayed and the rest all hidden.

View 14 Replies View Related

Switching Image Back And Forth Using OnClick?

Mar 27, 2011

I want to create the form button similar to this: [url]

I use an OnClick to switch the image but the if else statement just doent let me switch back to the original image, i not sure where i have gone wrong...

Below are the html and js thumnails:
[url]
[url]

View 1 Replies View Related

Toggling Function On Multiple Table Rows?

Oct 1, 2009

I am using a Toggle function right now that does a getElementByID check. I have a table dynamically being built by ColdFusion that shows a bunch of time entries for a support ticket. Each time entry has 3 rows that I only want to show if the first row is clicked. Right now it only displays the first of the three.

Code:
<script language="JavaScript">
function toggle(divid) {

[code]....

View 2 Replies View Related

JQuery :: Toggling Visibility Of Elements With Multiple Classes?

Sep 12, 2011

I've got a list of links and divs. When I click on a link I want to keep showing all the divs which have a class that matches the clicked link id and hide all the divs which don't. At the same time I want to add another class (.item) to the matching divs and remove it from any div which is hidden.

When I run the code below, clicking any of the links hides all the divs apart from the one which doesn't have a matching colour class.

$('a.filterclick').click(function(){
var id = $(this).attr('id');
if($('.filterclass').hasClass(id)) {$('.filterclass').removeClass('filteredout').addClass('item');
}else

[Code]....

View 2 Replies View Related

Switch Between Two Images - Session Image Switching

Sep 27, 2011

I have a site where i switch between two images using some JavaScript. What I need is to be able to set a session variable or something so that if someone selects shading on or off it sticks to that for the rest of the session.

Any idea or even a point in the right direction. Do i need cookies or is there a simple way to do this

[url]

View 13 Replies View Related

Switching Stylesheets Across Multiple Pages?

Jul 13, 2011

I'm trying to allow the user to change the stylesheet of my website. I can change the stylesheet on a page by page basis (eg. from red style to blue style) but once the user navigates to a different page the stylesheet resets back to the original setting.

For example, when the user visits the site first its set to the red style, they can change it to blue but when they navigate to another page the style goes back to red again where as I want the style to stick across pages. Does anybody know how I can sort this out?

[Code]...

View 5 Replies View Related

Switching Multiple SIFR Swf Files

Jul 25, 2009

I've been trying to create font tester for a small type foundry using sIFR. I've managed to get the basic input field working which then displays the users entered type using sIFR, but I've now hit a block trying to add a dropdown menu so the users can select a font they wish to test.

[Code]...

View 2 Replies View Related

JQuery :: Add Slide Effect When Switching Images With External Trigger?

Apr 11, 2011

I am trying to achieve a relatively simple effect but having a hard time. I have the code to swap the images displayed in a particular div with an external trigger but want to add a slide effect to the new images that loads upon activating the trigger. The code I have so far is:

<script type="text/javascript">
function changeBelt(beltName,BeltHolder)
{
var obj = document.getElementById(BeltHolder);

[Code].....

View 4 Replies View Related

Multiple Random Images - Size And Name These Images Based On Which Image Randomly Pulls?

Jan 22, 2011

What I'm looking to do is have a folder of images that I have show up on my website.I'm also looking to pull from this folder up to 6 or 7 times on the same page w/ randomized pictures that do not repeat.Finally, I'm looking to be able to size and name these images based on which image randomly pulls. b/c it's not grabbing the images.

images = new Array()

images[images.length] = 'images/example.jpg'
images[images.length] = 'images/example.jpg'[code].....

View 7 Replies View Related

Refresh Multiple Images - Every Time Page Gets Refreshed The Images Need To Change

Oct 5, 2009

I need to refresh multiple images on my site. So every time the page gets refreshed the images need to change. It worked fine with the script below, but this is only related to 1 image

I tried to copy the script and change the "ID's" but this does not do the job.

What should I change/add to the script below?

In head:

In body:

View 7 Replies View Related

Toggle Multiple Images - Number Of Images Placed On A Map ?

Sep 7, 2011

I have a number of images placed on a map (the images are dots indicating a location)

When clicked, that displays different textual information somewhere on the page. View here and click the dots on the map for what I am trying to explain: [url]

What I want to do now is to toggle these dots so that when clicked, the dot turns white. This I could do with some code I found on the net. However, I need it to toggle all images. In that if one image has been clicked and turned white, and then the user clicks a different black ot, then that black dot should turn white, and the white dot should turn back clack.

View 8 Replies View Related

OnClick Event For Images

Dec 26, 2006

I am trying to set the onclick event for images through a function, but the
event is triggered as soon the page loads, then will not work when the image
is clicked. Can anyone suggest what is wrong?
It is happening in both IE6 and Firefox
---------------------------------------------------------------------------
window.onload = fnNewWindowLinks;

function fnNewWindowLinks() {
for (var intLinks=0; intLinks<document.links.length; intLinks++) {
if (document.links[intLinks].className == "picture") {
document.links[intLinks].onClick = alert("Clicked");
}
}
}
---------------------------------------------------------------------------

View 5 Replies View Related

Assaisning Onclick For Images?

Feb 13, 2010

I am currently building a memory game for an assignment. I guess you can figure out what it's supposed to do. Anyway i am having problems assigning onclick events for my images, as the way i've learned b4 doesn't work. The issue is this code snippet, everything else works or is in a working state at least;

[Code]...

View 1 Replies View Related

Onclick Swaps 2 Images?

Apr 22, 2011

I have been spending all morning trying different solutions. I'm trying to change two images ('bigpic' and 'desc') when someone clicks on a respective thumbnail. I have the swap working for 'bigpic' but cannot add the swap for 'desc' and get it to work. I used the Insert Image Object from Dreamweaver since I am not a Javascript coder and I've been looking through books and online and cannot find the answer. Here is the javascript code I have in the head:

<script type="text/javascript">
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>

[Code]...

View 3 Replies View Related

Hide All Images, And Show Certain Ones ONCLICk?

Jan 30, 2010

I'm new to the forums, so if i post anything wrong let me know. I'm trying to use links to hide all the images, and show just ones from a certain category. I've used the img name attribute to group them and tried to do a function that shows only one img.

<script language="javascript">
function showone(x) {
document.getElementByName('a').style.display='none';
document.getElementByName('b').style.display='none';
document.getElementByName('c').style.display='none';

[Code]...

except the links don't work like they should, and I can't figure out why. I'm an idiot with javascript, so if feel free to make fun of me, and if anyone knows how to get this simple function to work,

View 9 Replies View Related

Double Onclick + Event Images?

Jan 19, 2010

http:[url]............1) In the events.js-file where you write the longer text part for the tooltip, is it possible to include images somehow for each event within the end of the tooltip?I thinkt that would make the activities look a bit more interesting to read about.

2) When I click on any yellow event in the calendar, it changes the text to the right. Fine with that. But is it possible to use onclick as a double function?So that when I click on "START" (bottom left of the calendar) after having pressed any yellow event, it will not only take me back to the right month but also take me back to the start text?

View 1 Replies View Related

OnClick - HTML Drop Down Box To Work With Images Instead?

Apr 12, 2010

HTML drop down box to work with images instead?

[Code]....

What i want is just 3 images (representing the currency flag) I have tried just simply using the onclick="" but im guessing i will need to create a JS function?

View 9 Replies View Related

OnClick Slideshow - Array Of Images Not Sliding

Feb 17, 2011

I have an image on my page. And I want, when someone clicks on it, it must cycle through an array of images. However, I can't seem to get it to work.

HTML Code:
<div id="slide">
<h3>Some of my work</h3>
<img src="images/slide/slide1.jpg" width="650" height="300" alt="Slide" id="slideShow" onclick="processNext();" />
</div>

Code:
window.onload = initLinks();
window.onload = processNext();
var slidePics = new Array("images/slide/slide1.jpg","images/slide/slide2.jpg","images/slide/slide3.jpg","images/slide/slide4.jpg","images/slide/slide5.jpg","images/slide/slide6.jpg");
var thisPic = 0;
function initLinks(){
document.getElementById("slideShow").onclick = processNext;
}

function processNext(){
thisPic++;
if(thisPic == slidePix.length){
thisPic = 0;
}
document.getElementById("slideShow").src = slidePix[thisPic];
return false;
}

View 5 Replies View Related

OnClick Event Images Deliver A Variable To Another Page?

Sep 11, 2009

I have a html page with a lot of thumbnails. The idea is that when the user clicks on an image the onClick event is to display another detailed form and deliver to that form the name of the image in a variable. In the detailed php-form there is a query to MySQL to retrieve a record. The record will be retrieved by a Query based on the name of the picture. Apparently the PHP cannot do the job. I had an idea to make the thumbnail page as a form and to use use a hidden field with the thummnail name which should be carried on with the $_POST array through the submit button but i do not want to have a submit button. The more elegant way is just by clicking the picture the detailed page is opened and the variable is transferred where my php code can make use of the variable for the query. I have never used java before so you have to excuse for the lack of knowledge.

View 3 Replies View Related

JavaScript Menu With Alternating (onclick) Button Images

Mar 20, 2007

I am new to JavaScript and have been plugging away at it trying build a menu for site I am developing. My colleague has suggested I use Flash, which I could, but I think it is unnecessary and JavaScript is ideal for this use.

I have been building a menu that has a sub menu that appears below all of the main menu items. I have got this working and will include the code I used to do this below.

Now I want to change the button image so that it is visible which sub-menu the items that appear below belong to. Code:

which was very helpful and with some playing around I can now get my existing menu to complete part of my task. But I have 4 menu items and therefore need to use a "var" command to allow me to define different button images for different menus. Code:

View 2 Replies View Related

Multiple Events For Onclick

Jan 23, 2010

I have several pages, each having a button and a textbox. The button has an onclick event directly coded into the HTML markup.The textbox has a onchange event in a similar fashion.What I need to do is create a small javascript snippet which adds another function to the onclick event of the button, and the onchange event of the textbox.I am not allowed to make any changes to the HTML of the pages, or the functions which are called originally by the events.All I can do is place a small javascript file in the head section of the pages.

The code should attach another function which is called during the event, while at the same time preserving the current function attached to the event.

View 2 Replies View Related

Multiple Onclick On One Link

Sep 20, 2010

Im having this problem with multiple onclick on one link. I have a link on my web page that i need to track with two Stats programs, and i need this link to be openned in a new tab. So i need these 3 events (open i new tab and both trackers) to trigger each time a visitor clicks on that link. The 3 onclick i need to use are these:

[Code]...

View 5 Replies View Related

Script That Changes Multiple Images

Oct 14, 2007

I am doing a site redesign and thought about trying to add the ability for individuals to change the color scheme of the site when they visit.

Similar to how yahoo allows you to "individualize" their homepage with one click.

I was able to locate a simple multiple image changer, but I really needed the color change to maintain from one page to the next.

View 1 Replies View Related

Swapping Multiple Divs Onclick?

Jan 26, 2011

Want to swap multiple divs using onclick. Understanding of js is cursory. The way its set up now is when you click it hides a pre-specified div-this causes issues because you dont know which div the user is going to be on and if the user is on a different div then one specified it hides random divs. I want to hide the 'active' div. Heres the code. In head:

Code:
<script type="text/javascript" language="JavaScript"><!--
function HideDIV(d) { document.getElementById(d).style.display = "none"; }
function DisplayDIV(d) { document.getElementById(d).style.display = "block"; }
//--></script>

[Code]...

View 5 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved