Спасибо, но я попробовал что-то написать, исходя из прочитанного, вот такой код: (Проблема в том, что он работает только в FireFox. А в IE и Гугл Хром, картинки убегают за экран, подскажите пожалуйста более оптимальное решение!).
<html>
<head>
<script type="text/javascript">
function lig(id) {
var nowcontent = document.getElementById('d'+id).innerHTML;
document.getElementById('d'+id).innerHTML = "<div style=\"width:47px; height:47px; background: url('fx2.jpg') no-repeat;padding:0px;margin:0px;padding-top:5px;\">"+nowcontent+"</div>";
}
function oflig(id) {
document.getElementById('d'+id).innerHTML = "<a href=\"#\" onmouseover=\"lig("+id+")\" onmouseout=\"oflig("+id+")\" style=\"text-decoration:none;\"><img src=\""+id+".jpg\" alt=\"\" border=\"0\"/></a>";
}
</script>
</head>
<body style="background-color: #000;">
<div style="float:left;border-right:1px dotted white;padding:7px;">
<div id="d1" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(1)" onmouseout="oflig(1)" style="text-decoration:none;"><img src="1.jpg" alt="" border="0"/></a></div>
<div id="d2" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(2)" onmouseout="oflig(2)" style="text-decoration:none;"><img src="2.jpg" alt="" border="0"/></a></div>
<div id="d3" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(3)" onmouseout="oflig(3)" style="text-decoration:none;"><img src="3.jpg" alt="" border="0"/></a></div>
<div id="d4" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(4)" onmouseout="oflig(4)" style="text-decoration:none;"><img src="4.jpg" alt="" border="0"/></a></div>
<div id="d5" style="width:47px; height:47px;text-align:center;clear:left;float:left;"><a href="#" onmouseover="lig(5)" onmouseout="oflig(5)" style="text-decoration:none;"><img src="5.jpg" alt="" border="0"/></a></div>
<div id="d6" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(6)" onmouseout="oflig(6)" style="text-decoration:none;"><img src="6.jpg" alt="" border="0"/></a></div>
<div id="d7" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(7)" onmouseout="oflig(7)" style="text-decoration:none;"><img src="7.jpg" alt="" border="0"/></a></div>
<div id="d8" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(8)" onmouseout="oflig(8)" style="text-decoration:none;"><img src="8.jpg" alt="" border="0"/></a></div>
<div id="d9" style="width:47px; height:47px;text-align:center;clear:left;float:left;"><a href="#" onmouseover="lig(9)" onmouseout="oflig(9)" style="text-decoration:none;"><img src="9.jpg" alt="" border="0"/></a></div>
<div id="d10" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(10)" onmouseout="oflig(10)" style="text-decoration:none;"><img src="10.jpg" alt="" border="0"/></a></div>
</div>
<div style="float:left;padding:7px;">
<div id="d11" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(11)" onmouseout="oflig(11)" style="text-decoration:none;"><img src="11.jpg" alt="" border="0"/></a></div>
<div id="d12" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(12)" onmouseout="oflig(12)" style="text-decoration:none;"><img src="12.jpg" alt="" border="0"/></a></div>
<div id="d13" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(13)" onmouseout="oflig(13)" style="text-decoration:none;"><img src="13.jpg" alt="" border="0"/></a></div>
<div id="d14" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(14)" onmouseout="oflig(14)" style="text-decoration:none;"><img src="14.jpg" alt="" border="0"/></a></div>
<div id="d15" style="width:47px; height:47px;text-align:center;clear:left;float:left;"><a href="#" onmouseover="lig(15)" onmouseout="oflig(15)" style="text-decoration:none;"><img src="15.jpg" alt="" border="0"/></a></div>
<div id="d16" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(16)" onmouseout="oflig(16)" style="text-decoration:none;"><img src="16.jpg" alt="" border="0"/></a></div>
<div id="d17" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(17)" onmouseout="oflig(17)" style="text-decoration:none;"><img src="17.jpg" alt="" border="0"/></a></div>
<div id="d18" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(18)" onmouseout="oflig(18)" style="text-decoration:none;"><img src="18.jpg" alt="" border="0"/></a></div>
<div id="d19" style="width:47px; height:47px;text-align:center;clear:left;float:left;"><a href="#" onmouseover="lig(19)" onmouseout="oflig(19)" style="text-decoration:none;"><img src="19.jpg" alt="" border="0"/></a></div>
</div>
</body>
</html>
|