so have figured out how swap 2 images have discovered have again 4 images, rotating each of them left whenever button clicked. tried using same code used 2 images instead turns every picture earthrise.jpg. here code
function rotateleft() { var image1 = document.getelementbyid("image1") var image2 = document.getelementbyid("image2") var image3 = document.getelementbyid("image3") var image4 = document.getelementbyid("image4") if (image1.src.indexof('/jmurphy9/111/images/earthrise.jpg')>-1) { image1.src = '/jmurphy9/111/images/earth.jpg'; } if (image1.src.indexof('/jmurphy9/111/images/earth.jpg')>-1) { image1.src = '/jmurphy9/111/images/maine.jpg'; } if (image1.src.indexof('/jmurphy9/111/images/maine.jpg')>-1) { image1.src = '/jmurphy9/111/images/baywindows.jpg'; } if (image1.src.indexof('/jmurphy9/111/images/baywindows.jpg')>-1) { image1.src = '/jmurphy9/111/images/earthrise.jpg'; } if (image2.src.indexof('/jmurphy9/111/images/earthrise.jpg')>-1) { image2.src = '/jmurphy9/111/images/earth.jpg'; } if (image2.src.indexof('/jmurphy9/111/images/earth.jpg')>-1) { image2.src = '/jmurphy9/111/images/maine.jpg'; } if (image2.src.indexof('/jmurphy9/111/images/maine.jpg')>-1) { image2.src = '/jmurphy9/111/images/baywindows.jpg'; } if (image2.src.indexof('/jmurphy9/111/images/baywindows.jpg')>-1) { image2.src = '/jmurphy9/111/images/earthrise.jpg'; } if (image3.src.indexof('/jmurphy9/111/images/earthrise.jpg')>-1) { image3.src = '/jmurphy9/111/images/earth.jpg'; } if (image3.src.indexof('/jmurphy9/111/images/earth.jpg')>-1) { image3.src = '/jmurphy9/111/images/maine.jpg'; } if (image3.src.indexof('/jmurphy9/111/images/maine.jpg')>-1) { image3.src = '/jmurphy9/111/images/baywindows.jpg'; } if (image3.src.indexof('/jmurphy9/111/images/baywindows.jpg')>-1) { image3.src = '/jmurphy9/111/images/earthrise.jpg'; } if (image4.src.indexof('/jmurphy9/111/images/earthrise.jpg')>-1) { image4.src = '/jmurphy9/111/images/earth.jpg'; } if (image4.src.indexof('/jmurphy9/111/images/earth.jpg')>-1) { image4.src = '/jmurphy9/111/images/maine.jpg'; } if (image4.src.indexof('/jmurphy9/111/images/maine.jpg')>-1) { image4.src = '/jmurphy9/111/images/baywindows.jpg'; } if (image4.src.indexof('/jmurphy9/111/images/baywindows.jpg')>-1) { image4.src = '/jmurphy9/111/images/earthrise.jpg'; } } function init(){ var button1 = document.getelementbyid("btn1") button1.onclick = rotateleft; } window.onload = init; like said, when button clicked changes every picture earthrise.jpg , i'm not sure why.
if 4 images can contained in span or div, rotate left appending first image parent container. move last position, , other images slide on or up, if not absolutely positioned in parent. doesn't matter id or source is-
btn.onclick= rotateleft;
if content in container:
function rotateleft(pa){ var pa= pa || document.getelementbyid('shiftingimagecontainer'); pa.appendchild(pa.firstchild); } or if separated other content on page:
function rotateleft(pa){ var pa= pa || document.getelementbyid('shiftingimagecontainer'); pa.appendchild(pa.getelementsbytagname('img')[0]); } 