---
title: "Lägga till onmouseover/out på bilder dynamiskt?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/165628-lägga-till-onmouseover-out-på-bilder-dynamiskt"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Travoni"
published: "2007-10-18T20:57:41.000Z"
updated: "2008-04-28T23:12:00.000Z"
replies: 9
views: 798
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/165628-lägga-till-onmouseover-out-på-bilder-dynamiskt"
---

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

## #1 — Travoni, 2007-10-18T20:57Z

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.

Permalänk: https://www.webforum.nu/p/165628

## #2 — Travoni, 2007-10-18T22:28Z

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.

Permalänk: https://www.webforum.nu/p/2042840

## #3 — colione, 2007-10-18T22:51Z

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
}
```

Permalänk: https://www.webforum.nu/p/2042841

## #4 — Travoni, 2007-10-19T10:53Z

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>
```

Bilagor:

- [ratings.zip](https://www.webforum.nu/a/16199.zip)

Permalänk: https://www.webforum.nu/p/2042931

## #5 — colione, 2007-10-19T11:30Z

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>
```

Permalänk: https://www.webforum.nu/p/2042938

## #6 — Travoni, 2007-10-19T15:07Z

Ok. smart!

Permalänk: https://www.webforum.nu/p/2042996

## #7 — Travoni, 2007-10-22T16:03Z

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.

Permalänk: https://www.webforum.nu/p/2043651

## #8 — colione, 2007-10-22T17:15Z

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");

Permalänk: https://www.webforum.nu/p/2043664

## #9 — Travoni, 2007-10-22T22:22Z

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

Permalänk: https://www.webforum.nu/p/2043712

## #10 — Travoni, 2008-04-28T23:12Z

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?

Permalänk: https://www.webforum.nu/p/2103804

---

Tråden på webben: https://www.webforum.nu/amne/javascript/165628-lägga-till-onmouseover-out-på-bilder-dynamiskt