Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 07.09.2011, 20:01   #1
Eldrich
Пользователь
 
Регистрация: 25.08.2010
Сообщений: 88
По умолчанию Сокращение кода.

Доброго времени суток.

Имеется очень страшный, импровизированный код:
Код HTML:
<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>
И ещё страшнее скрипт...

Код HTML:
<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 ничего не понимаю, но как обезьяна повторить могу, изменив по-своему =))?

Заранее спасибо за помощь, она упростит мне жизнь... причём очень сильно)
Eldrich вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Функции, сокращение кода Neolit1819 Помощь студентам 0 31.05.2011 08:48
Оптимизация и сокращение кода (if + сдвиг) Alex Cones Общие вопросы Delphi 2 06.04.2010 21:37
Сокращение if AxenicX Общие вопросы C/C++ 2 07.11.2009 16:08
Сокращение вывода Nightwolf Microsoft Office Access 1 23.04.2009 08:33
Сокращение выражения Simon..14 Общие вопросы C/C++ 4 25.01.2009 13:33