Новый способ замены текста изображением

[kanifas]

Я уже писал об этом здесь и не здесь. И никому не было интересно. Были слова, был код без комментариев не форматированный... И всё.
мне посоветовали дать ссылки, привести пример. Значит вот:

Первым делом ссылка, где посмотреть ПРИМЕР

Или адрес http://www.kanifas.h18.ru/
Вторым делом плюсы:
— метод не требует JavaScript
— картинка может быть полупрозрачной.
— IE не подводит.
— При отключении изображений есть текст.
— Работает даже с Doctype XHTML 1.1
— Работает в IE, Safari(win), Opera, FF (в остальных не проверял. Должно и в них работать)

Минус — картинка не фоном, а тегом <img>. Очень плохо ли это? Думаю, нет.

Работают HTML и CSS.

! Замечание. В других методах либо картинка не может быть прозрачной, либо текста нет при отключ. графики или ещё чего.

Суть: при включённом режиме отображения графики картинка выталкивает текст, в противном
случае — сворачивается, освобождая место для текста.

Какая структура:
- один внешний DIV
- внутри него картинка, обёрнутая DIV-ом
- следом за этой оберткой с картинкой то, что необходимо заменить, например, заголовок.


HTML:

<div id="out">
		<div><img alt="" src="w.gif"></div>
		<h1>друг-программист</h1>
</div>

CSS:

#out {
	  overflow: hidden; /*скрываю текст выходящий за границы*/
	  width: 300px;  /*ширина, высота*/
	  height: 100px;
	}

	div div {
	  margin: 0;   /*внутренний div плывёт влево*/
	  float: left;   /*и уходит влево на расстояние такое, как его ширина, за счёт отрицат. поля*/
	  margin-left: -300px;
	}

	h1 {
	  margin: 0; /*здесь всё прозрачно*/
	  float: left;
	}

	img {
	  display: block;  /*div ушёл вместе с картинкой. Теперь возвращаю картинку на место*/
	  margin-left: 300px;  /*с пом.положит. левого поля. Чтобы  она выталкивала текст, её display: block*/
	}

Да, для Opera и подобных в атрибуте alt - пустая строка! Т.е. alt="".

Смотрите по направлению ссылки. Там можно скачать пример, или посмотреть онлайн.
Либо скопировать этот код(см. выше) и использовать свою картинку 300 на 100.

Важно! Если кто-нибудь уже сталкивался с таким методом, прошу, напишите где. Дайте ссылку.
И если у вас есть замечания, обязательно пишите. Я не профессионал, большая вероят. что что-нибудь упустил..

Вобщем, банзай!

скачать можно и здесь. Прикрепил файл .rar