помогите со скриптом - Веб-программирование

Reebok · 20.01.2005, 13:58

В web-программировании полный чайник. На диплом делаю сайт. И необходим скрипт, позволяющий при наведении мыши на пункт меню отображал бы справа от него небольшой прямоугольник. На изображении в аттаче прямоугольники показаны у всех кнопок.
Вот. А ещё скрипт, кот. слева от активного пункта меня(в кот. нахожусь в данный момент) отображал бы тоже картинку.
Посоветуйте. Искал в двух коллекциях, но описания там к скриптам больно короткие. Спасибо.

Ghost · 20.01.2005, 14:09

Reebok
Вставь слева и справа от пунктов меню прозрачные рисунки, и сделай для них (пунктов меню) обработчики OnMouseOver - замена этих рисунков на нужные, и OnMouseOut - возврат прозрачных рисунков.

З.Ы. Посмотри еще вот это: http://imho.ws/showthread.php?p=732815#post732815

З.З.Ы. Можешь сделать через CSS: создать класс для пуктов меню, и для него описать A и A:HOVER. Вот, например:

Код HTML:

<HTML>
<HEAD>
<STYLE>
.mydiv { background-color: #C02020; }
a .mydiv { background-color: #20C020; }
a:hover .mydiv { background-color: #2020C0; }
</STYLE>
</HEAD>
<BODY>
<A HREF="#"><DIV CLASS="mydiv">menuitem1</DIV></A>
<DIV CLASS="mydiv">menuitem2</DIV>
<A HREF="#"><DIV CLASS="mydiv">menuitem3</DIV></A>
</BODY></HTML>

Соответственно, тебе нужно будет использовать в стилях background-image.

Reebok · 20.01.2005, 14:15

Ghost
я наверное не так выразился по поводу "программирования и чайника", правильно сказать - это я вообще не видел явускрипт

за ссылку сеньк

Ghost · 20.01.2005, 14:28

Reebok
Все очень просто.

Например:

Код HTML:

<HTML>
<BODY>
<A
 onMouseOver="javascript:img1.src='rect.jpg';"
 onMouseOut="javascript:img1.src='empty.jpg';"
 HREF="#">menuitem1</A><IMG NAME="img1" SRC="empty.jpg">
</BODY>
</HTML>

Reebok · 21.01.2005, 15:04

большой пасиб, кое-как получилось, только вот строку

Код:

 HREF="#">menuitem1</A><IMG NAME="img1" SRC="empty.jpg">

нифига не понял.... если к примеру сама кнопка называется button.jpg и ссылается на index2.phpто как конструкция выглядеть будет ?

кстати, в php этот код менять как-нить надобно(в отличае от html) ?

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

Ghost · 21.01.2005, 15:21

Гыхм...
1. PHP генерирует HTML-код. Что ты в PHP-скрипте напишешь, то и будет передаваться браузеру HTML-странице.
2. Тоненька синяя линия подчеркивания появилась изза пробела(ми) перед тегом </A>. Либо убери их, либо вынеси за пределы блока <A>...</A>.
3. button.jpg - источник рисунка, а не имя элемента; имя задается в параметре NAME="..." (в моем примере - NAME="img1").
4. URL ссылки вставляется в параметр HREF тэга A. В своем примере я фактически поставил туда ссылку на текущую страницу (#). Тебе нужно заменить ее на index.php.
5. Если линк связан только с рисунком и не с чем более на странице, можно вместа тэга <A> использовать обработчик OnClick.
Теперь все вместе:

Код HTML:

<IMG SRC="button.jpg" NAME="img1"
 onMouseOver="javascript:img1.src='button_over.jpg';"
 onMouseOut="javascript:img1.src='button.jpg';"
 onClick="javascript:window.location='index.php';">

Reebok · 21.01.2005, 17:02

тьфу, сорри, всё из-за моей невнимательности ))
разобрался в обоих случаях. с самого начала не увидел, что объекту даётся имя img1, ну а потом этому объекту меняется картинка ))) в оьщем сделал конструкцией один, вот так:

Код HTML:

<A
 onMouseOver="javascript:red_stolbik.src='red.jpg';"
 onMouseOut="javascript:red_stolbik.src='pusto.gif';"
 HREF="index2.php"><IMG SRC="button.jpg"></A><IMG NAME="red_stolbik" SRC="pusto.gif">

в експловере обводка синяя видня, а в опере всё ОК

ещё вопрос можно ? как сделать так, чтобы при нажатии на кнопку открывалась ссылка, но там перед этой кнопкой стоял тоже прямоугольник... т.е. в общем то это можно бить и в структуру страницы php, но может и через яву как то можно ?

Ghost · 21.01.2005, 17:13

Reebok
Можно через яву - но это гемор - придется после загрузки страницы сканить массив ссылок и 1. удалять ненужную, 2. вставлять рядом с соответсвующей ссылкой ентот твой прямоугольник... Лучше в ПХП. Т.е. сразу формировать страницу без ссылки на пункте меню и с нужным рисунком.

Reebok · 21.01.2005, 17:20

пнятно, будем через пхп... а по поводу обводки синей в экспловере?

Ghost · 21.01.2005, 17:26

У рисунков? Поставь на них параметр BORDER="0":

Код HTML:

<IMG SRC="..." BORDER="0">

Reebok · 21.01.2005, 17:32

кул )))
вот чего получилось http://daband.nm.ru/java/
попозджя слева буду делать

20.01.2005, 14:09	# 2
Ghost ::VIP:: Звезда первого сезона Молчун-2004 Регистрация: 24.08.2002 Сообщения: 1 575	Reebok Вставь слева и справа от пунктов меню прозрачные рисунки, и сделай для них (пунктов меню) обработчики OnMouseOver - замена этих рисунков на нужные, и OnMouseOut - возврат прозрачных рисунков. З.Ы. Посмотри еще вот это: http://imho.ws/showthread.php?p=732815#post732815 З.З.Ы. Можешь сделать через CSS: создать класс для пуктов меню, и для него описать A и A:HOVER. Вот, например: Код HTML: <HTML> <HEAD> <STYLE> .mydiv { background-color: #C02020; } a .mydiv { background-color: #20C020; } a:hover .mydiv { background-color: #2020C0; } </STYLE> </HEAD> <BODY> <A HREF="#"><DIV CLASS="mydiv">menuitem1</DIV></A> <DIV CLASS="mydiv">menuitem2</DIV> <A HREF="#"><DIV CLASS="mydiv">menuitem3</DIV></A> </BODY></HTML> Соответственно, тебе нужно будет использовать в стилях background-image. __________________ Действовать надо тупо и это лучшее доказательство нашей чистоты и силы! Последний раз редактировалось Ghost; 20.01.2005 в 14:21. Причина: склероZzz...

20.01.2005, 14:15	# 3
Reebok Member Регистрация: 14.08.2002 Сообщения: 317	Ghost я наверное не так выразился по поводу "программирования и чайника", правильно сказать - это я вообще не видел явускрипт за ссылку сеньк __________________ ...она была прекрасно сложена, только рука её торчала из чемодана

20.01.2005, 14:28	# 4
Ghost ::VIP:: Звезда первого сезона Молчун-2004 Регистрация: 24.08.2002 Сообщения: 1 575	Reebok Все очень просто. Например: Код HTML: <HTML> <BODY> <A onMouseOver="javascript:img1.src='rect.jpg';" onMouseOut="javascript:img1.src='empty.jpg';" HREF="#">menuitem1</A><IMG NAME="img1" SRC="empty.jpg"> </BODY> </HTML> __________________ Действовать надо тупо и это лучшее доказательство нашей чистоты и силы!

21.01.2005, 15:04	# 5
Reebok Member Регистрация: 14.08.2002 Сообщения: 317	большой пасиб, кое-как получилось, только вот строку Код: HREF="#">menuitem1</A><IMG NAME="img1" SRC="empty.jpg"> нифига не понял.... если к примеру сама кнопка называется button.jpg и ссылается на index2.phpто как конструкция выглядеть будет ? кстати, в php этот код менять как-нить надобно(в отличае от html) ? когда сделал, то получилось что между картинками стояла тонеькая синяя линия подчёркивания... мне нужно чтобы сразу после одной картинки шла вторая, т.е. не пропуская ни одного пиксела __________________ ...она была прекрасно сложена, только рука её торчала из чемодана

21.01.2005, 15:21	# 6
Ghost ::VIP:: Звезда первого сезона Молчун-2004 Регистрация: 24.08.2002 Сообщения: 1 575	Гыхм... 1. PHP генерирует HTML-код. Что ты в PHP-скрипте напишешь, то и будет передаваться браузеру HTML-странице. 2. Тоненька синяя линия подчеркивания появилась изза пробела(ми) перед тегом </A>. Либо убери их, либо вынеси за пределы блока <A>...</A>. 3. button.jpg - источник рисунка, а не имя элемента; имя задается в параметре NAME="..." (в моем примере - NAME="img1"). 4. URL ссылки вставляется в параметр HREF тэга A. В своем примере я фактически поставил туда ссылку на текущую страницу (#). Тебе нужно заменить ее на index.php. 5. Если линк связан только с рисунком и не с чем более на странице, можно вместа тэга <A> использовать обработчик OnClick. Теперь все вместе: Код HTML: <IMG SRC="button.jpg" NAME="img1" onMouseOver="javascript:img1.src='button_over.jpg';" onMouseOut="javascript:img1.src='button.jpg';" onClick="javascript:window.location='index.php';"> __________________ Действовать надо тупо и это лучшее доказательство нашей чистоты и силы!

21.01.2005, 17:02	# 7
Reebok Member Регистрация: 14.08.2002 Сообщения: 317	тьфу, сорри, всё из-за моей невнимательности )) разобрался в обоих случаях. с самого начала не увидел, что объекту даётся имя img1, ну а потом этому объекту меняется картинка ))) в оьщем сделал конструкцией один, вот так: Код HTML: <A onMouseOver="javascript:red_stolbik.src='red.jpg';" onMouseOut="javascript:red_stolbik.src='pusto.gif';" HREF="index2.php"><IMG SRC="button.jpg"></A><IMG NAME="red_stolbik" SRC="pusto.gif"> в експловере обводка синяя видня, а в опере всё ОК ещё вопрос можно ? как сделать так, чтобы при нажатии на кнопку открывалась ссылка, но там перед этой кнопкой стоял тоже прямоугольник... т.е. в общем то это можно бить и в структуру страницы php, но может и через яву как то можно ? __________________ ...она была прекрасно сложена, только рука её торчала из чемодана Последний раз редактировалось Reebok; 21.01.2005 в 17:17.

21.01.2005, 17:13	# 8
Ghost ::VIP:: Звезда первого сезона Молчун-2004 Регистрация: 24.08.2002 Сообщения: 1 575	Reebok Можно через яву - но это гемор - придется после загрузки страницы сканить массив ссылок и 1. удалять ненужную, 2. вставлять рядом с соответсвующей ссылкой ентот твой прямоугольник... Лучше в ПХП. Т.е. сразу формировать страницу без ссылки на пункте меню и с нужным рисунком. __________________ Действовать надо тупо и это лучшее доказательство нашей чистоты и силы!

21.01.2005, 17:20	# 9
Reebok Member Регистрация: 14.08.2002 Сообщения: 317	пнятно, будем через пхп... а по поводу обводки синей в экспловере? __________________ ...она была прекрасно сложена, только рука её торчала из чемодана

21.01.2005, 17:26	# 10
Ghost ::VIP:: Звезда первого сезона Молчун-2004 Регистрация: 24.08.2002 Сообщения: 1 575	У рисунков? Поставь на них параметр BORDER="0": Код HTML: <IMG SRC="..." BORDER="0"> __________________ Действовать надо тупо и это лучшее доказательство нашей чистоты и силы!

21.01.2005, 17:32	# 11
Reebok Member Регистрация: 14.08.2002 Сообщения: 317	кул ))) вот чего получилось http://daband.nm.ru/java/ попозджя слева буду делать __________________ ...она была прекрасно сложена, только рука её торчала из чемодана

Опции темы
Версия для печати Отправить на email