Присваивание функций по событию

MaD HamsteR · 23.10.2007

Код:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script language="JavaScript">
function test(){
	var links = document.getElementsByTagName('a');
	
	for(i=0;i<links.length;i++){
		links[i].onmouseover = function(){
			alert('Link '+links[i]);
		}
	}
}
</script>
</head>

<body onload="test();">
<a href="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>
<a href="#">link 4</a>
</body>

</html>

Идея в том чтобы присваивать функции событию при загрузке страницы, ну к примеру для смены картинки при наведении курсора мыши, дабы не писать каждой картинке onmouseout, onmouseover и тд.

Код на основе ссылок читсо для примера, но я не понимаю почему у меня когда вылетает табличка номер линка (переменной i) undefined?

Попробуйте... :blush:

Alterbit · 24.10.2007

function(){
alert('Link '+links);
}
выполняется в другом месте и ничего не знает про i

ps с помощью jquery все делается гораздо проще

Код:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>New Page 1</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $("a").mouseover(function(){ alert(this.href); }) }) </script> </head> <body > <a href="#1">link 1</a> <a href="#2">link 2</a> <a href="#3">link 3</a> <a href="#4">link 4</a> </body> </html>

MaD HamsteR · 09.11.2007

Решил я собстно говоря трабл.

Если кому будет полезно, вот как к примеру можно хайлайтить строки таблицы, принудительно не присваивая события для каждой строки...

Код:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>New Page 1</title>
<script language="JavaScript">


function colorize(){
	var table = document.getElementById('table');
	var cells = table.getElementsByTagName('tr');
	
	for(i=0;i<cells.length;i++){	
		cells[i].onmouseover = function(){
			this.bgColor = 'gray';
		}
		cells[i].onmouseout = function(){
			this.bgColor = 'white';
		}
	}
}


</script>
</head>

<body onload="colorize();">

<div align="center">
	<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="500" id="table">
		<tr>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>
	</table>
</div>

</body>

</html>

Таким образом экономим место и упрощаем хтмл код...

Хотел бы узнать, а можно ли провернуть то же самое используя CSS в ИЕ?
В опере работает отлично tr:hover а в ИЕ никак...

Присваивание функций по событию

MaD HamsteR

Well-Known Member

Alterbit

Well-Known Member

MaD HamsteR

Well-Known Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей