Lägga till onmouseover/out på bilder dynamiskt?

Jag vill lägga till lite olika egenskaper dynamiskt på bilder som ligger i en viss div.

ex.

<div id="bilder">
<img src="bild.gif">
<img src="bild.gif">
<img src="bild.gif">
<img src="bild.gif">
</div>

Alltså så att både onmouseover/out och onclick "läggs på" med ett javascript.

Nu har jag kommit en bit på vägen men jag får inte med mig bildens id.

var elms = document.getElementsByTagName("img");

	for(var i=0; i<elms.length; i++){
		if(elms[i].className == "myImages"){
			[red][B]var a = elms[i].id;[/B][/red]
			if(document.documentElement.addEventListener)
				elms[i].addEventListener(_event.substring(2, _event.length), function(){_func(a)}, false);
			if(document.documentElement.attachEvent)
				elms[i].attachEvent(_event, function(){_func(a)});
		}
	}

Det som händer är bara att sista bildens id kommer på alla funktioner.

Ja brukar nyttja rock solid addEvent. Dels för att jag slipper bry mig om IEs icke standardmässiga attachEvent samt att den städar bort minnesläckor från IE.

function addEvent( obj, type, fn ) {
	if (obj.addEventListener) {
		obj.addEventListener( type, fn, false );
		EventCache.add(obj, type, fn);
	}
	else if (obj.attachEvent) {
		obj["e"+type+fn] = fn;
		obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
		obj.attachEvent( "on"+type, obj[type+fn] );
		EventCache.add(obj, type, fn);
	}
	else {
		obj["on"+type] = obj["e"+type+fn];
	}
}

var EventCache = function(){
	var listEvents = [];
	return {
		listEvents : listEvents,
		add : function(node, sEventName, fHandler){
			listEvents.push(arguments);
		},
		flush : function(){
			var i, item;
			for(i = listEvents.length - 1; i >= 0; i = i - 1){
				item = listEvents[i];
				if(item[0].removeEventListener){
					item[0].removeEventListener(item[1], item[2], item[3]);
				};
				if(item[1].substring(0, 2) != "on"){
					item[1] = "on" + item[1];
				};
				if(item[0].detachEvent){
					item[0].detachEvent(item[1], item[2]);
				};
				item[0][item[1]] = null;
			};
		}
	};
}();
addEvent(window,'unload',EventCache.flush);

var elms = document.getElementsByTagName("img");

	for(var i=0; i<elms.length; i++){
		if(elms[i].className == "myImages"){
			addEvent(elms[i],'moseover',_func);
		}
	}

function _func() {
id=this.id;
//do the rest of your stuff
}

Det blev bra, bifogar även stjärnor om det är ngn som vill använda det:

<script type="text/javascript">
<!--

window.onload = function(){
	addElementEvent();
};

function addEvent( obj, type, fn ) {
	if (obj.addEventListener) {
		obj.addEventListener( type, fn, false );
		EventCache.add(obj, type, fn);
	}
	else if (obj.attachEvent) {
		obj["e"+type+fn] = fn;
		obj[type+fn] = function() { obj["e"+type+fn](window.event); }
		obj.attachEvent( "on"+type, obj[type+fn] );
		EventCache.add(obj, type, fn);
	}
	else {
		obj["on"+type] = obj["e"+type+fn];
	}
}

var EventCache = function(){
	var listEvents = [];
	return {
		listEvents : listEvents,
		add : function(node, sEventName, fHandler){
			listEvents.push(arguments);
		},
		flush : function(){
			var i, item;
			for(i = listEvents.length - 1; i >= 0; i = i - 1){
				item = listEvents[i];
				if(item[0].removeEventListener){
					item[0].removeEventListener(item[1], item[2], item[3]);
				};
				if(item[1].substring(0, 2) != "on"){
					item[1] = "on" + item[1];
				};
				if(item[0].detachEvent){
					item[0].detachEvent(item[1], item[2]);
				};
				item[0][item[1]] = null;
			};
		}
	};
}();

addEvent(window,'unload',EventCache.flush);
var currRate;

function addElementEvent(){
	var elms = document.getElementsByTagName("img");
	currRate = parseInt(document.myForm.ratestate.value)+0;

	for(var i=0; i<elms.length; i++){
		if(elms[i].className == "ls"||elms[i].className == "rs"){
			addEvent(elms[i],'click',vote);
			addEvent(elms[i],'mouseover',ov);
			addEvent(elms[i],'mouseout',ou);
		}
	}
};

function fillstars(img,r){
	var elms = document.getElementsByTagName("img");
 	if(r){r="r_"}else{r=""}
	for(var i=0; i<elms.length; i++){
		if(i%2){
		    if(i<img){elms[i].src = r+"rs.gif";}else{elms[i].src = "d_rs.gif";}
		}else{
		    if(i<img){elms[i].src = r+"ls.gif";}else{elms[i].src = "d_ls.gif";}
                }
	}
};

function vote() {
    var id = this.alt;
    document.getElementById("foo").innerHTML = "Din röst: " + id + " poäng";
    document.myForm.ratestate.value = id;
    currRate = parseInt(id);
    fillstars(currRate,true);
};

function ov(){
    var id = parseInt(this.alt);
    fillstars(id,false);
};
function ou(){
    fillstars(currRate,false);
};
//-->
</script>

<form id="myForm" name="myForm">

<div id="ratings">
<img src="ls.gif" width="6" height="12" alt="1" class="ls"><img src="rs.gif" width="6" height="12" alt="2" class="rs"><img src="ls.gif" width="6" height="12" alt="3" class="ls"><img src="rs.gif" width="6" height="12" alt="4" class="rs"><img src="ls.gif" width="6" height="12" alt="5" class="ls"><img src="d_rs.gif" width="6" height="12" alt="6" class="rs"><img src="d_ls.gif" width="6" height="12" alt="7" class="ls"><img src="d_rs.gif" width="6" height="12" alt="8" class="rs"><img src="d_ls.gif" width="6" height="12" alt="9" class="ls"><img src="d_rs.gif" width="6" height="12" alt="10" class="rs">
<input type="hidden" value="5" name="ratestate" id="ratestate"/>
</div>

</form>
<div class="foo" id="foo"></div>

Fast det känns väl lite dumt att använda window.onload=function när du har en addEvent metod? :) Dessutom så blir det minnesläcka i IE.

<script type="text/javascript">
<!--

function addEvent( obj, type, fn ) {
	if (obj.addEventListener) {
		obj.addEventListener( type, fn, false );
		EventCache.add(obj, type, fn);
	}
	else if (obj.attachEvent) {
		obj["e"+type+fn] = fn;
		obj[type+fn] = function() { obj["e"+type+fn](window.event); }
		obj.attachEvent( "on"+type, obj[type+fn] );
		EventCache.add(obj, type, fn);
	}
	else {
		obj["on"+type] = obj["e"+type+fn];
	}
}

var EventCache = function(){
	var listEvents = [];
	return {
		listEvents : listEvents,
		add : function(node, sEventName, fHandler){
			listEvents.push(arguments);
		},
		flush : function(){
			var i, item;
			for(i = listEvents.length - 1; i >= 0; i = i - 1){
				item = listEvents[i];
				if(item[0].removeEventListener){
					item[0].removeEventListener(item[1], item[2], item[3]);
				};
				if(item[1].substring(0, 2) != "on"){
					item[1] = "on" + item[1];
				};
				if(item[0].detachEvent){
					item[0].detachEvent(item[1], item[2]);
				};
				item[0][item[1]] = null;
			};
		}
	};
}();

addEvent(window,'unload',EventCache.flush);
addEvent(window,'load',addElementEvent);

var currRate;

function addElementEvent(){
	var elms = document.getElementsByTagName("img");
	currRate = parseInt(document.myForm.ratestate.value)+0;

	for(var i=0; i<elms.length; i++){
		if(elms[i].className == "ls"||elms[i].className == "rs"){
			addEvent(elms[i],'click',vote);
			addEvent(elms[i],'mouseover',ov);
			addEvent(elms[i],'mouseout',ou);
		}
	}
};

function fillstars(img,r){
	var elms = document.getElementsByTagName("img");
 	if(r){r="r_"}else{r=""}
	for(var i=0; i<elms.length; i++){
		if(i%2){
		    if(i<img){elms[i].src = r+"rs.gif";}else{elms[i].src = "d_rs.gif";}
		}else{
		    if(i<img){elms[i].src = r+"ls.gif";}else{elms[i].src = "d_ls.gif";}
                }
	}
};

function vote() {
    var id = this.alt;
    document.getElementById("foo").innerHTML = "Din röst: " + id + " poäng";
    document.myForm.ratestate.value = id;
    currRate = parseInt(id);
    fillstars(currRate,true);
};

function ov(){
    var id = parseInt(this.alt);
    fillstars(id,false);
};
function ou(){
    fillstars(currRate,false);
};
//-->
</script>

<form id="myForm" name="myForm">

<div id="ratings">
<img src="ls.gif" width="6" height="12" alt="1" class="ls"><img src="rs.gif" width="6" height="12" alt="2" class="rs"><img src="ls.gif" width="6" height="12" alt="3" class="ls"><img src="rs.gif" width="6" height="12" alt="4" class="rs"><img src="ls.gif" width="6" height="12" alt="5" class="ls"><img src="d_rs.gif" width="6" height="12" alt="6" class="rs"><img src="d_ls.gif" width="6" height="12" alt="7" class="ls"><img src="d_rs.gif" width="6" height="12" alt="8" class="rs"><img src="d_ls.gif" width="6" height="12" alt="9" class="ls"><img src="d_rs.gif" width="6" height="12" alt="10" class="rs">
<input type="hidden" value="5" name="ratestate" id="ratestate"/>
</div>

</form>
<div class="foo" id="foo"></div>

Ok. smart!

Jag kan tillägga att jag lade till det röda i koden:

function fillstars(img,r){
	var elms = document.getElementsByTagName("img");
 	if(r){r="r_"}else{r=""}
	for(var i=0; i<elms.length; i++){
[red]if(elms[i].className == "ls"||elms[i].className == "rs"){ [/red]
		if(i%2){
		    if(i<img){elms[i].src = r+"rs.gif";}else{elms[i].src = "d_rs.gif";}
		}else{
		    if(i<img){elms[i].src = r+"ls.gif";}else{elms[i].src = "d_ls.gif";}
                }
[red]}[/red]
	}
};

Men så fort det kommer in någon bild före mina "stjärnor" så fu-kas scriptet upp och blir konstigt. Fattar inte varför.

problemet är att du fångar _alla_ img-taggar på sidan via:
var elms = document.getElementsByTagName("img");
Och när du loopar igenom dem så är ju bilden med id 0 bilden som ligger innan din första stjärnbild.
Om du vet med dig att du bara kommer att ha dina stjärnbilder i #ratings så kan du göra såhär:
var elms = document.getElementById("ratings").getElementsByTagName("img");

Ahaaa, det gjorde ju saken lite lättare.
Tack.

Skulle vilja kunna "serivlisera" denna så att jag kan återanvända samma sak på flera ställen på en sida, hur gör jag det?