Schimba/inlocuieste imaginea cu javascript

Buna ziua!

In programul de mai jos pot sa schimb/inlocuiesc imaginea pic1.png cu imaginea pic2.png cand dau click pe ea.

var image_tracker = 'pic1';
function change() {
	var image = document.getElementById('circle');
	if (image_tracker == 'pic1') {
		image.src = 'pic2.png';
		image_tracker = 'pic2';
	} else {
		image.src = 'pic1.png';
		image_tracker = 'pic1';
	}
}

<img src="pic1.png" alt="Circle" id="circle" onclick="change();">

Acest cod merge doar daca am doar un singur set de imagini de inlocuit: pic1.png cu pic2.png
Cum fac daca sub aceste imagini, in aceeasi pagina, mai am inca un set de imagini pic3.png - pic4.png fara a scrie inca o functie? Adica cand dau click pe imaginea pic3.png sa imi apara in locul ei pic4.png.

Multumesc!

Pui aceeasi functie pe toate imaginile care trebuie schimbate si in acea functie folosesti obiectul event (proprietatea .target) pentru a detecta pe care din imagini s-a dat clic. In functie de aceasta decizi ce pui in [obiect imagine].src. <https://www.w3school...f/obj_event.asp>

<img src="pic1.png" alt="Circle" id="circle" onclick="change(this)">

function change(img) {
if (img.src.indexOf('pic1.png') !== -1) {
	  img.src = 'pic2.png'
}
else if (img.src.indexOf('pic2.png') !== -1) {
	  img.src = 'pic1.png'
}
else if ....................
}
}

Editat de laffin, 03 august 2019 - 08:47.

Multumesc laffin functioneaza, dar cum scurtez codul in cazul in care am 3 seturi de imagini?

<img src="pic1.png" alt="Circle" id="circle" onclick="change(this)">
<img src="pic3.png" alt="Circle" id="circle" onclick="change(this)">
<img src="pic5.png" alt="Circle" id="circle" onclick="change(this)">

function change(img) {
if (img.src.indexOf('pic1.png') !== -1) {
		 img.src = 'pic2.png'
}
else if (img.src.indexOf('pic2.png') !== -1) {
		 img.src = 'pic1.png'
}
else if (img.src.indexOf('pic3.png') !== -1) {
		 img.src = 'pic4.png'
}
else if (img.src.indexOf('pic4.png') !== -1) {
		 img.src = 'pic3.png'
}
else if (img.src.indexOf('pic5.png') !== -1) {
		 img.src = 'pic6.png'
}
else if (img.src.indexOf('pic6.png') !== -1) {
		 img.src = 'pic5.png'
}
}

Editat de alex05ok, 03 august 2019 - 08:58.

function change(img) {
	/* aici setezi calea globala a tutoror imaginilor, daca nu e aceeasi pentru toate imaginile.. atunci se complica putin*/

	var rootPATH = "images/";

	var filename = img.src.split("/").pop();

	swapImages = {
		'pic1.png': 'pic2.png',
		'pic2.png': 'png1.png',
		'pic3.png': 'pic4.png',
		'pic4.png': 'png3.png',
...........
	};

	 img.src = rootPATH + swapImages[filename];

}

Daca ai da mai multe detalii despre structura html  s-ar mai gasi si alte solutii mai elegante, ai cumva si img cu pic2, pic4, pic6 ascunse(sau nu) pe langa pic1,pic3, pic5?

Editat de andronic312, 03 august 2019 - 10:37.

<img src="pozaA1.png" onclick="schimbapoza(this);">
<img src="pozaB2.png" onclick="schimbapoza(this);">
<img src="pozaC9.png" onclick="schimbapoza(this);">

var poze = {
	"pozaA1.png": "pozaA2.png", "pozaA2.png": "pozaA1.png",
	"pozaB1.png": "pozaB2.png", "pozaB2.png": "pozaB1.png",
	"pozaC8.png": "pozaC9.png", "pozaC9.png": "pozaC8.png",
// ... etc
};
function schimbapoza (img) {
	var ixname = img.src.lastIndexOf("/");
	if (ixname == -1) ixname = 0;
	else			 ixname++;
	img.src = img.src.substring(0,ixname) + poze[img.src.substring(ixname)];
}

Te scuteste si de a tine evidenta unde/ce poza ai afisata curent.

Multumesc sags este solutia pe care o cautam.

mai bine cu jquery ai documentatie full