VPF::как в alt передать многострочную строку?

jeans1986

Дата 18.7.2007, 23:51 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 165
Регистрация: 31.3.2007

Репутация: нет
Всего: нет

как в alt передать многострочную строку? Т.е если имее тэг <img src="photo.jpg" alt="my text">. как сделать чтоб при наведении на рисунок выводилась подсказка при помощи тэга alt и в двух строчках на первой My а на второй text? Заранее благодарю.

Mymik

Дата 19.7.2007, 13:02 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 7
Всего: 78

только если ты разорвешь tag нажатием Enter только так :о( стандартные \n\r не подходят :о(

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

Alik_Kirillovich

Дата 21.7.2007, 03:01 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 30
Регистрация: 13.7.2007
Где: Казань

Репутация: 1
Всего: 2

Вот, набросал JS-функцию, которая делает так, чтобы всплывающая подсказка для картинки могла содержать HTML-форматирование, в том числе и переводы строки:

Код


function useHtmlAlt (imgImage, intShowTimeout, intHideTimeout)
  {
  /*
  Эта функция делает, чтобы всплывающая подсказка для картинки могла содержать HTML-форматирование
  Параметры:
    imgImage - ссылка на картинку;
    intShowTimeout - время (в мс.) задержки перед появлением подсказки;
                     если intShowTimeout не задан или равен null, то подсказка возникнет сразу после подведения мыши;
    intHideTimeout - время (в мс.), которое подсказка будет видна после появления;
                     если intHideTimeout не задан или равен null, то подсказка не исчезнет, пока не будет уведена мышь;
  Возвращает:
    ничего;
  */
  
  /*
  Подготавливаем данные*/
  if (typeof (intShowTimeout) == "undefined" || intShowTimeout == null) intShowTimeout = 0;
  if (typeof (intHideTimeout) == "undefined" || intHideTimeout == null) intHideTimeout = -1;
  var fncShowTimeout;
  
  /*
  Создаем div - "всплывающую подсказку"*/
  var divAlt = document.createElement ("div");
    divAlt.innerHTML = imgImage.alt;
    divAlt.style.visibility = "hidden";
    divAlt.style.position = "absolute";  
    divAlt.className = "alt";
  document.body.appendChild (divAlt);
  imgImage.alt = "";
  
  /*
  Устанавливаем события подведения и уведения мыши*/
  imgImage.onmouseover = function (objEvent)
    {
    fncShowTimeout = setTimeout
      (
      function ()
        {
        divAlt.style.visibility = "visible";
        imgImage.onmousemove  = function () {};
        setTimeout
          (
          function ()
            {
            divAlt.style.visibility = "hidden";
            }
          ,
          intHideTimeout
          );
        }
      ,
      intShowTimeout
      );
    imgImage.onmousemove = function (objEvent)
      {
      divAlt.style.top = objEvent ? objEvent.layerY : window.event.y;
      divAlt.style.left = objEvent ? objEvent.layerX : window.event.x;
      }
    }
  imgImage.onmouseout = function ()
    {
    clearTimeout (fncShowTimeout);
    divAlt.style.visibility = "hidden";
    }
  }

Вот пример использования функции:

Код


<!--
Картинка
-->
<img src = "abc.jpg"
     id = "imgMyImage"
     alt = "1-я <b>строка</b> подсказки<br>2-я строка подсказки<br>3-я строка подсказки"
>

<script>
  /*
  Включим поддержку html-форматирования для всплывающей подсказки.
  Подсказка появится через 1 секунду после наведения мышки на картинку
  и исчезнет через 3 секунды после появления
  */
  useHtmlAlt (document.getElementById ('imgMyImage'), 1000, 3000)
</script>

Не забудьте задать CSS-оформление подсказки:

Код


  .alt
    {
    background: infobackground;
    border: 1px solid windowframe;
    font: 8pt graytext;
    font-family: Arial;
    }

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »