Как убрать всплывающие окна на сайте

Как то раз у одного из моих клиентов, пользующегося бесплатным хостингом, неожиданно стала всплывать недоброкачественная реклама на сайте. Расследование указало на то, что хостинг просто заразили вирусом. Переезжать на новый хостинг по некоторым причинам было неприемлемо. Файлы самого сайта были вирусом не тронуты. В итоге пришлось искать альтернативные методы вырезания рекламы. Сначала был испробован…

Метод перехвата вывода с чисткой кода после закрывающего тега body

Именно в этом месте в моем случае и оказался вредоносный код. Перед началом вывода был добавлен код:

1
2
3
4
5
6
7
8
9
10
<?php
function antibug($buffer)
{
	// убрать мусор
	$garbageCode = substr(strstr($buffer, "</body>"), 7);
	$buffer = str_replace($garbageCode, "", $buffer)."</html>";
	return $buffer;
}
ob_start("antibug");
?>

А в конце:

1
2
3
<?php
ob_end_flush();
?>

Для большинства страничек на сайте это сработало. Но в некоторых местах реклама полезла опять. Тогда был применен 2-ой способ.

Поднятие слоя с сайтом выше всплывающей рекламы

Способ, строго говоря, не очень хороший, так как вредоносный код он не убирает. Из-за этого если хостинг, к примеру, не вылечится от вируса долгое время, кто знает, могут быть санкции поисковой системы — что мол сайт угрожает безопасности и так далее. Но на первое время пойдет, чтобы реклама не надоедала. В моем случае именно это и нужно было. А делается это просто — элементу содержащему весь сайт (в примере, div с идентификатором class=’site’) назначается следующий код CSS:

1
.site {position:relative; z-index:999999;}

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

Как вставить или заменить любую ссылку во Flash с помощью HTML и CSS

Для вставки или изменения ссылки в swf-файле вовсе не обязательно иметь его исходники и среду разработки. Ниже приведен код, в котором реализована ссылка с баннера, не имеющего внутренней ссылки.

1
2
3
4
5
6
7
8
9
10
<div style="position:relative;">
<a style="position: absolute; width: 100px; height: 100px; left: 0; top: 0; background: url(/images/blank.gif) left top no-repeat;" href="http://www.example.ru"></a>
<object
  type="application/x-shockwave-flash"
  data="/banner.swf"
  width="100" height="100">
    <param name="movie" value="banner.swf">
    <param name="wmode" value="opaque">
    <param name="allowScriptAccess" value="sameDomain" />
</object></div>

В примере используется флешка 100 на 100 пикселей. На неё накладывается ссылка с абсолютным позиционированием. А чтобы это было возможно, swf-файлу присваивается параметр wmode с значением opaque. Для работы данного примера также необходим пустой gif 1 на 1 пиксель, используемый в качестве фона ссылки.

margin: 0 auto и IE

Для выравнивания сайта по центру часто используется следующий код:

1
.site {margin: 0 auto;}

Идентификатор .site указывает на div-обертку шаблона сайта. У большинства браузеров вопросов не возникает, но Internet Explorer прижимает шаблон к левому краю окна. Один из простых вариантов решения этой задачи — добавить в CSS-файл, предназначенный для IE, код указанный ниже:

1
body {text-align: center;}

Теперь выравнивание по центру Internet Explorer должно работать нормально.

Как обрезать Flash с помощью HTML и CSS

Иногда возникает необходимость модифицировать какой либо элемент дизайна сайта, сделанный на Flash. Допустим fla-исходников нет и в помине, и/или среда разработки Flash недоступна. Если вся требуемая модификация сводится к обрезке имеющегося swf-файла, то это проще сделать средствами HTML и CSS. Например это может потребоваться когда шапка сайта сделана во Flash заодно с меню. Если надо поменять только меню, то его можно отрезать от Flash и сделать альтернативное на JavaScript. Рассмотрим два варианта обрезки.

  1. Обрезаем Flash снизу
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    <div style="height:175px; overflow:hidden;">
    <object
      type="application/x-shockwave-flash"
      data="/header.swf"
      width="800" height="200">
        <param name="movie" value="header.swf">
        <param name="wmode" value="transparent">
        <param name="allowScriptAccess" value="sameDomain" />
    </object>
    </div>

    В этом случае высота Flash — 200 пикселей, а высота div-контейнера — 175 пикселей. Соответственно swf-файл будет обрезан снизу на 25 пикселей.

  2. Обрезаем Flash сверху
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
    <div style="height:175px; overflow:hidden;">
    <div style="position:relative; top:-25px;">
    <object
      type="application/x-shockwave-flash"
      data="/header.swf"
      width="800" height="200">
        <param name="movie" value="header.swf">
        <param name="wmode" value="transparent">
        <param name="allowScriptAccess" value="sameDomain" />
    </object>
    </div>
    </div>

    А эта обертка в 2 div-а обрезает swf-файл сверху на 25 пикселей.

В следующем посте рассмотрим как вставить или заменить любую ссылку во Flash с помощью HTML и CSS без вмешательства в сам swf-файл.

Убрать отступ от картинки в IE 9

Имеется код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table class='bn_table' cellpadding='0' cellspacing='0' border='0'>
<tr class='bn_0'>
  <td class='bn_0_0'><img src="/design/banner-0-0.png" border="0" width="49" height="2" /></td>
  <td class='bn_1_0'><img src="/design/banner-1-0.png" border="0" width="612" height="2" /></td>
  <td class='bn_2_0'><img src="/design/banner-2-0.png" border="0" width="47" height="2" /></td>
</tr>
<tr class='bn_1'>
  <td class='bn_0_1'><img src="/design/banner-0-1.png" border="0" width="49" height="284" /></td>
  <td class='bn_1_1'><img src="/design/banner.jpg" border="0" width="612" height="284" /></td>
  <td class='bn_2_1'><img src="/design/banner-2-1.png" border="0" width="47" height="284" /></td>
</tr>
<tr class='bn_2'>
  <td class='bn_0_2'><img src="/design/banner-0-2.png" border="0" width="49" height="51" /></td>
  <td class='bn_1_2'><img src="/design/banner-1-2.png" border="0" width="612" height="51" /></td>
  <td class='bn_2_2'><img src="/design/banner-2-2.png" border="0" width="47" height="51" /></td>
</tr>
</table>

При этом большинство браузеров отображает картинки в таблице без отступов. Однако новоиспеченный IE9 отображает отступы по вертикали. Пример ниже.
IE9 отображает отступы по вертикали после картинок
Решение простое — в CSS прописываем:

1
.bn_table tr td img {display:block;}

И вауля — отсупы исчезают!
убрали отступ после картинки в IE9