Создать ответ 
Смена надписей и ссылок к ним
Автор Сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #1
Смена надписей и ссылок к ним
Сегодня, 4 августа 2013 года в 00:10:43 в комментариях в теме Автоматическая прокрутка текста в блоке от пользователя Юрий поступил вопрос:

Цитата:И ещё вопрос. Наверное, не по теме. В окне таблицы кнопками "Назад" и "Вперёд" выводятся по кругу пункты со ссылками, перейти по которым можно, если щёлкнуть по надписи в таблице. Нужно, чтобы надпись в таблице была неактивной, а под таблицей должны быть три активных надписи "Назад" "Вперёд" "Перейти". Что нужно изменить в этом коде? Заранее спасибо.

<html>
<head>
<script type="text/javascript">
var current = 0, max = 2;
function next() {
var next = (current == max) ? 0 : current+1;
var elems = document.getElementById('place').getElementsByTagName('p');
elems[current].style.display = 'none';
elems[next].style.display = 'block';
current = next;
}

function prev() {
var prev = (current == 0) ? max : current-1;
var elems = document.getElementById('place').getElementsByTagName('p');
elems[current].style.display = 'none';
elems[prev].style.display = 'block';
current = prev;
}
</script>
<style>
#place p {
display: none;
}
</style>
</head>
<body>

<table border="1" width="20%" cellspacing="0" cellpadding="0" id="window">
<tr>
<td>

<div id="place">
<p style="display: block;"><a href="%22#&quot;">Пункт 1</a></p>
<p><a href="%22#&quot;">Пункт 2</a></p>
<p><a href="%22#&quot;">Пункт 3</a></p>


</div>

</td>
</tr>
</table>

<a href="#" onclick="prev(); return false;">Назад</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#" onclick="next(); return false;">Вперёд</a>

</body>
</html>

Из-за размеров данного вопроса, было решено перенести данное сообщение из комментариев на форум.
04.08.2013 15:30:14
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #2
RE: Смена надписей и ссылок к ним
Я бы предложил Вам воспользоваться немного другим кодом, который на наш взгляд более универсален и занимает меньше места:

Код:
<script type="text/javascript">
var URL=new Array("url_1.php","url_2.php","url_3.php","url_4.php");
var all_text=new Array("text_1","text_2","text_3","text_4");
var current=0;

function change(direction) {
current+=direction;
if (current>all_text.length-1) current=0;
if (current<0) current=all_text.length-1;
document.getElementById('text_url').setAttribute('href',URL[current]);
if (document.layers) {
   document.layers.text.document.write(all_text[current]);
   document.layers.text.document.close();
  }
  else text.innerHTML=all_text[current];
}
</script>

<table border="1" width="20%" cellspacing="0" cellpadding="0">
<tr>
  <td>
    <span id="text">text_1<span>
  </td>
</tr>
</table>

<a href="#" onclick="change(-1);">Назад</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="url_1.php" id="text_url">Перейти</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#" onclick="change(1);">Вперёд</a>

Надеемся, что данный код как раз то, что Вам нужно.
04.08.2013 15:34:16
Найти все сообщения Цитировать это сообщение
yumakar Не на форуме
Рядовой
*

Сообщений: 9
У нас с: Aug 2013
Сообщение: #3
RE: Смена надписей и ссылок к ним
Спасибо, так лучше. Было бы совсем хорошо, если по надписи "Перейти" запускать встроенный swf плеер. У меня все ссылки ведут на mp3 файлы. Но насколько я знаю, флэш-плееры все настраиваются на одну единственную композицию. Может быть тогда создать плееры для каждой песни, и по клику "Перейти" показывать их в одном окне?

Ещё забыл спросить. Как можно вывести дополнительно параллельную инфу к "text_1","text_2","text_3", тоже в виде текстов, и показывать её в другом окне в отдельном слое?
(Последний раз сообщение было отредактировано 05.08.2013 в 05:39:29, отредактировал пользователь yumakar.)
05.08.2013 05:33:55
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #4
RE: Смена надписей и ссылок к ним
Вы бы скинули код плеера, там наверняка имеется ссылка на mp3 файл, которую можно заменить при помощи JavaScript чтобы не плодить плееры.

По второму вопросу не совсем понял, что Вы имели ввиду:
Цитата:...показывать её в другом окне в отдельном слое

Что за окно и что за слой?
05.08.2013 19:02:01
Найти все сообщения Цитировать это сообщение
yumakar Не на форуме
Рядовой
*

Сообщений: 9
У нас с: Aug 2013
Сообщение: #5
RE: Смена надписей и ссылок к ним
По поводу слоя могу привести пример.
У меня на сайте yumakar.ru/music_friends.html у MD-деки бегущая строка, при наведении на которую появляется надпись в отдельном слое.
05.08.2013 21:33:44
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #6
RE: Смена надписей и ссылок к ним
А... Так это обычный блок DIV с position: absolute; и z-index: 1;

Сделать довольно просто по аналогии со сменяющимися надписями.

Код целиком:
Код:
<script type="text/javascript">
var URL=new Array("url_1.php","url_2.php","url_3.php","url_4.php");
var all_text=new Array("text_1","text_2","text_3","text_4");
var dop_text=new Array("Текст_1","Текст_2","Текст_3","Текст_4");
var current=0;

function change(direction) {
current+=direction;
if (current>all_text.length-1) current=0;
if (current<0) current=all_text.length-1;
document.getElementById('text_url').setAttribute('href',URL[current]);
if (document.layers) {
    document.layers.text.document.write(all_text[current]);
    document.layers.text.document.close();
    document.layers.layer1.document.write(dop_text[current]);
    document.layers.layer1.document.close();
   }
   else {
   text.innerHTML=all_text[current];
   layer1.innerHTML=dop_text[current];
   }
}
</script>

<table border="1" width="20%" cellspacing="0" cellpadding="0">
<tr>
   <td>
     <span id="text">text_1<span>
   </td>
</tr>
</table>

<a href="#" onclick="change(-1);">Назад</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="url_1.php" id="text_url">Перейти</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#" onclick="change(1);">Вперёд</a>

<br>
<div style="position: absolute; top:100px; left:200px; width: 200px; font-size: 13px; color: #0000FF; z-index: 1; visibility: visible" id="layer1" align="center">layer1</div>

Для наглядности в коде к блоку DIV добавил параметры стиля top:100px; left:200px;
05.08.2013 22:06:17
Найти все сообщения Цитировать это сообщение
yumakar Не на форуме
Рядовой
*

Сообщений: 9
У нас с: Aug 2013
Сообщение: #7
RE: Смена надписей и ссылок к ним
Попытаюсь сформулировать задачу. Есть три файла: file_1.mp3, file_2.mp3 и file_3.mp3, название которых должно выводиться в блоке соответственно как: Файл 1, Файл 2 и Файл 3. Я немного изменил Ваш первый код (от идеи вывода текста в отдельном слое я решил отказаться).

Код:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Макет плеера</title>

<script type="text/javascript">
var URL=new Array("file_1.mp3","file_2.mp3","file_3.mp3");
var all_text=new Array("Файл 1","Файл 2","Файл 3");
var current=0;

function change(direction) {
current+=direction;
if (current>all_text.length-1) current=0;
if (current<0) current=all_text.length-1;
document.getElementById('text_url').setAttribute('href',URL[current]);
if (document.layers) {
    document.layers.text.document.write(all_text[current]);
    document.layers.text.document.close();
   }
   else text.innerHTML=all_text[current];
}
</script>

</head>

<body>

<table border="1" width="20%" cellspacing="0" cellpadding="0">
<tr>
   <td>
     <span id="text">Файл 1<span>
   </td>
</tr>
</table>

<a href="#" onclick="change(-1);">Назад</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="url_1.php" id="text_url">Перейти</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#" onclick="change(1);">Вперёд</a>


</body>

</html>

Но по надписи "Перейти" должен запускаться встроенный флэш-плеер. Я сделал плеер, который называется no_skin.swf. Его размеры 1х1 пиксель и он не имеет графической оболочки, т.е. музыка по клику "Перейти" должна звучать как бы в фоне, а не вызывать диалог "Скачать/Воспроизвести". Вот его код:

Код:
<object width="1" height="1">
  <param name="movie" value="no_skin.swf" />
  <param name="quality" value="high" />
  <param name="allowScriptAccess" value="always" />
  <param name="wmode" value="transparent">
     <embed src="no_skin.swf"
      quality="high"
      type="application/x-shockwave-flash"
      WMODE="transparent"
      width="1"
      height="1"
      allowScriptAccess="always" />
</object>

Плеер читает данные из плейлиста no_skin.xml Вот его код:

Код:
<player>
  <playlist>
    <track>
      <file>file_1.mp3</file>
      <title>Файл 1</title>
      <artist></artist>
      <album></album>
    </track>
    <track>
      <file>file_2.mp3</file>
      <title>Файл 2</title>
      <artist></artist>
      <album></album>
    </track>
    <track>
      <file>file_3.mp3</file>
      <title>Файл 3</title>
      <artist></artist>
      <album></album>
    </track>
  </playlist>
</player>

Т.е. все три файла здесь есть, и они будут играться по кругу. При загрузке страницы в блоке должен быть "Файл 1", по клику "Перейти" должен запускаться no_skin.swf и играть file_1.mp3 (в Вашем коде, кстати, при загрузке первая ссылка не работает, надо промотать в любую сторону). После автоперехода на file_2.mp3 (реализовано в плеере) в блоке должно быть "Файл 2", и т.д. по кругу. Но самое главное, что в любой момент по клику "Назад" или "Вперёд" можно было выбрать песню, и кликнув "Перейти" запустить соответствующий файл. И ещё важно реализовать функцию "Стоп/Пауза", например при повторном нажатии на "Перейти", или можно добавить отдельную надпись "Стоп" с соответствующей функцией. Наверное плейлист придётся встраивать в HTML, но так даже удобнее. Извиняюсь за длинный пост. Заранее спасибо.
08.08.2013 11:39:17
Найти все сообщения Цитировать это сообщение
yumakar Не на форуме
Рядовой
*

Сообщений: 9
У нас с: Aug 2013
Сообщение: #8
RE: Смена надписей и ссылок к ним
Дополнение к моему предыдущему посту. Если вставить плеер так:
var URL=new Array("no_skin.swf", ... то он будет открываться в отдельной странице, а мне бы хотелось, чтобы музыка звучала в этом же окне.
09.08.2013 09:42:39
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #9
RE: Смена надписей и ссылок к ним
По-моему все таки лучше поискать плеер со встроенными функциями вперед, назад и пауза, т.к. я в этих делах не мастер и скорее всего помочь не смогу.

Единственное что еще приходит на ум - генерировать плейлист на JS, но скорее всего тоже не вариант.
09.08.2013 20:03:01
Найти все сообщения Цитировать это сообщение
yumakar Не на форуме
Рядовой
*

Сообщений: 9
У нас с: Aug 2013
Сообщение: #10
RE: Смена надписей и ссылок к ним
Спасибо за понимание, но флэш-плееры мне не нравятся графикой. Единственный плеер, который я смог интегрировать, можно посмотреть здесь: yumakar.ru/music.html
09.08.2013 21:13:10
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


Пользователи просматривают эту тему: 1 Гость(ей)


LiveInternet
© Copyright 2011-2024 by UsefulScript.ru