"регулятор громкости"

Tokolist · July 28, 2007

Собственно началось все отсюда

http://forum.htmlbook.ru/index.php?showtopic=4887

Создал препреальфу подобного на одном CSS, просто чтобы показать такую возможность

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {
 margin: 0;
 padding: 0;
}

a {
 display: block;
 left: 0;
 top: 0;
 position: absolute;
 text-decoration: none;
 border: 1px solid #000;
 height: 25px;
 font-size: 1px;
 line-height: 0;
}

#a1 {
 z-index: 4;
 width: 25px;
}

#a2 {
 z-index: 3;
 width: 50px;
}

#a3 {
 z-index: 2;
 width: 75px;
}

#a4 {
 z-index: 1;
 width: 100px;
}

#a1:hover, #a2:hover, #a3:hover, #a4:hover {
 background: #f00;
}
</style>
</head>
<body>
<div>
<a href="#" id="a1"> </a>
<a href="#" id="a2"> </a>
<a href="#" id="a3"> </a>
<a href="#" id="a4"> </a>
</div>
</body>

Есть проблема: глюки в одном замечательном браузере. Да, правильно, вы угадали в каком . Там работает только ее уменьшение.

kiD · July 28, 2007

прикольно!

для ИЕ

a {
display: block;
left: 0;
top: 0;
position: absolute;
text-decoration: none;
border: 1px solid #000;
height: 25px;
text-align: right;
line-height: 25px;
letter-spacing: 25px;
}

<div>
<a href="#" id="a1"> </a>
<a href="#" id="a2">  </a>
<a href="#" id="a3">  </a>
<a href="#" id="a4">  </a>
</div>

yopopt · July 28, 2007

Да, прикольно.

А вот и мой вариант для ИЕ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {
 margin: 0;
 padding: 0;
}

a {
 left: 0;
 top: 0;
 position: absolute;
 text-decoration: none;
 border: 1px solid #000;
 height: 25px;
 width: 25px;
 font-size: 25px;
}

#a1 {
 z-index: 4;
}

#a2 {
 z-index: 3;
 padding-left:25px;
}

#a3 {
 z-index: 2;
 padding-left:50px;
}

#a4 {
 z-index: 1;
 padding-left:75px;
}

#a1:hover, #a2:hover, #a3:hover, #a4:hover {
 background: #f00;
}
</style>
</head>
<body>
<div>
<a href="#" id="a1"> </a>
<a href="#" id="a2"> </a>
<a href="#" id="a3"> </a>
<a href="#" id="a4"> </a>
</div>
</body>

kiD · July 28, 2007

yopopt +1

kiD -1

ARA · July 29, 2007

Круто!!!!))

Tokolist · July 29, 2007

kiD, yopopt

Молодцы раскрыли мне глаза на мою ошибку или ошибку ИЕ

ARA

спасибо за моральную поддержку

yopopt

к твоему коду надо еще добавить

 overflow: hidden;

для a

теперь проблема в position: absolute

в некоторых случаях наш регулятор будет сложно интегрировать в страницу. Вот вариант с position: relative

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {
 margin: 0;
 padding: 0;
}

#volume {
 height: 27px;
 overflow: hidden;

 margin-left: 20%; /* for test only */
}

#volume a {
 display: block;
 position: relative;
 text-decoration: none;
 border: 1px solid #000;
 height: 25px;
 width: 25px;
 font-size: 25px;
 overflow: hidden;
}

#volume a.level1 {
 z-index: 4;
}

#volume a.level2 {
 top: -27px;
 z-index: 3;
 padding-left:25px;
}

#volume a.level3 {
 top: -54px;
 z-index: 2;
 padding-left:50px;
}

#volume a.level4 {
 top: -81px;
 z-index: 1;
 padding-left:75px;
 background: #0f0;
}

#volume a.level1:hover, #volume a.level2:hover, #volume a.level3:hover, #volume a.level4:hover {
 background: #f00;
}
</style>
</head>
<body>
<p>Welcome to the API documentation for Prototype. The left column contains the main sections. When you 
activate a section, its detailed contents then appears at the top of the column.
We are doing our best to provide you with current, clear, example-rich documentation. 
The goal here is that you should, when reading it, get the same warm, fuzzy feeling as we do 
when using Prototype :-)
The API documentation is a reference documentation. If you need to learn how to use Prototype, 
or to acquire skills in a particular feature area, have a look at the Learn section, which is 
accessible from the top of all pages (the ?Tips and Tutorials? link), and is also linked from 
the orange bar in all reference pages. Documentation in the Learn section is more narrative, 
tutorial-style.</p>
<div id="volume">
<a href="#" class="level1"> </a>
<a href="#" class="level2"> </a>
<a href="#" class="level3"> </a>
<a href="#" class="level4"> </a>
</div>
<p>Welcome to the API documentation for Prototype. The left column contains the main sections. When you 
activate a section, its detailed contents then appears at the top of the column.
We are doing our best to provide you with current, clear, example-rich documentation. 
The goal here is that you should, when reading it, get the same warm, fuzzy feeling as we do 
when using Prototype :-)
The API documentation is a reference documentation. If you need to learn how to use Prototype, 
or to acquire skills in a particular feature area, have a look at the Learn section, which is 
accessible from the top of all pages (the ?Tips and Tutorials? link), and is also linked from 
the orange bar in all reference pages. Documentation in the Learn section is more narrative, 
tutorial-style.</p>
</body>

попробуйте поизменяйте размеры окна

теперь наш "регулятор" можно разместить в "любом месте"

Есть еще одна идея для наращивания функциональности. Код выложу завтра.

kiD · July 29, 2007

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

Tokolist · July 29, 2007

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

Maslakoff · July 30, 2007

Молодцы. Так держать)

yopopt · July 30, 2007

yopopt
к твоему коду надо еще добавить
 overflow: hidden;
для a

Ага. Код стал универсальным. Ещ? неплохо бы вс? выровнять.

#volume a.level2 {
top: -27px;
z-index: 3;
padding-left:27px;
}
#volume a.level3 {
top: -54px;
z-index: 2;
padding-left:54px;
}
#volume a.level4 {
top: -81px;
z-index: 1;
padding-left:81px;
background: #0f0;
}

YETI · July 30, 2007

Собственно началось все отсюда
http://forum.htmlbook.ru/index.php?showtopic=4887

Я когда ту тему почитал тоже решил попробовать вот что вышло:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
b{
display:block;
height:20px;
width:100px;
padding-left: 50px;
background: url('pic1.gif') left center no-repeat;
}

b b{ 
display:block;
width:100px;
height:20px;
background: url('pic1.gif') left center no-repeat;
}

b:hover{
background: url('pic2.gif') left center no-repeat;
}
b:hover b:hover { 
background: url('pic2.gif') left center no-repeat;
}
</style>
</head>
<body>
<b>
 <b>
 <b> 
 <b>
 </b>
 </b>
 </b>
</b>
</body>
</html>

Картинки 40х20 но работает тока в ФФ и опере в ие вообще ничего не происходит.

Admin · July 30, 2007

Картинки 40х20 но работает тока в ФФ и опере в ие вообще ничего не происходит.

Потому что глупый ослик понимает :hover и др. только для .

Tokolist · July 30, 2007

yopopt

угу, точно. выровнял))

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {
 margin: 0;
 padding: 0;
}

#volume {
 height: 27px;
 overflow: hidden;
}

#volume a {
 display: block;
 position: relative;
 text-decoration: none;
 border: 1px solid #000;
 height: 25px;
 width: 25px;
 font-size: 25px;
 overflow: hidden;
}

#volume a.level1 {
 z-index: 4;
}

#volume a.level2 {
 top: -27px;
 z-index: 3;
 padding-left: 27px;
}

#volume a.level3 {
 top: -54px;
 z-index: 2;
 padding-left: 54px;
}

#volume a.level4 {
 top: -81px;
 z-index: 1;
 padding-left: 81px;
 background: #0f0;
}

#volume a.level1:hover, #volume a.level2:hover, #volume a.level3:hover, #volume a.level4:hover {
 background: #f00;
}
</style>
</head>
<body>
<div id="volume">
<a href="#" class="level1"> </a>
<a href="#" class="level2"> </a>
<a href="#" class="level3"> </a>
<a href="#" class="level4"> </a>
</div>
</body>

YETI

Продублирую djredshake. ИЕ понимает hover только для ссылок (вроде в седьмой уже исправили). можно сделать hover и для ИЕ через behavior, но это те же скрипты, а наша задача сделать усе без скриптов и кроссбраузерно. теги не могут быть вложенными друг в друга, поэтому и родился у меня такой вариант.

вместо b лучше использовать что-нибудь другое (например, div) ИМХО.

Была идея расширения функциональности: появление подсказки при наведении на каждый из квадратиков.

Хотел реализовать так

<a href="#" class="level1"><span>hint</span> </a>

и через

#volume a:hover span { }

показывать

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

yopopt · July 31, 2007

Не знаю в ч?м проблема, написал за пять минут.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {
 margin: 0;
 padding: 0;
}

#volume {
 height: 27px;
 overflow: hidden;
 margin-left: 20%; /* for test only */
}

#volume a {
 display: block;
 position: relative;
 text-decoration: none;
 border: 1px solid #000;
 height: 25px;
 width: 25px;
 font-size: 0;
}

#volume a.level1 {
 z-index: 4;
}

#volume a.level2 {
 top: -27px;
 z-index: 3;
 padding-left:27px;
}

#volume a.level3 {
 top: -54px;
 z-index: 2;
 padding-left:54px;
}

#volume a.level4 {
 top: -81px;
 z-index: 1;
 padding-left:81px;
 background: #0f0;
}

#volume a.level1:hover, #volume a.level2:hover, #volume a.level3:hover, #volume a.level4:hover {
 background: #f00;
}

#volume a span {
 display: none;
}
#volume a:hover span {
 position: absolute;
 left: 110px;
 display: block;
 font-size: 23px;
 color: #f00;
}

</style>
</head>
<body>
<p>Welcome to the API documentation for Prototype. The left column contains the main sections. When you 
activate a section, its detailed contents then appears at the top of the column.
We are doing our best to provide you with current, clear, example-rich documentation. 
The goal here is that you should, when reading it, get the same warm, fuzzy feeling as we do 
when using Prototype :-)
The API documentation is a reference documentation. If you need to learn how to use Prototype, 
or to acquire skills in a particular feature area, have a look at the Learn section, which is 
accessible from the top of all pages (the ?Tips and Tutorials? link), and is also linked from 
the orange bar in all reference pages. Documentation in the Learn section is more narrative, 
tutorial-style.</p>
<div id="volume">
<a href="#" class="level1"><span>hint1</span></a>
<a href="#" class="level2"><span>hint2</span></a>
<a href="#" class="level3"><span>hint3</span></a>
<a href="#" class="level4"><span>hint4</span></a>
</div>
<p>Welcome to the API documentation for Prototype. The left column contains the main sections. When you 
activate a section, its detailed contents then appears at the top of the column.
We are doing our best to provide you with current, clear, example-rich documentation. 
The goal here is that you should, when reading it, get the same warm, fuzzy feeling as we do 
when using Prototype :-)
The API documentation is a reference documentation. If you need to learn how to use Prototype, 
or to acquire skills in a particular feature area, have a look at the Learn section, which is 
accessible from the top of all pages (the ?Tips and Tutorials? link), and is also linked from 
the orange bar in all reference pages. Documentation in the Learn section is more narrative, 
tutorial-style.</p>
</body>

Tokolist · July 31, 2007

Проблема в моем невнимательном прочтении спецификации

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' other than 'static', in the following way...

а ведь там можно все переработать и сделать гораздо элегантнее

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {
 margin: 0;
 padding: 0;
}

#volume {
 position: relative;
 height: 27px;
 width: 108px;
 background: #0f0;

 margin-left: 20%; /* test */
}

#volume a {
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 text-decoration: none;
 border: 1px solid #000;
 height: 25px;
 width: 25px;
 font-size: 25px;
}

#volume a.level1 {
 z-index: 4;
}

#volume a.level2 {
 z-index: 3;
 padding-left: 27px;
}

#volume a.level3 {
 z-index: 2;
 padding-left: 54px;
}

#volume a.level4 {
 z-index: 1;
 padding-left: 81px;
}

#volume a.level1:hover, #volume a.level2:hover, #volume a.level3:hover, #volume a.level4:hover {
 background: #f00;
}

#volume a span {
 display: none;
}

#volume a:hover span {
 position: absolute;
 left: 110px;
 display: block;
 font-size: 23px;
 color: #f00;
}
</style>
</head>
<body>
<p>Welcome to the API documentation for Prototype. The left column contains the main sections. When you 
activate a section, its detailed contents then appears at the top of the column.
We are doing our best to provide you with current, clear, example-rich documentation. 
The goal here is that you should, when reading it, get the same warm, fuzzy feeling as we do 
when using Prototype :-)
The API documentation is a reference documentation. If you need to learn how to use Prototype, 
or to acquire skills in a particular feature area, have a look at the Learn section, which is 
accessible from the top of all pages (the ?Tips and Tutorials? link), and is also linked from 
the orange bar in all reference pages. Documentation in the Learn section is more narrative, 
tutorial-style.</p>
<div id="volume">
<a href="#" class="level1"><span>hint1</span></a>
<a href="#" class="level2"><span>hint2</span></a>
<a href="#" class="level3"><span>hint3</span></a>
<a href="#" class="level4"><span>hint4</span></a>
</div>
<p>Welcome to the API documentation for Prototype. The left column contains the main sections. When you 
activate a section, its detailed contents then appears at the top of the column.
We are doing our best to provide you with current, clear, example-rich documentation. 
The goal here is that you should, when reading it, get the same warm, fuzzy feeling as we do 
when using Prototype :-)
The API documentation is a reference documentation. If you need to learn how to use Prototype, 
or to acquire skills in a particular feature area, have a look at the Learn section, which is 
accessible from the top of all pages (the ?Tips and Tutorials? link), and is also linked from 
the orange bar in all reference pages. Documentation in the Learn section is more narrative, 
tutorial-style.</p>
</body>

yopopt · August 1, 2007

Проблема в моем невнимательном прочтении спецификации

А я подумал что был какой-то подвох, раз ты взялся переделывать с position:relative;.

Tokolist · August 3, 2007

stars.gif - http://slil.ru/24701049

stars.psd - http://slil.ru/24701056

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
<style type="text/css">
* {
 margin: 0;
 padding: 0;
}

#volume {
 position: relative;
 height: 25px;
 width: 100px;

 margin-left: 20%; /* test */
}

#volume a {
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 text-decoration: none;
 height: 25px;
 width: 25px;
 font-size: 25px;
}

#volume a.level1 {
 z-index: 4;
}

#volume a.level2 {
 z-index: 3;
 padding-left: 25px;
}

#volume a.level3 {
 z-index: 2;
 padding-left: 50px;
}

#volume a.level4 {
 z-index: 1;
 padding-left: 75px;
 background: url(stars.gif) 0 -25px no-repeat;
}

#volume a.level1:hover, #volume a.level2:hover, #volume a.level3:hover, #volume a.level4:hover {
 background: url(stars.gif) 0 0 no-repeat;
}

#volume a span {
 display: none;
}

#volume a:hover span {
 display: block;
 position: absolute;
 left: 110px;
 width: 150px;
 padding: 2px 0;

 border: 1px solid #000;
 background: #ffffe1;

 text-align: center;
 font-size: 20px;
 font-family: sans-serif;
 color: #000;
}
</style>
</head>
<body>
<p>Welcome to the API documentation for Prototype. The left column contains the main sections. When you 
activate a section, its detailed contents then appears at the top of the column.
We are doing our best to provide you with current, clear, example-rich documentation. 
The goal here is that you should, when reading it, get the same warm, fuzzy feeling as we do 
when using Prototype :-)
The API documentation is a reference documentation. If you need to learn how to use Prototype, 
or to acquire skills in a particular feature area, have a look at the Learn section, which is 
accessible from the top of all pages (the ?Tips and Tutorials? link), and is also linked from 
the orange bar in all reference pages. Documentation in the Learn section is more narrative, 
tutorial-style.</p>
<div id="volume">
<a href="#" class="level1"><span>Фтопку</span></a>
<a href="#" class="level2"><span>Низачод</span></a>
<a href="#" class="level3"><span>Зачод</span></a>
<a href="#" class="level4"><span>Нумляващще</span></a>
</div>
<p>Welcome to the API documentation for Prototype. The left column contains the main sections. When you 
activate a section, its detailed contents then appears at the top of the column.
We are doing our best to provide you with current, clear, example-rich documentation. 
The goal here is that you should, when reading it, get the same warm, fuzzy feeling as we do 
when using Prototype :-)
The API documentation is a reference documentation. If you need to learn how to use Prototype, 
or to acquire skills in a particular feature area, have a look at the Learn section, which is 
accessible from the top of all pages (the ?Tips and Tutorials? link), and is also linked from 
the orange bar in all reference pages. Documentation in the Learn section is more narrative, 
tutorial-style.</p>
</body>

yopopt · August 3, 2007

Версия 1.0?

MainFrame · August 6, 2007

А как доработать этот код, чтобы когда курсор был вне зоны показывалось несколько закрашеных звезд?

Tokolist · August 7, 2007

Версия 1.0?

неа, 0.9.9

А как доработать этот код, чтобы когда курсор был вне зоны показывалось несколько закрашеных звезд?

Хороший вопрос на засыпку

Придумал два варианта:

1. не элегантный и глючный (возможно после некоторой доработки он будет получше). Картинка используется та же, что и в предыдущем примере.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
<style type="text/css">
* {
 margin: 0;
 padding: 0;
}

#rating {
 position: relative;
 width: 100px;
 background: url(stars.gif) 0 -25px no-repeat;

 margin-left: 20%; /* test */
}

#rating, #rating a {
 height: 25px;
}

#rating a {
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 text-decoration: none;
 width: 22px;
 font-size: 25px;
}

#level1 {
 z-index: 4;
}

#level2 {
 z-index: 3;
 padding-left: 25px;
}

#level3 {
 z-index: 2;
 padding-left: 50px;
}

#level4 {
 z-index: 1;
 padding-left: 75px;
}

#rating a.current, #level1:hover, #level2:hover, #level3:hover, #level4:hover {
 background: url(stars.gif) 0 0 no-repeat;
}

/* HIDER */
#rating a span {
 display: none;
}

#rating a:hover span {
 display: block;
 position: absolute;
 top: 0;
 height: 25px;

 background: url(stars.gif) right -25px no-repeat;
}

#hider1 {
 width: 75px;
 left: 25px;
}

#hider2 {
 width: 50px;
 left: 50px;
}

#hider3 {
 width: 25px;
 left: 75px;
}
</style>
</head>
<body>
<p>Welcome to the API documentation for Prototype. The left column contains the main sections. When you 
activate a section, its detailed contents then appears at the top of the column.
We are doing our best to provide you with current, clear, example-rich documentation. 
The goal here is that you should, when reading it, get the same warm, fuzzy feeling as we do 
when using Prototype :-)
The API documentation is a reference documentation. If you need to learn how to use Prototype, 
or to acquire skills in a particular feature area, have a look at the Learn section, which is 
accessible from the top of all pages (the ?Tips and Tutorials? link), and is also linked from 
the orange bar in all reference pages. Documentation in the Learn section is more narrative, 
tutorial-style.</p>
<div id="rating">
<a href="#" id="level1"> <span id="hider1"> </span></a>
<a href="#" id="level2"> <span id="hider2"> </span></a>
<a href="#" id="level3" class="current"> <span id="hider3"> </span></a>
<a href="#" id="level4"> </a>
</div>
<p>Welcome to the API documentation for Prototype. The left column contains the main sections. When you 
activate a section, its detailed contents then appears at the top of the column.
We are doing our best to provide you with current, clear, example-rich documentation. 
The goal here is that you should, when reading it, get the same warm, fuzzy feeling as we do 
when using Prototype :-)
The API documentation is a reference documentation. If you need to learn how to use Prototype, 
or to acquire skills in a particular feature area, have a look at the Learn section, which is 
accessible from the top of all pages (the ?Tips and Tutorials? link), and is also linked from 
the orange bar in all reference pages. Documentation in the Learn section is more narrative, 
tutorial-style.</p>
</body>

2. более элегантный

stars2.gif - http://slil.ru/24712407

stars2.psd - http://slil.ru/24712413

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
<style type="text/css">
* {
 margin: 0;
 padding: 0;
}

#rating {
 position: relative;
 width: 100px;
 background: url(stars2.gif) 0 -25px no-repeat;

 margin-left: 20%; /* test */
}

#rating, #rating a, #rating div.current {
 height: 25px;
}

#rating a, #rating div.current {
 position: absolute;
 top: 0;
 left: 0;
}

#rating div.current {
 z-index: 1;
 width: 75px; /* current rating */
 background: url(stars2.gif) 0 -50px no-repeat;
}

#rating a {
 display: block;
 text-decoration: none;
 width: 25px;
 font-size: 25px;
}

#rating a.level1 {
 z-index: 5;
}

#rating a.level2 {
 z-index: 4;
 padding-left: 25px;
}

#rating a.level3 {
 z-index: 3;
 padding-left: 50px;
}

#rating a.level4 {
 z-index: 2;
 padding-left: 75px;
}

#rating a.level1:hover, #rating a.level2:hover, #rating a.level3:hover, #rating a.level4:hover {
 background: url(stars2.gif) 0 0 no-repeat;
}

#rating a span {
 display: none;
}

#rating a:hover span {
 display: block;
 position: absolute;
 left: 110px;
 width: 150px;
 padding: 2px 0;

 border: 1px solid #000;
 background: #ffffe1;

 text-align: center;
 font-size: 20px;
 font-family: sans-serif;
 color: #000;
}
</style>
</head>
<body>
<p>Welcome to the API documentation for Prototype. The left column contains the main sections. When you 
activate a section, its detailed contents then appears at the top of the column.
We are doing our best to provide you with current, clear, example-rich documentation. 
The goal here is that you should, when reading it, get the same warm, fuzzy feeling as we do 
when using Prototype :-)
The API documentation is a reference documentation. If you need to learn how to use Prototype, 
or to acquire skills in a particular feature area, have a look at the Learn section, which is 
accessible from the top of all pages (the ?Tips and Tutorials? link), and is also linked from 
the orange bar in all reference pages. Documentation in the Learn section is more narrative, 
tutorial-style.</p>
<div id="rating">
<div class="current"> </div>
<a href="#" class="level1"><span>Фтопку</span></a>
<a href="#" class="level2"><span>Низачод</span></a>
<a href="#" class="level3"><span>Зачод</span></a>
<a href="#" class="level4"><span>Нумляващще</span></a>
</div>
<p>Welcome to the API documentation for Prototype. The left column contains the main sections. When you 
activate a section, its detailed contents then appears at the top of the column.
We are doing our best to provide you with current, clear, example-rich documentation. 
The goal here is that you should, when reading it, get the same warm, fuzzy feeling as we do 
when using Prototype :-)
The API documentation is a reference documentation. If you need to learn how to use Prototype, 
or to acquire skills in a particular feature area, have a look at the Learn section, which is 
accessible from the top of all pages (the ?Tips and Tutorials? link), and is also linked from 
the orange bar in all reference pages. Documentation in the Learn section is more narrative, 
tutorial-style.</p>
</body>

Цветков Антон · August 7, 2007

Посмотрел код из первого сообщения - примерно додумался, о чем речь... Так не судьба ли открыть шаблон для DLE CMS и посмотреть, как там это реализовано? Там, вроде, как раз аналогичным образом выставляются оценки для статей (т.е. наводишь на одну из звезд - загораются все, что слева).

Tokolist · August 7, 2007

Посмотрел код из первого сообщения - примерно додумался, о чем речь... Так не судьба ли открыть шаблон для DLE CMS и посмотреть, как там это реализовано? Там, вроде, как раз аналогичным образом выставляются оценки для статей (т.е. наводишь на одну из звезд - загораются все, что слева).

Дык посмотреть код любой сможет А мы тут учимся наступая на грабли

А может получится даже лучше чем там Короче, присоединяйся

ЗЫ счас скачаю посмотрю...

upd

Даже скачивать не пришлось, подглядел прямо на оффсайте

Там чуть иначе реализовано. Там при наведении меняется ширина ссылки, а не фоновая картинка. И сделано на основе списка. Не знаю как лучше... Вроде и здесь и там неплохо

Еще в фоксе наблюдается один интересный эффект при нажатии - пунктир на пол страницы

MainFrame · August 8, 2007

Вот доработал код.

Увеличил количество звезд до 5

картинка: http://foto.myural.ru/fotki/stars3.gif

Но в ИЕ почему-то нормально не отображеается!

В чем ошибка?

<style type="text/css">
* {
 margin: 0;
 padding: 0;
}

#rating {
 position: relative;
 width: 125px;
 background: url(stars3.gif) 0 -25px no-repeat;

 margin-left: 20%; /* test */
}

#rating, #rating a, #rating div.current {
 height: 25px;
}

#rating a, #rating div.current {
 position: absolute;
 top: 0;
 left: 0;
}

#rating div.current {
 z-index: 1;
 width: 125px; /* current rating */
 background: url(stars3.gif) 0 -50px no-repeat;
}

#rating a {
 display: block;
 text-decoration: none;
 width: 25px;
 font-size: 25px;
}

#rating a.level1 {
 z-index: 6;
}

#rating a.level2 {
 z-index: 5;
 padding-left: 25px;

}

#rating a.level3 {
 z-index: 4;
 padding-left: 50px;

}

#rating a.level4 {
 z-index: 3;
 padding-left: 75px;

}

#rating a.level5 {
 z-index: 2;
 padding-left: 100px;

}

#rating a.level1:hover, #rating a.level2:hover, #rating a.level3:hover, #rating a.level4:hover, #rating a.level5:hover {
 background: url(stars3.gif) 0 0 no-repeat;
}

#rating a span {
 display: none;
}

#rating a:hover span {
 display: block;
 position: absolute;
 left: 135px;
 width: 150px;
 padding: 2px 0;

 border: 1px solid #000;
 background: #ffffe1;

 text-align: center;
 font-size: 20px;
 font-family: sans-serif;
 color: #000;
}
</style>

<div id="rating">
<div class="current"> </div>
<a href="fotka.php?id=1932&golos=1" class="level1"><span>Фтопку</span></a>
<a href="fotka.php?id=1932&golos=2" class="level2"><span>Низачод</span></a>
<a href="fotka.php?id=1932&golos=3" class="level3"><span>Зачод</span></a>
<a href="fotka.php?id=1932&golos=4" class="level4"><span>Нумляващще</span></a>
<a href="fotka.php?id=1932&golos=5" class="level5"><span>Аффтар жжот</span></a>
</div>

Tokolist · August 10, 2007

MainFrame

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

В твоем случае картинку можно уменьшить

и использовать repeat-x (звездочки ведь одинаковые)

и можно еще уменьшить высоту и ширину самих ссылок и сделать изображение еще меньше, так как они звездочки меньше, чем в моих примерах (это уже сделаешь сам)

вот такой код у меня нормально работал

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}

#rating {
  position: relative;
  width: 125px;
  background: url(stars3.gif) 0 -25px repeat-x;

  margin-left: 20%; /* test */
}

#rating, #rating a, #rating div.current {
  height: 25px;
}

#rating a, #rating div.current {
  position: absolute;
  top: 0;
  left: 0;
}

#rating div.current {
  z-index: 1;
  width: 75px; /* current rating */
  background: url(stars3.gif) 0 -50px repeat-x;
}

#rating a {
  display: block;
  text-decoration: none;
  width: 25px;
  font-size: 25px;
}

#rating a.level1 {
  z-index: 6;
}

#rating a.level2 {
  z-index: 5;
  padding-left: 25px;

}

#rating a.level3 {
  z-index: 4;
  padding-left: 50px;

}

#rating a.level4 {
  z-index: 3;
  padding-left: 75px;

}

#rating a.level5 {
  z-index: 2;
  padding-left: 100px;

}

#rating a.level1:hover, #rating a.level2:hover, #rating a.level3:hover, #rating a.level4:hover, #rating a.level5:hover {
  background: url(stars3.gif) 0 0 repeat-x;
}

#rating a span {
  display: none;
}

#rating a:hover span {
  display: block;
  position: absolute;
  left: 135px;
  width: 150px;
  padding: 2px 0;

  border: 1px solid #000;
  background: #ffffe1;

  text-align: center;
  font-size: 20px;
  font-family: sans-serif;
  color: #000;
}
</style>
</head>
<body>
<div id="rating">
<div class="current"> </div>
<a href="fotka.php?id=1932&golos=1" class="level1"><span>Фтопку</span></a>
<a href="fotka.php?id=1932&golos=2" class="level2"><span>Низачод</span></a>
<a href="fotka.php?id=1932&golos=3" class="level3"><span>Зачод</span></a>
<a href="fotka.php?id=1932&golos=4" class="level4"><span>Нумляващще</span></a>
<a href="fotka.php?id=1932&golos=5" class="level5"><span>Аффтар жжот</span></a>
</div>
</body>

Цветков Антон · August 11, 2007

Короче, присоединяйся

Ну, раз приглашают - грех отказываться... Короче, составил свой вариант (все выложенные здесь куски кодов не глядел - лень, так что все сам писал... управился минут за 10): http://aats.name/temp/samples/index1.html . Хочу обратить внимание на хорошую работоспособность даже при отключенных картинках...

PS: Половина кода там - чисто для красоты...

MainFrame · August 13, 2007

Цветков Антон в вашем коде нет этого:

А как доработать этот код, чтобы когда курсор был вне зоны показывалось несколько закрашеных звезд?

Sign In

"регулятор громкости"

Question

Link to comment

Share on other sites

26 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information