Develop Reference

how to change several images with a single click

Im really new to javascript, and while Im learning, Im trying to change images in a gallery to others with an onclick function.
I have links to different galleries. When I click on link 1, the imgs are one1.jpg, one2.jpg and so on. When I click on link 2, imgs are two1.jpg, two2.jpg, etc.
This is the rough script I made for Link 1:
<script>
function one() {
document.getElementById("foto1").src="one1.jpg";
document.getElementById("foto2").src="one2.jpg";
}
</script>
Link 1
Link 2
<img id="foto1" src="tre1.jpg"></a>
<img id="foto2" src="tre2.jpg"></a>
etc.
I made another function called two() for the second link with same content but changing src to what I want. And for every link I add, I copy the script and change it a little.
I know there is a way to optimize to a single script with variables or something .
Any help?
Thanks

In order to differentiate group of images there must be a pattern.
try to add a class on each img tag to differentiate images for changing their source, and the you can loop through images as follows:
Link 1
Link 2
<img class="img1" id="foto1" src="foto1.jpg">
<img class="img1" id="foto2" src="foto1.jpg">
<img class="img2" id="foto3" src="pic1.jpg">
<img class="img2" id="foto4" src="pic2.jpg">
<script>
function one() {
var img = document.getElementsByClassName("img1");
for (var i in img) {
img[i].src = "foto" + 1 + ".jpg"
}
}
function two() {
var img = document.getElementsByClassName("img2");
for (var i in img) {
img[i].src = "pic" + 1 + ".jpg"
}
}
</script>

Replace every onclick of the page with img src link?

I use a webpage where I want to replace the onclicks, of a bunch of links, with the modified src link of the <img> each link contains.
For example, the Greasemonkey script should change this:
<p class="listphotos">
<a onclick="alert('I'm a really annoying function! X'); return false;" href="#">
<img alt="photo" src="http://.../min/x.jpg">
</a>
<a onclick="alert('I'm a really annoying function! Y'); return false;" href="#">
<img alt="photo" src="http://.../min/y.jpg">
</a>
</p>
To this:
<p class="listphotos">
<a onclick="http://.../max/x.jpg" href="http://.../max/x.jpg">
<img alt="photo" src="http://.../min/x.jpg">
</a>
<a onclick="http://.../max/y.jpg" href="http://.../max/y.jpg">
<img alt="photo" src="http://.../min/y.jpg">
</a>
</p>
I've tried this (see also this jsFiddle):
var link = $("p.listphotos a img").prop("src").replace("min", "max");
$("p.listphotos a").prop("onclick", link);
$("p.listphotos a").prop("href", link);
but the right pictures do not get linked.

Setting onclick to a link is an error. onclick needs to be valid javascript. But, since it looks like you're trying to "delink" those photos, best to remove the onclicks altogether.
Also, you can't set the href that way (unless you want every link to go to the same photo). You need to loop. jQuery's .each() should do the trick. Like so:
$("p.listphotos a img").each ( function () {
//-- `this` is each target image, one at a time
var jThis = $(this);
//-- More robust replace
var bigLink = jThis.prop ("src").replace (/\bmin\b/i, "max");
//-- The img parent is the link we're after.
jThis.parent ().prop ("href", bigLink).removeProp ("onclick");
} );
Note that prop and removeProp are the correct way to kill an onclick. But, if you inspect the page source in some browsers, the attribute will still be there. Don't worry, the onclick will no longer function.

I think you can try something like this
var numberClick=0;
var Images= ['image1.png','image2.png'];
function changeIndex(index){
if (index >=0 && index < Images.length){
$("p.listphotos a img").attr("src", Images[index]);
return true;
}
return false;
}
then you can use it in this way
function showImage(){
if (changeIndex(numberClick)){
numberClick+=1;
}
else{
numberClick=0;
}
}
and then
$("p.listphotos a img").click(function(){
showImage();
return false;
});

Timer to reset Closing button once clicked back to it's "Before" state after 2 seconds

Hey there i've been having some difficulties with trying to figure out how to reset a button back to its previous state once its been clicked on. I know it involves a javascript timing, Can anyone help ive been trying all morning now.
function clickMute()
{ if (document.Mute.src=='http://www.showandtell.com/TRUMusicControl/images/BeforeClickMute.png'){
document.Mute.src='http://www.showandtell.com/TRUMusicControl/images/AfterClickMute.png';
}
else if (document.Mute.src=='http://www.showandtell.com/TRUMusicControl/images/AfterClickMute.png'){
document.Mute.src='http://www.showandtell.com/TRUMusicControl/images/BeforeClickMute.png';
}
}
<div id= "Mute">
<a href="#">
<img id="Mutebutton" name="Mute" onclick="clickMute()" src="images/BeforeClickMute.png" width="140" height="126" />
</a>

Firstly, remove the a (anchor) tag surrounding the image (mute button). Then just use the following code (to replace your function):
function clickMute(){
var strPath = "http://www.showandtell.com/TRUMusicControl/images/",
arrSrc = ["BeforeClickMute.png","AfterClickMute.png"],
button = document.getElementById("Mutebutton"),
index = (/Before/i.test(button.src)) ? 1 : 0;
button.src = strPath + arrSrc[index];
/* If you need the button to reset itself after a certain time... */
if (index) setTimeout(clickMute,2000);
}

managing mousever and mouseclick events

I am trying to do something quite simple.
I have an image with a rollover. When it is clicked the onmouseout and onmouseover events are removed and the image is swaped. Up to here I got it but now I would like to add something so that when it is clicked again everything returns to the original state (swap the image again and activate onmouseover and onmouseout.
Here is the code I got so far:
<a href="#"
onMouseOut="MM_swapImgRestore();
"
onMouseOver="MM_swapImage('image','','images/image-2.jpg',1)"
onClick="
MM_swapImage('image','','images/image-3.jpg',1);
this.onmouseover=null;
this.onmouseout=null;
"
>
<img name="image" src="images/image-1.jpg" id="rond9"></a>

for my quite easy solution i would add a flag and check it before firing the mouseover and mouseout events as it it remove the unnecessary burden of attaching and detaching of events.
i.e like:
<script>var myFlag=true;</script>
<a href="#"
onMouseOut="if(myFlag === true){MM_swapImgRestore();}"
onMouseOver="if(myFlag === true){MM_swapImage('image','','images/image-2.jpg',1);}"
onClick="MM_swapImage('image','','images/image-3.jpg',1);
myFlag = !myFlag;"
>
<img name="image" src="images/image-1.jpg" id="rond9"></a>

Seeing as this was generated by a WYSIWYG editor (presumably DreamWeaver), I won't suggest a jQuery implementation, but rather something that would work without referencing jQuery. You could possibly try something like:
<script type="text/javascript">
var removeEvents = true;
function EventAttach(anchor) {
MM_swapImage('image','','images/image-3.jpg',1);
anchor.onmouseover = removeEvents ? null : new function() { MM_swapImage('image','','images/image-2.jpg',1) };
anchor.onmouseout = removeEvents ? null : new function() { MM_swapImgRestore(); };
removeEvents = !removeEvents;
}
</script>
<a href="#"
onMouseOut="MM_swapImgRestore();"
onMouseOver="MM_swapImage('image','','images/image-2.jpg',1)"
onClick="EventAttach(this);"
>
<img name="image" src="images/image-1.jpg" id="rond9"></a>

Help with JS return statement

this is probably an easy one, but I am new to JavaScript.
When I click on a tab which has a special id, I want that id saved in a variable. So far, so good. But if I click on a other button I want that button to work with that previous id oft he tab. How am I using the return statement correctly?
Thanks!

// 0 = no tab
var myTabID = 0
function doNewTab(newTabID)
{
// If the tab has not been set
if(myTabID <> 0){
// Do whatever you want with the tab ID in here
alert(myTabID);
}
// Set new tab ID
myTabID = newTabID;
}
Then in your HTML:
<a onclick="doNewTab(1)" href="#">Tab1</a><br />
<a onclick="doNewTab(2)" href="#">Tab2</a><br />
<a onclick="doNewTab(3)" href="#">Tab3</a><br />

var tabId = 0
function buttonClick(obj) {
tabId = obj.id
}
<button onclick="buttonClick(this)">Button</button>