уменьшается прозрачность при наведении курсора мышки - JavaScript, Ajax

tanushecka · 11.05.2009, 14:38

Добрый день! Не могли бы рассказать, а лучше на примере показать как сделать такой сценарий:есть 3 шага,если пользователь находится на первом шаге, то при наведении курсора мышки на последующие шаги(уменьшается прозрачность). Спасибо,с уважением Татьяна.

acmilan · 12.05.2009, 22:08

Вы хотите, чтобы прозначность уменшалась до максимума или до опрделённого процента? В первом случае незнаю никаких вариантов, кроме как создать 100 картинок где будет на 1 процент уменьшаться прозрачность, во втором случае намного легче - сделать один файл с определённым процентом прозрачности. Хотя, я думаю, в первом случае возможно реализовать с помощью PHP и JavaScript. Во втором же случае данную задачу можно реализовать с помощью Флеша.

Romanbl4 · 13.05.2009, 12:48

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

Код:

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>

tanushecka · 14.05.2009, 10:13

Спасибо. попробую!

SkyM@n · 16.05.2009, 01:55

С помощью jQuery:

Код HTML:

$("#myelement").mouseover(function(){
   $(this).fadeTo("slow",0.6);
}).mouseout(function(){
   $(this).fadeTo("slow",1);
});

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

16.05.2009, 01:55	#5
SkyM@n Laravel/Vue expert Старожил Подтвердите свой е-майл Регистрация: 08.08.2007 Сообщений: 2,832	С помощью jQuery: Код HTML: $("#myelement").mouseover(function(){ $(this).fadeTo("slow",0.6); }).mouseout(function(){ $(this).fadeTo("slow",1); });

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Изменение изображения при наведении мышки?	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

12.05.2009, 22:08	#2
acmilan Форумчанин Регистрация: 24.03.2009 Сообщений: 103	Вы хотите, чтобы прозначность уменшалась до максимума или до опрделённого процента? В первом случае незнаю никаких вариантов, кроме как создать 100 картинок где будет на 1 процент уменьшаться прозрачность, во втором случае намного легче - сделать один файл с определённым процентом прозрачности. Хотя, я думаю, в первом случае возможно реализовать с помощью PHP и JavaScript. Во втором же случае данную задачу можно реализовать с помощью Флеша.

14.05.2009, 10:13	#4
tanushecka Новичок Джуниор Регистрация: 11.05.2009 Сообщений: 2	Спасибо. попробую!