Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 11.05.2009, 14:38   #1
tanushecka
Новичок
Джуниор
 
Регистрация: 11.05.2009
Сообщений: 2
По умолчанию уменьшается прозрачность при наведении курсора мышки

Добрый день! Не могли бы рассказать, а лучше на примере показать как сделать такой сценарий:есть 3 шага,если пользователь находится на первом шаге, то при наведении курсора мышки на последующие шаги(уменьшается прозрачность). Спасибо,с уважением Татьяна.
tanushecka вне форума Ответить с цитированием
Старый 12.05.2009, 22:08   #2
acmilan
Форумчанин
 
Регистрация: 24.03.2009
Сообщений: 103
По умолчанию

Вы хотите, чтобы прозначность уменшалась до максимума или до опрделённого процента? В первом случае незнаю никаких вариантов, кроме как создать 100 картинок где будет на 1 процент уменьшаться прозрачность, во втором случае намного легче - сделать один файл с определённым процентом прозрачности. Хотя, я думаю, в первом случае возможно реализовать с помощью PHP и JavaScript. Во втором же случае данную задачу можно реализовать с помощью Флеша.
acmilan вне форума Ответить с цитированием
Старый 13.05.2009, 12:48   #3
Romanbl4
Форумчанин
 
Аватар для Romanbl4
 
Регистрация: 20.06.2007
Сообщений: 144
По умолчанию

Все делается по-другому. Есть готовая функция установки прозрачности:

Код:
function setElementOpacity(sElemId, nOpacity)
{
  var opacityProp = getOpacityProperty();
  var elem = document.getElementById(sElemId);

  if (!elem || !opacityProp) return; // Если не существует элемент с указанным id или браузер не поддерживает ни один из известных функции способов управления прозрачностью
  
  if (opacityProp=="filter")  // Internet Exploder 5.5+
  {
    nOpacity *= 100;
	
    // Если уже установлена прозрачность, то меняем её через коллекцию filters, иначе добавляем прозрачность через style.filter
    var oAlpha = elem.filters['DXImageTransform.Microsoft.alpha'] || elem.filters.alpha;
    if (oAlpha) oAlpha.opacity = nOpacity;
    else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")"; // Для того чтобы не затереть другие фильтры используем "+="
  }
  else // Другие браузеры
    elem.style[opacityProp] = nOpacity;
}

function getOpacityProperty()
{
  if (typeof document.body.style.opacity == 'string') // CSS3 compliant (Moz 1.7+, Safari 1.2+, Opera 9, IE7)
    return 'opacity';
  else if (typeof document.body.style.MozOpacity == 'string') // Mozilla 1.6 и младше, Firefox 0.8 
    return 'MozOpacity';
  else if (typeof document.body.style.KhtmlOpacity == 'string') // Konqueror 3.1, Safari 1.1
    return 'KhtmlOpacity';
  else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)[1]>=5.5) // Internet Exploder 5.5+
    return 'filter';

  return false; //нет прозрачности
}
Сохраняем этот код в какой-нибудь opacity.js, подключаем его в области <head></head>, и вызываем в теле сайта:

Код HTML:
<img id="img1" src="img.jpg" alt="image coool)))" onmouseover="setElementOpacity('img1',0.5);" onmouseout="setElementOpacity('img1',1.0);">
В результате у Вас получится, что при наведении мыши изображение станет прозрачным на 50%.

Естественно это относится не только к тэгу <img>

Последний раз редактировалось Romanbl4; 13.05.2009 в 12:50.
Romanbl4 вне форума Ответить с цитированием
Старый 14.05.2009, 10:13   #4
tanushecka
Новичок
Джуниор
 
Регистрация: 11.05.2009
Сообщений: 2
Радость

Спасибо. попробую!
tanushecka вне форума Ответить с цитированием
Старый 16.05.2009, 01:55   #5
SkyM@n
Laravel/Vue expert
Старожил Подтвердите свой е-майл
 
Аватар для SkyM@n
 
Регистрация: 08.08.2007
Сообщений: 2,832
По умолчанию

С помощью jQuery:
Код HTML:
$("#myelement").mouseover(function(){
   $(this).fadeTo("slow",0.6);
}).mouseout(function(){
   $(this).fadeTo("slow",1);
});
SkyM@n вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение изображения при наведении мышки? lionman Общие вопросы Delphi 24 12.06.2010 13:03
tchart - Как при наведении курсора на определенную точку сериэса узнать точку наведения и отобразить её xaero93 Помощь студентам 0 22.04.2009 19:28
увеличение излбражения при наведении курсора SKS HTML и CSS 4 08.03.2009 13:39
Звук при наведении мышки на ссылку BangBangFM HTML и CSS 5 07.09.2008 15:14
Выдвижение формы при наведении Stanislav Общие вопросы Delphi 11 24.08.2008 00:24