Onclick Thumbnail Open New Window With The Big_picture All In Dom

[Erdna]

Hi guys! pphew where to begin.. I need to onclick on a small picture (thumbnail) to open the big picture in a new window. the problem is everything and then i mean every javascript code shall be controlled from a seperate js.file (DOM). Not even a onclick="" is allowed to be in the html code.Every thumbnail must have the same code that controlles it thats why i have this.src.And with that i think i need a code for getElementByClass. I cant seem to get it to work. I would really need your proffessional help here. Thanks in advance!Here's the java script:

function getElementsByClass(pict,getElementById("pictures");,“*”) {	var classElements = new Array();	if ( node == null )		node = document.getElementById("pictures");	if ( tag == null )		tag = '*';	var els = node.getElementsByTagName(“*”);	var elsLen = els.length;	var pattern = new RegExp("(^|\\s)"+pict+"(\\s|$)");	for (i = 0, j = 0; i < elsLen; i++) {		if ( pattern.test(els[i].pict) ) {			classElements[j] = els[i];			j++;		}	}	return classElements;}function opennew() {    var filename = "big_" + this.src + ".jpg";   var newwindow = window.open(filename);return false;}function init(){    imgb = getElementByClass;    imgb.onclick=opennew;}window.onload=init;

And here is the html code:

     <div id="pictures">       <ul>        <li><img src="small_disney.jpg" alt="click for larger image" class="pict"></li>        <li><img src="small_photoshop.jpg" alt="click for larger image" class="pict"></li>       </ul>     </div> 

I know that its much guys but i have no hair left on my head because of this task.

[jesh]

To get all of the images that have a class "pict", you can do something like this:

// This array will hold all of the images that have// a class name of "pict"var picts = [];// This is the array of all img elements in the document.var imgs = document.getElementsByTagName("img");for(var i = 0; i < imgs.length; i++){	if(imgs.className == "pict")	{		// This img element has a class name of "pict", let's		// add it to our picts array.		picts.push(imgs[i]);	}}// Now you can iterate through the picts array and do whatever you want// to them (e.g. add an onclick handler)for(var i = 0; i < picts.length; i++){	// do stuff to picts[i];}

[Erdna]

Thanks for the reply!but nothing happens.Seems like it can't find the onclick function or what the function should release on :)every thumbnail is called lets say 1.jpg and i want the onclick function to open a new window with the big version of the picture and its called big_1.jpg.As you can se its added "big_" to the image.

var picts = [];var imgs = document.getElementsByTagName("img");for(var i = 0; i < imgs.length; i++){    if(imgs.className == "pict")    {        picts.push(imgs[i]);    }}for(var i = 0; i < picts.length; i++){  function opennew() {    newwindow = window.open( "big_"+this.src+".jpg";}function init(){    imgb = document.getElementById("pictures");    imgb.onclick=opennew;}window.onload=init;

Probably a simple salution but javascript is still very hard for me

[jesh]

for(var i = 0; i < picts.length; i++){  function opennew() {    newwindow = window.open( "big_"+this.src+".jpg";);}

You're not quite right there. If your HTML looks something like this:

<img src="1.jpg" />

Then you can set up the onclicks like this:

for(var i = 0; i < picts.length; i++){	picts[i].onclick = function() { window.open("big_" + this.src); }}