Ох этот Javascript

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем ExtremeRuff, 28 июл 2005.

Статус темы:
Закрыта.
  1. ExtremeRuff

    ExtremeRuff Гость

    ВОт если нужно допустим кнопки сделать не из каритнок а из текста + под низом изменяющийся бэкграунд-картинка (не просто цвет)

    echo "<td background='images/bg-m.jpg' bgcolor=\"#FFCC33\" align=\"center\" style=\"cursor:hand\" onMouseOver=\"this.style.background='#DAD8D8'\" onMouseOut=\"this.style.background=''\" onClick=\"window.location.href='modules.php?name=Your_Account'\"><a class=m_m href=\"modules.php?name=Your_Account\">Др-др-др</a></td>\n";

    Вот таким образом можно изменять картинку-бэкграенд на цвет(просто) и обратно, при наведении курсора на кнопку, А ВОТ КАК сделать что бы при наведении менять не просто цвет-бэкграунд ячейки а подставлять другую куртинку-бэкграунд... Ёлки палки - никак не получается. Уже все свойства перепробывал. Помогоите кто шарит. :lol:
     
  2. Guest

    Guest Гость

    Для: ExtremeRuff
    а если вместо цвета путь писать?
     
  3. ExtremeRuff

    ExtremeRuff Гость

    НУ так вот не работает как не крутил.
    и background и background-image пробывал ой крыша уже едет.
     
  4. Andrew Stephanoff

    Andrew Stephanoff Гость

    а если кнопку делать как
    Код (Text):
    <input type="image" id="btnStart" src="image.png" />
    и менять как у картинки урл
     
  5. ExtremeRuff

    ExtremeRuff Гость

    БОЛЬШОЕ спасиба, проверим. ;)
     
  6. ExtremeRuff

    ExtremeRuff Гость

    Так всё хорошо вот допустим что имеем -
    <input type="image" src="knopka1.jpg"
    onmouseover="this.src='knopka2.jpg'" onmouseout="this.src='knopka1.jpg'">

    Но как написать поверх кнопок текст, не так что бы он был нарисован на кнопке, о поверх. ????? ;)

    ё! Придумал, только вот так - работает только в IE, а Опера не чувствует чего я хочу. -

    <table align="center" cellspacing="2" cellpadding="2" border="1">
    <tr>
    <td align=center style="cursor:hand;background-repeat:no-repeat;" background=knopka1.jpg id=rt width=138 height=40
    onmouseover="this.background='knopka2.jpg'"
    onmouseout="this.background='knopka1.jpg'">
    <a href=http://localhost/site style=text-decoration:none;>
    <font color=red>Ссылка</a>
    </td>
    </tr>
    </table>

    Пример я вылажил тут - http://belomor.4kv.ru/test/images.html

    Подскажите кто как Оперу заставить это понять. ;)
     
  7. Andrew Stephanoff

    Andrew Stephanoff Гость

    ты только не обижайся, но создание кнопки через таблицу напоминает удаление гландов через задний проход ;)
    Код (Text):
    <script language="JavaScript">
    function changeImage(url) {
     btnPush = document.getElementById("button");
     btnPush.style.backgroundImage = "url(" + url + ")";
     btnPush.style.backgroundRepeat = "no-repeat";
    }
    </script>
    <button onMouseOver="changeImage('images/design/minus.gif');" onMouseOut="changeImage('images/design/plus.gif');" type="button" style="background: transparent; border: none;"><div id="button" style="background: url(images/design/plus.gif) no-repeat center;">Push Me</div></button>
     
  8. ExtremeRuff

    ExtremeRuff Гость

    Да какие обиды! У меня що вопрос - мона ли сделать бэкграунд градиентом, допустим что бы сверху в низ плавно переливался из синего в красный? Или тут мона только вставить в бэкграунд картинку, заставить ее повторяться только по горизонтали, а цвет бэкграунда задать как конечный цвет... в нашем случае красный? ;)
     
  9. Andrew Stephanoff

    Andrew Stephanoff Гость

    извиняюсь за предыдущий пост, проблем решалась проще :)
    Код (Text):
    <style type="text/css">
    input#btnPush {
       background-image: url(images/design/plus.gif);
       background-repeat: no-repeat;
       background-position: left;
       border: 0;
       background-color: transparent;
       margin: 0;
       padding: 0;
    }
    </style>
    <script language="JavaScript">
    function changeImage(url) {
       btnPush = document.getElementById("btnPush");
       btnPush.style.backgroundImage = "url(" + url + ")";
       btnPush.style.backgroundRepeat = "no-repeat";
    }
    </script>
    <input
       type="button"
       value="Push Me"
       id="btnPush"
       onMouseOver="changeImage('images/design/minus.gif');"
       onMouseOut="changeImage('images/design/plus.gif');"
    />
    а по поводу градиента -- вроде можно через фильтры сделать, но лучше сделать в Фотошопе однопиксельную вериткальную линию требуемой высоты с градиентом и размножить ее по горизонтали
     
  10. ExtremeRuff

    ExtremeRuff Гость

    СПАСИБА, вот это - вижу решение задачи )))

    Так размножить то её не вопрос, но при 800*600 она допустим будет будет не вся помещаться при том если в 1024*768 - будет самый раз.

    А что за чудо фильтры ? Это из DOM ?
     
  11. Andrew Stephanoff

    Andrew Stephanoff Гость

    фильтры поддерживает только IE, это его фишка, так сказать
     
  12. ExtremeRuff

    ExtremeRuff Гость

    А не поделишься какой нить ЛИНКОЙ на эти фильтры, почитать? ;)
    А можна при помощи пхп определить брузверя? Может по заголовкам? :)
     
  13. Andrew Stephanoff

    Andrew Stephanoff Гость

    поделюсь с радостью :)
    msdn.microsoft.com
    а еще есть сайт
    w3c.org
    тоже много полезного
    ;)
    а при помощи php ты тип браузера не определишь, только при помощи javaScript
     
  14. ExtremeRuff

    ExtremeRuff Гость

    МЕГА ВОПРОС!

    Вот когда делаю чтобы бэкграунд изменялся по наведении на кнопку - то когда сайт в инете - сильно тормазит смена картинок... я даже сделал в конце страницы этукартинку вот так
    Код (Text):
    <img src=".$path_to_site."/images/knopa2.gif style=display:none;>
    Но всё равно очень медленно, даже когда картинка уже паказывалась. Как быть? :)
     
  15. Andrew Stephanoff

    Andrew Stephanoff Гость

    подгружай картинки заранее
     
  16. Guest_ExtremeRuff_*

    Guest_ExtremeRuff_* Гость

    Ну я не знаю тормазит тут и всё. причём как при смене бэкграунда так и при его возврате, .... под эксплорером... а нету что тчо типа пролоада?... мне кажется что я где то такое видел. :unsure:
     
  17. ExtremeRuff

    ExtremeRuff Гость

    Придумал такую вещ - делаю бэкграунд в одной кортинке, а при наведении мышки заставляю его сьезжать вверх, допустим вот таким спосабом -

    Код (Text):
    .td_bg{
    background: url(./images/knopa1.jpg);
    vertical-align: middle;
    background-repeat:no-repeat;
    height: 23px;
    }
    .td_bg:hover{
    background-position: 0px -35px;

    }
    Так ёлки палки - работает только в Опере, как заставить эксплорер понять меня? B)
     
  18. Andrew Stephanoff

    Andrew Stephanoff Гость

    а вот :hover будет работать в IE только для <a> надо в событие onMouseOver прописать изменение стиля типа this.className = ".."
     
Загрузка...
Статус темы:
Закрыта.

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