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

[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.

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

И если у вас есть замечания, обязательно пишите. Я не профессионал, большая вероят. что что-нибудь упустил..