Класс для элемента с событием onclick

slepoy

Давно я тут
753
24 / 0
Тотальная шизофазия

Класс для элемента с событием onclick

« : 09.07.2011, 00:57:29 »

Здравствуйте. На сайте http://crimson-land.ru/ справа от верхнего меню есть "лупа", кнопка поиска, нажав на которую откроется mod_search.
Для этой кнопки-лупы я не могу подобрать class / id (выяснить его имя), который бы задавал ей стиль в то время, как отображается mod_search. Привожу кусок кода:

Цитировать

<script type="text/javascript">
function showhide(id)
{
if(document.getElementById(id).style.display=='none') {
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
return false;
}
</script>

<div id="ts" onclick="showhide('container')"><img src="templates/crimson-land5/images/spacer.gif" width="30" height="30" alt="Поиск" title="Поиск" /></div>
<div id="container" style="display:none;"><jdoc:include type="modules" name="search" /></div>

В CSS файле:

Цитировать

#ts{
display:block;
float: right;
height:30px;
width:40px;
margin:3px 5px 0 0;
background: url(./images/s.png) no-repeat center;
}
#не известный id{
background: url(./images/sh.gif) #F9F9F9 no-repeat center;
-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0;
}

Бкз проблем получается сделать hover, но это не совсем то, что нужно т.к. как только курсор отводится в сторону от "лупы", стиль пропадает.
Хочу, чтобы в результате выглядело примерно как на картинке:

Какие есть варианты?
Спасибо.

Записан

Помог? Поставь(те) плюс в репутацию.

wfedin

Завсегдатай
1273
102 / 0

Re: Класс для элемента с событием onclick

« Ответ #1 : 09.07.2011, 01:23:09 »

Не нето

Упс уже готово.

« Последнее редактирование: 09.07.2011, 01:31:47 от wfedin »

Записан

Не дорогой качественный хостинг с высоким аптаймом

Русский для EasyCalcCheck PLUS Русский для JotCache Русский для JCH Optimize PRO Русский для JBETOLO Модуль Обратный звонок

slepoy

Давно я тут
753
24 / 0
Тотальная шизофазия

Re: Класс для элемента с событием onclick

« Ответ #2 : 09.07.2011, 01:27:13 »

Да, я привел фрагмент выше. А "#не известный id" (в CSS файле он пока обозначен как #ts.active) такого содержания:

Цитировать

background: url(./images/sh.gif) #F9F9F9 no-repeat center;
-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0;

Записан

Помог? Поставь(те) плюс в репутацию.

varX

Живу я здесь
2467
141 / 5
разработка компонентов

Re: Класс для элемента с событием onclick

« Ответ #3 : 09.07.2011, 01:28:44 »

Код: javascript

function showhide(id)
{
if(document.getElementById(id).style.display=='none') {
document.getElementById(id).style.display = 'block';
document.getElementById('ts').style.background = 'url(./images/sh.gif) #F9F9F9 no-repeat center';
} else {
document.getElementById(id).style.display = 'none';
document.getElementById('ts').style.background = 'url("./images/s.png") no-repeat scroll center center transparent';
}
return false;
}

Записан

Разработка и ремонт. VirtueMart. JoomShopping. Свои компоненты. Принимаю заявки на plasma-web.ru.

slepoy

Давно я тут
753
24 / 0
Тотальная шизофазия

Re: Класс для элемента с событием onclick

« Ответ #4 : 09.07.2011, 01:49:00 »

lcd25, спасибо. При 'block' отображается цвет фона #F9F9F9, а sh.gif - нет (хотя изображение присутствует на сервере). При первом клике в фоне по-прежнему отображается s.png, а при повторных (без перезагрузки страницы) - ничего.
Еще нужно добавить для фона при клике:

Цитировать

-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0;

Нужно будет указать по аналогии?

Код

document.getElementById('ts').style.background = 'border-radius:10px 10px 0 0';'-moz-border-radius:10px 10px 0 0';'-webkit-border-radius:10px 10px 0 0';

?
Это все нельзя скрыть в CSS? Чтобы после клика отображался какой-нибудь #tsh, а при повторном - снова #ts. Спасибо.

Записан

Помог? Поставь(те) плюс в репутацию.

Lex

Завсегдатай
1615
274 / 1

Re: Класс для элемента с событием onclick

« Ответ #5 : 09.07.2011, 01:52:36 »

document.getElementById(id).setAttribute("class", "myClass");

Записан

Жизнь заставила учиться.
В личке на вопросы не отвечаю.

slepoy

Давно я тут
753
24 / 0
Тотальная шизофазия

Re: Класс для элемента с событием onclick

« Ответ #6 : 09.07.2011, 02:21:13 »

Цитата: Lex от 09.07.2011, 01:52:36

document.getElementById(id).setAttribute("class", "myClass");

Сделал, но вышло как-то не так:

Код

<script type="text/javascript">
function showhide(id)
{
if(document.getElementById(id).style.display=='none') {
    document.getElementById(id).style.display = 'block';
	document.getElementById(id).setAttribute("class", "tsh");
  } else {
    document.getElementById(id).style.display = 'none';
  }
  return false;
}
</script>

Код

.ts{
display:block;
float: right;
height:30px;
width:40px;
margin:3px 5px 0 0;
background: url(./images/s.png) no-repeat center;
}
.tsh{
background: url(./images/sh.gif) #F9F9F9 no-repeat center;
display:block;
float: right;
height:30px;
width:40px;
margin:3px 5px 0 0;
-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0;
}

Записан

Помог? Поставь(те) плюс в репутацию.

varX

Живу я здесь
2467
141 / 5
разработка компонентов

Re: Класс для элемента с событием onclick

« Ответ #7 : 09.07.2011, 02:42:08 »

Если нужен класс:

Код: javascript

function showhide(id) {
var a=document.getElementById(id);
	if(a.style.display=='none') {
		a.style.display = 'block';
		a.className ='tsh';
	} else {
		a.style.display = 'none';
		a.className ='ts';
	}
	return false;
}

Записан

Разработка и ремонт. VirtueMart. JoomShopping. Свои компоненты. Принимаю заявки на plasma-web.ru.

slepoy

Давно я тут
753
24 / 0
Тотальная шизофазия

Re: Класс для элемента с событием onclick

« Ответ #8 : 09.07.2011, 02:59:26 »

Спасибо. К сожалению, снова не вышло. Думаю из-за присутствия класса в div'е:

Код

<div class="ts" onclick="showhide('container')"><img src="templates/crimson-land5/images/spacer.gif" width="30" height="30" alt="Поиск" title="Поиск" /></div>

Создается впечатление, что ts и tsh в таком случаю применяются не к самой "лупе", а модулю поиска, у которого свой id

Код

div.search {
margin-right:5px;
height:30px;
float:right;
z-index:9999999;
background:#F9F9F9;
width:250px;
-moz-border-radius: 10px 0 10px 10px;-webkit-border-radius:10px 0 10px 10px;border-radius:10px 0 10px 10px;
-moz-box-shadow: 0px 2px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 2px 3px rgba(0,0,0,0.5);
box-shadow: 0px 2px 3px rgba(0,0,0,0.5);
z-index:9999999;
}

Записан

Помог? Поставь(те) плюс в репутацию.

varX

Живу я здесь
2467
141 / 5
разработка компонентов

Re: Класс для элемента с событием onclick

« Ответ #9 : 09.07.2011, 03:07:00 »

Конечно, у вас кнопка другой элемент совсем. Добавьте к ней id ('btn'), например, и обращайтесь к нему.

Код: javascript

function showhide(id) {
var a=document.getElementById(id);
var b=document.getElementById('btn');
	if(a.style.display=='none') {
		a.style.display = 'block';
		b.className ='tsh';
	} else {
		a.style.display = 'none';
		b.className ='sh';
	}
	return false;
}

Записан

Разработка и ремонт. VirtueMart. JoomShopping. Свои компоненты. Принимаю заявки на plasma-web.ru.

slepoy

Давно я тут
753
24 / 0
Тотальная шизофазия

Re: Класс для элемента с событием onclick

« Ответ #10 : 09.07.2011, 04:00:59 »

Для элемента

Код: html4strict

<div id="btn" onclick="showhide('container')"><img src="templates/crimson-land5/images/spacer.gif" width="30" height="30" alt="Поиск" title="Поиск" /></div>

до клика на выходе получается так:

Код: html4strict

<div id="btn" onclick="showhide('container')">

После первого клика:

Код: html4strict

<div id="btn" onclick="showhide('container')" class="tsh">

После второго:

Код: html4strict

<div id="btn" onclick="showhide('container')" class="ts">

при javascript'е

Код: javascript

function showhide(id) {
var a=document.getElementById(id);
var b=document.getElementById('btn');
	if(a.style.display=='none') {
		a.style.display = 'block';
		b.className ='tsh';
	} else {
		a.style.display = 'none';
		b.className ='ts';
	}
	return false;

}и стилях:

Код: css

.ts, #btn{
display:block;
float: right;
height:30px;
width:40px;
margin:3px 5px 0 0;
background: url(./images/s.png) no-repeat center;
}
.tsh{
background: url(./images/sh.gif) #F9F9F9 no-repeat center;
display:block;
float: right;
height:30px;
width:40px;
margin:3px 5px 0 0;
-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0;
}

т.е. нужно каким-то образом после 1 и последующих нажатий по кнопке избавиться от id="btn"?

Записан

Помог? Поставь(те) плюс в репутацию.

varX

Живу я здесь
2467
141 / 5
разработка компонентов

Re: Класс для элемента с событием onclick

« Ответ #11 : 09.07.2011, 12:02:30 »

А зачем #btn в таблицу стилей то засовывать?

Записан

Разработка и ремонт. VirtueMart. JoomShopping. Свои компоненты. Принимаю заявки на plasma-web.ru.

slepoy

Давно я тут
753
24 / 0
Тотальная шизофазия

Re: Класс для элемента с событием onclick

« Ответ #12 : 09.07.2011, 13:20:03 »

Спасибо. Удалил #btn из css-файла. Заработало. Но до первого клика фон, который отображается под кнопкой (кнопка - это прозрачное изображение 1х1px, а фон и представляет из себя изображение лупы), не отображается.
Возможно тогда стоит переделать саму кнопку - сделать не прозрачной, а лупой. Но как добавить замену самой кнопки при первом клике?

« Последнее редактирование: 09.07.2011, 14:12:52 от slepoy »

Записан

Помог? Поставь(те) плюс в репутацию.

Выбрать 3 элемента через 3 Автор Forgiving	Ответов: 7 Просмотров: 1301	21.05.2020, 12:00:43 от sivers
Как сделать отступ от абсолютного элемента? Автор wishlight	Ответов: 6 Просмотров: 2869	20.04.2019, 00:06:28 от dmitry_stas
Вывод элемента :after в одной строке с последним словом Автор lalalag	Ответов: 3 Просмотров: 1661	15.06.2017, 16:38:35 от Shustry
Как поменять CSS класс кнопки «Подробнее»в шаблоне? Автор shrek_01	Ответов: 2 Просмотров: 2387	23.12.2016, 20:03:43 от shrek_01
[FAQ] CSS-класс страницы Автор Orion	Ответов: 87 Просмотров: 67087	07.09.2016, 13:00:21 от Shustry

Класс для элемента с событием onclick - Вопросы по CSS

Новости Joomla

Новогодние скидки от Nevigen.com

Astroid обновился до версии 3.3.7!

Как тестировать Joomla PHP-разработчику? Компонент Patch tester.

slepoy

Класс для элемента с событием onclick

wfedin

Re: Класс для элемента с событием onclick

slepoy

Re: Класс для элемента с событием onclick

varX

Re: Класс для элемента с событием onclick

slepoy

Re: Класс для элемента с событием onclick

Lex

Re: Класс для элемента с событием onclick

slepoy

Re: Класс для элемента с событием onclick

varX

Re: Класс для элемента с событием onclick

slepoy

Re: Класс для элемента с событием onclick

varX

Re: Класс для элемента с событием onclick

slepoy

Re: Класс для элемента с событием onclick

varX

Re: Класс для элемента с событием onclick

slepoy

Re: Класс для элемента с событием onclick

Похожие темы