Описание требований. Часть 4. Изображения, flash и ссылки.

Требования к изображениям
— если изображение масштабируемо, это обозначается специальным образом (напр., значок лупа с плюсиком tre31.jpg);
полная поддержка png24 в IE. // см. приложение 1//
— на растягивающихся окнах есть индикатор растягиваемости;
alt;
— направление теней во всех элементах управления должно быть снизу справа;
— фотографии и изображения, сопутствующие контенту сайта, обязательно снабжаются текстовым комментарием снизу;

More...
— картинка, связанная с текстовой ссылкой, также должна быть ссылкой;
— если речь идет об аватаре или фото, обязательно:
— делать рамку 1px темного цвета в стиле сайта,
— если изображения нет, отображать заставку. Пример:

tr.jpg

Требования к flash
— имеет статические флеш-заглушки (при отключенном флеше выглядит адекватно);
— обязательно наличие загрузчика, показывающего объем скачанной и оставшейся информации flash;
— При вставке флеш-картинок использовать скрипт, чтобы избежать в IE выделения рамки при наведении и дополнительного клика для активации флеша // см. приложение 2//
 

Требования к ссылкам
— поведение ссылок: активные подчеркнуты и выделены цветом, отличным от цвета шрифта;
— при наведении подчеркивание не снимается, цвет шрифта при наведении меняется;
— в больших объемах текста и при выдаче разносторонней информации цвет посещенных ссылок меняется (это правило не распространяется на меню);
— на открытой странице ссылка на нее же – активна, но не подчеркнута;
— все ссылки на другие ресурсы и  на элементы каталога открываются в новом окне;
в качестве ссылок лучше не использовать графику;
— текст кнопки и ссылки, открывающей новое окно или страницу, на которой от пользователя требуется совершение неких действий, заканчивается многоточием (например: «Изменить параметры…»);
— ссылки, обозначающие скрипт, работающий в данном окне – подчеркиваются не сплошной чертой, а пунктиром. Пример:
 tre2.jpg
— элементы, похожие на ссылки, но не являющиеся таковыми, должны отличаться стилем от текста и ссылок (например, использование bold или italic).
— всем ссылкам меню, а так же всем главным интерфейсным элементам  прописывается параметр title (всплывающая подсказка), текст которого отражает результат использования этих элементов;
— ссылок «Подробнее», или елочек, или многоточий с подчеркиванием, или «Читать дальше» — быть не должно. Название аннотации (заголовок) – уже является ссылкой на полное описание статьи;
 
  —————————————————————

Приложение 1.
  // PNG
 function fixPNG(element)
{
  //Если браузер IE версии 5.5-6
  if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent))
  {
    var src;
              
    if (element.tagName==’IMG’) //Если текущий элемент картинка (тэг IMG)
    {
      if (/\.png$/.test(element.src)) //Если файл картинки имеет расширение PNG
      {
        src = element.src;
        element.src=»/bitrix/templates/work/img/pixels/t_pixel.gif» mce_src=»/bitrix/templates/work/img/pixels/t_pixel.gif» ; //заменяем
изображение прозрачным gif-ом
      }
    }
    else //иначе, если это не картинка а другой элемент
    {
                  //если у элемента задана фоновая картинка,
то присваеваем значение свойства background-шmage переменной src
      src = element.currentStyle.backgroundImage.match(/url\(«(.+\.png)»\)/i);
      if (src)
      {
        src = src[1]; //берем из значения свойства
background-шmage только адрес картинки
        element.runtimeStyle.backgroundImage=»none»; //убираем
фоновое изображение
      }
    }
    //если, src не пуст, то нужно загрузить изображение
с помощью фильтра AlphaImageLoader
    if (src) element.runtimeStyle.filter = «progid:DXImageTransform.Microsoft.AlphaImageLoader(src='» + src + «‘,sizingMethod=’scale’)»;
  }
}

  Приложение 2.
// FLASH
 isIE = (navigator.appName == ‘Microsoft Internet Explorer’) ? 1 : 0;
 
 function checkBackground(obj) {
                 if (isIE) {
                                 obj.parentNode.style.background = »;
                  }
 }
  


Comments are closed.