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

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

В шаблоне страницы обрамляем рамкой контейнер с контентом:

Всё...

Недавно я разрабатывал сайт www.primaphoto.ru

В процессе возникла необходимость показывать томбнейлы (превьюшки) изображений продукции при наведении на соответствующие строки прайс-листа.

Решил задачу путем небольшой модификации скрипта из предыдущей статьи:

• Во-первых, присваиваем таблице с прайс-листом уникальный ID, который будет передаваться в скрипт Tooltip.js, например: <table id="glass1">
• Затем делаем названия продуктов ссылками, в которых title'ом является адрес соответствующей картинки, например: <a href='javascript:void(null);' title='../img/content/$s.jpg'> Это продукт $s </a>
• далее, вносим изменения в файл Tooltip.js:

  function enableTooltips(id){
  var links,i,h;
  
  if(!document.getElementById) return;
  AddCss();
  h=document.createElement("span");
  h.id="btc";
  h.setAttribute("id","btc");
  h.style.position="absolute";
  document.getElementsByTagName("body")[0].appendChild(h);
  links=document.getElementById(id).getElementsByTagName("a");
  for(i=0;i0) d.removeChild(d.firstChild);
  }
  // В этой функции задаём прозрачность картинки в разных браузерах. 
  function setOpacity(el){
  el.style.filter="alpha(opacity:95)"; // 0 - прозрачная, 100 - непрозрачная
  el.style.KHTMLOpacity="0.95"; //
  el.style.MozOpacity="0.95"; //  0 - прозрачная, 1.0 - непрозрачная
  el.style.opacity="0.95"; //
  }
  
  function CreateEl(t,c){
  var x=document.createElement(t);
  x.className=c;
  x.style.display="block";
  return(x);
  }
  
  function AddCss(){
  var l=CreateEl("link");
  l.setAttribute("type","text/css");
  l.setAttribute("rel","stylesheet");
  l.setAttribute("href","../bt.css"); //подключаем таблицу стилей
  l.setAttribute("media","screen");
  document.getElementsByTagName("head")[0].appendChild(l);
  }
  
  function Locate(e){
  var posx=0,posy=0;
  if(e==null) e=window.event;
  if(e.pageX || e.pageY){
      posx=e.pageX; posy=e.pageY;
      }
  else if(e.clientX || e.clientY){
      if(document.documentElement.scrollTop){
          posx=e.clientX+document.documentElement.scrollLeft;
          posy=e.clientY+document.documentElement.scrollTop;
          }
      else{
          posx=e.clientX+document.body.scrollLeft;
          posy=e.clientY+document.body.scrollTop;
          }
      }
  document.getElementById("btc").style.top=(posy-140)+"px"; //смещение картинки по вертикали
  document.getElementById("btc").style.left=(posx-230)+"px"; //смещение картинки по горизонтали
  }
  

• Создаем следующую таблицу стилей bt.css:

  .tooltip{width: 200px; text-decoration:none;text-align:center}
  .tooltip span.top{padding: 30px 8px 0;}
  .tooltip b.bottom{padding:3px 8px 15px;}
  

• В папку img закачиваем картинки с соответствующими названиями.

Результат в действии можно посмотреть на странице: Фото в стекле

Вроде всё! ))))))

Известная биржа ссылок Sape.ru недавно объявила о запуске в тестирование механизма автоматической покупки и продажи контекстных ссылок: "Нами закончено альфа тестирование механизма купли-продажи ссылок напрямую из существующих текстов страниц (синонимы: контекстные ссылки, гиперконтекст) и мы приглашаем всех желающих принять участие в бета тестировании продукта."

Размещение ссылок стало более естественным, теперь они располагаются прямо в тексте статей, а не отдельными блоками, причем анкором является часть текста, наиболее релевантная тематике сайта, на который ведёт ссылка. Индексируется только тот контент, который вебмастер передал скрипту в виде переменной или заключил в тэги , причем при загрузке страницы эти тэги удаляются автоматически. Только страницы с неизменным содержимым допускаются к продаже контекстных ссылок. Цена на контекстную ссылку устанавливается выставлением умножающего коэффициента к обычной цене ссылки (1-2) на странице управления ценами .

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

Загрузка больших изображений может занимать некоторое время. Полезно давать пользователю знать, что этот процесс происходит. Обычно это достигается с помощью Java - скрипта, который выводит на месте будущей картинки маленький анигиф предзагрузки.

Однако, существует существенно более простой способ достичь того же самого, особенно, если на странице выводится множество больших изображений.

1. Находим иконку предварительной загрузки

Существует много сайтов, позволяющих выбрать и настроить изображения предзагрузки. Например, вот этот. Изображение (размер файла) не должно быть слишком большим. Например, возьмем такое:

2. Пишем CSS-код

Код минимален, создается всего одно просто правило следующего содержания:

Вместо load.gif, естественно, должно быть название вашей иконки предзагрузки.

3. Пишем HTML-код

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

Готово.