My Opinion

Давно ничего не писал. Был занят сменой работы. Потом был занят самой работой.
Хочу задать читателям вопрос, есть сылка ввиде картинки, как сделать так чтоб при наведении курсора на эту картинку, она исчезала и мы видели обыкновенную ссылку? А только средствами XHTML/CSS.
Совсем недавно я столкнулся с такой задачей (в принципе задача не стояла именно в использование XHTML, но я с Javascript я не дружу )

Идея решения пришла мне за бутылкой пива. Многие слышали про метод замещения текста картинкой, где картинка закрывает текст, путем присваивания ей (картинке) абсолютного позиционирования и поднимая её по оси z (position:absolute;z-index:10; ) . Так вот - идея проста. Поднимаем картинку, под ней у нас текст ссылки и при наведении на ссылку мышки (a:hover) картинка исчезает (display:none)
html:

<div class="container" >
<a  href="#">
	<img src="images/picture.gif" alt="" width="80px" height="80px" />
	эту ссылку прячем под картинкой 
</a>
</div>

CSS:

.container a{
	text-align:center;
	display:block;
	position:relative;
	height:80px;
	width:80px;
	padding:10px;
	background:#ebdada;
	}
.container a img{
	position:absolute;
	z-index:10;
	top:10px;
	left:10px;
	border:none;
	}
.container a:hover img{
	display:none;
	filter:alpha(opacity=100);/*шаманим, чтоб работало в ИЕ6*/
	}

Смотрим как работает.

Запись опубликована 17.06.2008 в 14:29 в следующих рубриках: WEB. Вы можете отслеживать обсуждение записи, используя ленту RSS 2.0. Вы можете оставить комментарий, или трекбек с Вашего сайта.