Ох этот Javascript

[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:

 

[Guest]

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

 

[ExtremeRuff]

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

 

[Andrew Stephanoff]

а если кнопку делать как

<input type="image" id="btnStart" src="image.png" />

и менять как у картинки урл

 

[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>

Пример я вылажил тут -

Ссылка скрыта от гостей

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

 

[Andrew Stephanoff]

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

<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>

 

[ExtremeRuff]

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

 

[Andrew Stephanoff]

извиняюсь за предыдущий пост, проблем решалась проще

<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');"
/>

а по поводу градиента -- вроде можно через фильтры сделать, но лучше сделать в Фотошопе однопиксельную вериткальную линию требуемой высоты с градиентом и размножить ее по горизонтали

 

[ExtremeRuff]

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

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

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

 

[Andrew Stephanoff]

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

 

[ExtremeRuff]

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

 

[Andrew Stephanoff]

поделюсь с радостью

Ссылка скрыта от гостей

а еще есть сайт

Ссылка скрыта от гостей

тоже много полезного

а при помощи php ты тип браузера не определишь, только при помощи javaScript

 

[ExtremeRuff]

МЕГА ВОПРОС!

Вот когда делаю чтобы бэкграунд изменялся по наведении на кнопку - то когда сайт в инете - сильно тормазит смена картинок... я даже сделал в конце страницы этукартинку вот так

<img src=".$path_to_site."/images/knopa2.gif style=display:none;>

Но всё равно очень медленно, даже когда картинка уже паказывалась. Как быть?

 

[Andrew Stephanoff]

подгружай картинки заранее

 

[Guest_ExtremeRuff_*]

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

 

[ExtremeRuff]

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

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

}

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

 

[Andrew Stephanoff]

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