Ох этот Javascript

  • Автор темы ExtremeRuff
  • Дата начала
Статус
Закрыто для дальнейших ответов.
E

ExtremeRuff

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

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

Guest

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

ExtremeRuff

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

Andrew Stephanoff

Гость
#4
а если кнопку делать как
Код:
<input type="image" id="btnStart" src="image.png" />
и менять как у картинки урл
 
E

ExtremeRuff

Гость
#6
Так всё хорошо вот допустим что имеем -
<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

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

Andrew Stephanoff

Гость
#7
ты только не обижайся, но создание кнопки через таблицу напоминает удаление гландов через задний проход ;)
Код:
<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>
 
E

ExtremeRuff

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

Andrew Stephanoff

Гость
#9
извиняюсь за предыдущий пост, проблем решалась проще :)
Код:
<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');"
/>
а по поводу градиента -- вроде можно через фильтры сделать, но лучше сделать в Фотошопе однопиксельную вериткальную линию требуемой высоты с градиентом и размножить ее по горизонтали
 
E

ExtremeRuff

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

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

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

Andrew Stephanoff

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

ExtremeRuff

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

Andrew Stephanoff

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

ExtremeRuff

Гость
#14
МЕГА ВОПРОС!

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

Guest_ExtremeRuff_*

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

ExtremeRuff

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

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

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

Andrew Stephanoff

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