Вход

Просмотр полной версии : Сократить код.

Eldrich
18.09.2011, 15:07
Доброго времени суток.

Имеется очень страшный, импровизированный код:

<head>
<style type="text/css">
.style1
{
width: 100%;
}
</style>
</head>
<table class="style1">
<tr>
<td>
&nbsp;</td>
<td style="text-align: center; vertical-align: middle; letter-spacing: 0pt; word-spacing: 0pt; width: 24.6521px; height: 24.3333px;">
<div onclick="r5u5()"><em id="Em5u5"><img alt="" src="(Картинка1)" align="middle" style="opacity:0.60;filter:alpha(opacity=60)"/></em></div></td>

<td>
&nbsp;</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle; letter-spacing: 0pt; word-spacing: 0pt; width: 24.6521px; height: 24.3333px;">
<div onclick="r4u4()"><em id="Em4u4"><img alt="" src="(Картинка2)" align="middle" style="opacity:0.60;filter:alpha(opacity=60)"/></em></div></td>

<td style="text-align: center; vertical-align: middle; letter-spacing: 0pt; word-spacing: 0pt; width: 24.6521px; height: 24.3333px;">
<div onclick="r3u3()"><em id="Em3u3"><img alt="" src="(Картинка1)" align="middle" style="opacity:0.60;filter:alpha(opacity=60)"/></em></div></td>

<td style="text-align: center; vertical-align: middle; letter-spacing: 0pt; word-spacing: 0pt; width: 24.6521px; height: 24.3333px;">
<div onclick="r2u2()"><em id="Em2u2"><img alt="" src="(Картинка2)" align="middle" style="opacity:0.60;filter:alpha(opacity=60)"/></em></div></td>

</tr>
<tr>
<td>
&nbsp;</td>

<td style="text-align: center; vertical-align: middle; letter-spacing: 0pt; word-spacing: 0pt; width: 24.6521px; height: 24.3333px;">
<div onclick="r1u1()"><em id="Emr1u1"><img alt="" src="(Картинка1)" align="middle" style="opacity:0.60;filter:alpha(opacity=60)"/></em></div></td>

<td>
&nbsp;</td>
</tr>
</table>


И ещё страшнее скрипт...

<script type="text/javascript">
c = "<img alt=\"\" src=\"(Картинка1)\" align=\"middle\" height=\"24.333\" width=\"24.6521\"style=\"opacity:0.60;filter:alpha(opacity=60)\">"
s = "<img alt=\"\" src=\"(Картинка2)\" align=\"middle\" height=\"24.333\" width=\"24.6521\"style=\"opacity:0.60;filter:alpha(opacity=60)\">"
ch = "<img alt=\"\" src=\"(картинка3)\" align=\"middle\" height=\"24.333\" width=\"24.6521\">"
sh = "<img alt=\"\" src=\"(Картинка4)\" align=\"middle\" height=\"24.333\" width=\"24.6521\">"

function r1u1() {

document.getElementById('Emr1u1').innerHTML = ch;
document.getElementById('Emr2u2').innerHTML = s;
document.getElementById('Emr3u3').innerHTML = c;
document.getElementById('Emr4u4').innerHTML = s;
document.getElementById('Emr5u5').innerHTML = c;

}

function r2u2() {

document.getElementById('Emr1u1').innerHTML = c;
document.getElementById('Emr2u2').innerHTML = sh;
document.getElementById('Emr3u3').innerHTML = c;
document.getElementById('Emr4u4').innerHTML = s;
document.getElementById('Emr5u5').innerHTML = c;

}

function r3u3() {

document.getElementById('Emr1u1').innerHTML = c;
document.getElementById('Emr2u2').innerHTML = s;
document.getElementById('Emr3u3').innerHTML = ch;
document.getElementById('Emr4u4').innerHTML = s;
document.getElementById('Emr5u5').innerHTML = c;

}

function r4u4() {

document.getElementById('Emr1u1').innerHTML = c;
document.getElementById('Emr2u2').innerHTML = s;
document.getElementById('Emr3u3').innerHTML = c;
document.getElementById('Emr4u4').innerHTML = sh;
document.getElementById('Emr5u5').innerHTML = c;

}

function r5u5() {

document.getElementById('Emr1u1').innerHTML = c;
document.getElementById('Emr2u2').innerHTML = s;
document.getElementById('Emr3u3').innerHTML = c;
document.getElementById('Emr4u4').innerHTML = s;
document.getElementById('Emr5u5').innerHTML = ch;

}

</script>



Данная страсть выполняет простейшую функцию - меняет картинку при щелчке мыши. Но, этот пример лишь часть огромного кода, т.е. если нужно будет запрограммировать данным образом 100 картинок, то нужно будет прописать 100х100 вариантов в скрипте... А это огромный информационный объём, что не есть хорошо.

А уж о смене картинки при наведении на неё мыши, вкупе уже с существующим щелчком, вообще молчу... данным образом написать не получиться практически никак.

Можно ли каким-либо образом упростить скрипт, ну или использовать css, в котором я слабо разбираюсь (и в javascript ничего не понимаю, но как обезьяна повторить могу, изменив по-своему =))?

Заранее спасибо за помощь, она упростит мне жизнь... причём очень сильно)
melky
18.09.2011, 15:38
сократить ... трудно будет. легче по-своему написать новый код.

и то, и то, как мне кажется, сейчас потребует какого-то количества бабла.

начинайте потихоньку изучать хотя-бы HTML+CSS. при хорошем коде лёгкий скрипт возьмётся написать каждый.

если есть готовое бабло ( 400 минимум ), можете написать в раздел "работа", там напишут хороший код в кратчайшие сроки.

хм. я заведомо не рассмотрел вариант "добра" от программиста. не думаю, что кто-нибудь не плюнет на пол от такого кода, что в примере.


______
PS.я ничего не прошу. я предвижу ^_^
Eldrich
18.09.2011, 15:57
Ну, код я сам, лично писал и не откуда не копировал. Т.е. я его уже сам написал.

Ну, если нельзя, так нельзя.) Спасибо за помощь.)
nikita.mmf
19.09.2011, 11:37
Самый простой способ сократить, но не гибкий вообще никак.

var ruElem = [], htmlObj = {
c = "<img alt=\"\" src=\"(Картинка1)\" align=\"middle\" height=\"24.333\" width=\"24.6521\"style=\"opacity:0.60;filter:alpha(opacity=60)\">",
s = "<img alt=\"\" src=\"(Картинка2)\" align=\"middle\" height=\"24.333\" width=\"24.6521\"style=\"opacity:0.60;filter:alpha(opacity=60)\">",
ch = "<img alt=\"\" src=\"(картинка3)\" align=\"middle\" height=\"24.333\" width=\"24.6521\">",
sh = "<img alt=\"\" src=\"(Картинка4)\" align=\"middle\" height=\"24.333\" width=\"24.6521\">"
};
function ru ( index ) {
if ( !ruElem.length ) {
for ( var i = 1; i < 6; i++ ) {
ruElem.push( document.getElementById(["Emr","u",""].join(i)) );
}
}
for ( var i = 0, len = ruElem.length; i < len; i++ ) {
ruElem.innerHTML = htmlObj[ (i % 2 ? 's' : 'c') + (i == index : "h" : '') ];
}
};

Использовать так

<div onclick="ru(2)">...
kadabrik
19.09.2011, 12:35
Где-то уже писал.. Гибкий и короткий вариант на jQuery. Кликать по пунктам.

<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$(function()
{
$('#images img').hide();
$('#menu li').click(function()
{
$('#images img').hide().eq($(this).index()).show();
})
});
</script>
</head>
<body>
<ul id="menu" style="cursor: pointer">
<li>Smile</li>
<li>Haha</li>
<li>Nono</li>
</ul>
<div id="images">
<img alt="" src="http://javascript.ru/forum/images/smilies/smile.gif"/>
<img alt="" src="http://javascript.ru/forum/images/smilies/haha.gif"/>
<img alt="" src="http://javascript.ru/forum/images/smilies/nono.gif"/>
</div>
</body>
</html>
Eldrich
19.09.2011, 13:40
Огромное Вам спасибо.) Буду вникать.