Форум PHP программистов > Кнопки навигации

[ Поиск ] - [ Пользователи ] - [ Календарь ]

nugle

20.03.2011 - 19:31

На сайте fiesta-2000.com есть кнопки сверху, при наведении они меняют свой цвет, осуществил я это на jquery, но этот процесс работает после второго подведения мыши вот код


$('#top_but img').mouseover(function(){
	id = $(this).attr('id');
		
	if(id == 'index'){i=1}
	if(id == 'about_us'){i=2}
	if(id == 'services'){i=3}
	if(id == 'articles'){i=4}
	if(id == 'contact'){i=5}
	
	$("#" + id).mouseover(function(){
		$(this).attr("src", "../images/button/but_2/but" + i + ".jpg");
	}).mouseout(function(){
		$(this).attr("src", "../images/button/but_1/but" + i + ".jpg");
		
	}).mousedown(function(){
		$(this).attr("src", "../images/button/but_3/but" + i + ".jpg");
	}).mouseup(function(){
		$(this).attr("src", "../images/button/but_2/but" + i + ".jpg");
	})

	
	
	})

А вот код вывода

<div align="center" id="top_but">
    <a href="../index.php"><img src="../images/button/but_1/but1.jpg" id="index"/></a>
    <a href="../about_us.php"><img src="../images/button/but_1/but2.jpg" id="about_us"/></a>
    <img src="../images/button/but_1/but3.jpg" id="services" />
    <a href="../articles.php"><img src="../images/button/but_1/but4.jpg" id="articles" /></a>
    <a href="../contact.php"><img src="../images/button/but_1/but5.jpg" id="contact" /></a>
    </div>

Спустя 5 минут, 36 секунд (20.03.2011 - 18:36) Lenarfate написал(а):

во-первых, вообще не работает. во-вторых, зачем тут js, а тем более jquery. используй css свойство hover. http://htmlbook.ru/css/hover

Спустя 12 минут, 5 секунд (20.03.2011 - 18:48) nugle написал(а):

Lenarfate,работает но надо подождать

спасибо сейчас почитаю, а для нажатия какое свойство?

Спустя 3 минуты, 24 секунды (20.03.2011 - 18:52) Lenarfate написал(а):

Цитата

а для нажатия какое свойство?

не помню, вроде :active

Спустя 2 минуты, 14 секунд (20.03.2011 - 18:54) nugle написал(а):

Lenarfate
там не написано для картинок, пробую так
#index:hover{src:../images/button/but_1/but1.jpg}, но не выходит
и так
#index:hover{baclground:url(../images/button/but_2/but1.jpg)}, тоже не получается

Спустя 4 минуты, 18 секунд (20.03.2011 - 18:58) Lenarfate написал(а):

тут есть на js. там буквально пару строк http://scriptic.ru/push/img-button.shtml

Спустя 7 минут, 39 секунд (20.03.2011 - 19:06) nugle написал(а):

Lenarfate, вы противоречите сами себе!
вначале зачем js, надо css
теперь вот посмотрите на js

Спустя 1 минута, 33 секунды (20.03.2011 - 19:08) Lenarfate написал(а):

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

Спустя 1 минута, 13 секунд (20.03.2011 - 19:09) Lenarfate написал(а):

#div:hover {
   background: url(images/about_over.gif) no-repeat;
}

должно и безотказно

Спустя 4 минуты, 33 секунды (20.03.2011 - 19:13) nugle написал(а):

делаю так

a.index{background:url(images/button/but_1/but1.jpg); width:82; height:32;  }
a.index:hover{background:url(images/button/but_2/but1.jpg) no-repeat;}

Ниче не выводит, в консоле вот такая ошибка

Uncaught ReferenceError: MM_preloadImages is not defined

Спустя 3 минуты, 55 секунд (20.03.2011 - 19:17) Lenarfate написал(а):

в консоле ошибка jquery. а на счет css не знаю, может с путями чего не верно

Спустя 7 минут, 9 секунд (20.03.2011 - 19:24) nugle написал(а):

и с путями верно, и с JQ ошибок нет!

Спустя 1 минута, 37 секунд (20.03.2011 - 19:26) inpost написал(а):

nugle
Ты на 99% просто с путями попутал. Попробуй воспользоваться <base> и давай пути относительно этого каталога.

Спустя 6 минут, 46 секунд (20.03.2011 - 19:33) nugle написал(а):

ошибку убрал, поставил base по каталогу где лежит сайт, всё равно, одно и тоже!нету картинки!

Спустя 3 минуты, 49 секунд (20.03.2011 - 19:37) inpost написал(а):

nugle
Дай абсолютный путь до картинки: http://site.ru/img/pic.jpg

Спустя 3 минуты, 39 секунд (20.03.2011 - 19:40) nugle написал(а):

да чё такое?да же так не хочет, может че не правильно я делаю?

a.index{background:url(http://fiesta.ru/images/button/but_1/but1.jpg); width:82; height:32;  }
a.index:hover{background:url(http://fiesta.ru/images/button/but_2/but1.jpg) no-repeat;}
a.index:active{background:url(http://fiesta.ru/images/button/but_3/but1.jpg) no-repeat;}

<a href="../index.php" class="index"> </a>

Спустя 2 минуты, 55 секунд (20.03.2011 - 19:43) inpost написал(а):

background-image:url(1.jpg);

Спустя 1 минута, 36 секунд (20.03.2011 - 19:45) inpost написал(а):

<div class="megaurl"><a></a></div>

.megaurl a {background-image:url(1.jpg);}
.megaurl a:hover {background-image:url(2.jpg);}

Спустя 34 минуты, 18 секунд (20.03.2011 - 20:19) nugle написал(а):

inpost
и так не получается

Быстрый ответ:

Здесь расположена полная версия этой страницы.