Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Обрамление картинки при наведении 
V
    Опции темы
Redstuff
Дата 7.10.2006, 14:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Команда REDSTUFF
**


Профиль
Группа: Участник
Сообщений: 497
Регистрация: 27.5.2006
Где: Санкт-Петербург

Репутация: нет
Всего: 1
Как сделать, чтобы при наведении на картинку-ссылку она обрамлялась и менялась прозрачность. Под картинкой расположен текст и ссылка.

 ____________
|                       |
|   КАРТИНКА    |
|                       |
--------------------
    ссылка
 текст текст
 текст текст

Т.е. при наведении на ссылку или картинку, только картинка должна менять параметры.


--------------------
ГОСТы, СНиПы, ТУ...
<реклама удалена администрацией форума>
PM MAIL WWW ICQ Skype   Вверх
Illuminaty
Дата 7.10.2006, 15:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


/*Антон Захаров*/
***


Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56
Как то так:
Код
<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style media="screen" type="text/css"><!--/*--><![CDATA[/*><!--*/
html, body {
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
}
body {
    overflow: auto;
}
.out {
    display:block;
    position: relative;
    width: 200px;
    height: 100px;
}
.out a {
    width: 100%;
    height: 100%;
    background-image: url(images/test.jpg);
    position: absolute;
    top: 0px;
    left: 0px;
}
.out a:hover {
  -moz-opacity: 0.3;
  filter: alpha(opacity = 30);
    border: 1px solid red;
}
/*]]>*/--></style>
<script language="javascript" type="text/javascript"><!--//--><![CDATA[//><!--
//--><!]]></script>
</head>
<body> 
<span class="out"><a href="#"></a>Тест</span>
</body>
</html>
PM MAIL ICQ   Вверх
Redstuff
Дата 7.10.2006, 16:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Команда REDSTUFF
**


Профиль
Группа: Участник
Сообщений: 497
Регистрация: 27.5.2006
Где: Санкт-Петербург

Репутация: нет
Всего: 1
при наведении на ссылку или картинку, только картинка должна менять параметры. 

Мне это важно, можно как-то сделать?


--------------------
ГОСТы, СНиПы, ТУ...
<реклама удалена администрацией форума>
PM MAIL WWW ICQ Skype   Вверх
Illuminaty
Дата 7.10.2006, 16:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


/*Антон Захаров*/
***


Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56
какие параметры должна менять картинка? и чем не устраивает мой вариант?
PM MAIL ICQ   Вверх
Redstuff
Дата 7.10.2006, 16:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Команда REDSTUFF
**


Профиль
Группа: Участник
Сообщений: 497
Регистрация: 27.5.2006
Где: Санкт-Петербург

Репутация: нет
Всего: 1
Картинка должна менять: прозрачность и обрамление. И еще, если убрать position: absolute; , то пропадает эффект прозрачности.


--------------------
ГОСТы, СНиПы, ТУ...
<реклама удалена администрацией форума>
PM MAIL WWW ICQ Skype   Вверх
Illuminaty
Дата 7.10.2006, 17:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


/*Антон Захаров*/
***


Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56
а в приведенном коде разве не так?
Цитата(Redstuff @  7.10.2006,  17:53 Найти цитируемый пост)
если убрать position: absolute; 
 а ты не убирай smile

Добавлено @ 17:20 
в моем коде:
1) меняется прозрачность при наведении
2) появляется граница (обрамление)
Что не так?
PM MAIL ICQ   Вверх
Redstuff
Дата 7.10.2006, 17:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Команда REDSTUFF
**


Профиль
Группа: Участник
Сообщений: 497
Регистрация: 27.5.2006
Где: Санкт-Петербург

Репутация: нет
Всего: 1
Да, но текст ссылки то находиться в самой картинке! И обрамляться он не должнен. Т.е. получается:

 ____________
|ссылка            |
| текст текст    |
| текст текст    |
--------------------


Это сообщение отредактировал(а) Redstuff - 7.10.2006, 17:30


--------------------
ГОСТы, СНиПы, ТУ...
<реклама удалена администрацией форума>
PM MAIL WWW ICQ Skype   Вверх
Illuminaty
Дата 8.10.2006, 19:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


/*Антон Захаров*/
***


Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56
Теперь понял. Для меня слова 
Цитата(Redstuff @  7.10.2006,  15:01 Найти цитируемый пост)
Под картинкой
 означают, что "под" по оси Z, а не по оси Y  smile 
Такой вариант должен удовлетворить самого пристрастного судью smile 
Код
<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style media="screen" type="text/css">
<!--/*--><![CDATA[/*><!--*/
html, body {
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
}
body {
    overflow: auto;
}
.out {
    width: 210px;
    height: 300px;
    background-color: #FFCC00;
    padding-top: 3px;
}
a.img {
    display: block;
  width: 200px;
    height: 100px;
    background-image: url(images/test.jpg);
    margin-left: 5px;
    margin-bottom: 10px;
}
a.img:hover, a.hover  {
    -moz-opacity: 0.3;
    filter: alpha(opacity = 30);
    border: 2px solid red;
    margin-left: 3px;
    margin-top: -2px;
    margin-bottom: 8px;
}
* html a.img:hover, * html a.hover { /* IE hack */
    margin-top: 0px;
    margin-bottom: 10px;
}
/*]]>*/-->
</style>
<script language="javascript" type="text/javascript"><!--//--><![CDATA[//><!--
function _removeClass (el, className) {
    if (!(el && el.className)) {
        return;
    }
    var cls = el.className.split(" ");
    var ar = new Array();
    for (var i = cls.length; i > 0;) {
        if (cls[--i] != className) {
            ar[ar.length] = cls[i];
        }
    }
    el.className = ar.join(" ");
};

function _addClass (el, className) {
    _removeClass(el, className);
    el.className += " " + className;
};
function ArchorHover(imgId, isOver) {
    var elem = document.getElementById(imgId);
    if (isOver) {
        _addClass (elem, "hover");
    }
    else {
        _removeClass (elem, "hover");
    }
}
//--><!]]></script>
</head>
<body> 
<div class="out"><a href="http://somesite.com" class="img" id="img1"></a> 
        <div style="text-align:center"><a href="http://somesite.com" onmouseover="ArchorHover('img1', true);" onmouseout="ArchorHover('img1', false);">somesite.com</a></div> 
        Бла Бла Бла Бла Бла Бла Бла Бла Бла Бла Бла Бла Бла Бла Бла Бла Бла Бла Бла Бла Бла Бла Бла Бла Бла </div> 
</body>
</html>
Как сделать, чтобы работало и в Opera, сам уж подумай, пожалуйста  smile 
PM MAIL ICQ   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0524 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.