Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Прозрачный счетчик


Автор: Oleganet 19.1.2006, 12:56
Зашел как-то на один форум и увидел там прозрачные счетчики (стало интересно, как так можно сделать), вопрос наверное уже понятен: "Как сделать так, чтобы счетчик стал прозрачным?"

Вроде в регистриции счетчиков на мыло.ру или на рамблере не было такой возможности выбора прозрачности счетчика), посмотреть можете в рисунке в этом сообщении!

Автор: Innuendo 19.1.2006, 20:25
в коде счётчика задай фильтр альфа.
я точно синтаксис не знаю, потому что не использую нигде, и там у Мозиллы и ИЕ вроде разные синтаксисы.
Добавлено @ 20:26
http://forum.vingrad.ru/index.php?showtopic=47033

Автор: Aliance 5.2.2006, 21:17
А что мешало посмотреть исходники страницы? smile

На моем форуме так же стоят такие счетчики, вот код который я использую для счетчиков-картинок:
Код

<a href="..." target="_blank"><img src="..." width="88" height="33" style="FILTER: alpha(opacity=20)" onmouseover="this.style.filter = 'alpha(opacity=100)'" onmouseout="this.style.filter = 'alpha(opacity=20)'" /></a>


А для счетчиков на javascript`е ( таких как mail.ru) нужно немного другой код:

Код

<script language="JavaScript" type="text/javascript"><!--
d=document;var a='';a+=';r='+escape(d.referrer)
js=10//--></script><script language="JavaScript1.1" type="text/javascript"><!--
a+=';j='+navigator.javaEnabled()
js=11//--></script><script language="JavaScript1.2" type="text/javascript"><!--
s=screen;a+=';s='+s.width+'*'+s.height
a+=';d='+(s.colorDepth?s.colorDepth:s.pixelDepth)
js=12//--></script><script language="JavaScript1.3" type="text/javascript"><!--
js=13//--></script><script language="JavaScript" type="text/javascript"><!--
d.write('<a href="http://top.mail.ru/jump?from=980581"'+
' target=_top><img src="http://d6.cf.be.a0.top.list.ru/counter'+
'?id=980581;t=55;js='+js+a+';rand='+Math.random()+
'" alt="Рейтинг@Mail.ru"'+' border=0 height=31 width=88 style="FILTER: alpha(opacity=20)" onmouseover=\"this.style.filter = \'alpha(opacity=100)\'\" onmouseout=\"this.style.filter = \'alpha(opacity=20)\'\" /><\/a>')
if(11<js)d.write('<'+'!-- ')//--></script>
<noscript><a target="_top" href="http://top.mail.ru/jump?from=980581"><img
src="http://d6.cf.be.a0.top.list.ru/counter?js=na;id=980581;t=55" border=0 height=31 width=88 
alt="Mail.ru" style="FILTER: alpha(opacity=20)" onmouseover="this.style.filter = 'alpha(opacity=100)'" onmouseout="this.style.filter = 'alpha(opacity=20)'" /></a>
</noscript><script language="JavaScript" type="text/javascript"><!--
if(11<js)d.write('--'+'>')//--></script>

Добавлено @ 21:19
Естественно IE only. Но можно и модернизировать скрипт для совместимости.

Автор: Siansor 8.2.2006, 09:14
Интересный счетчик smile

Автор: Prof 16.2.2006, 02:20
Да интересный, но вот ИЕ говорит, что это окно будет заблокировано из-за элементов Active-X, а вот Опера - просто отображает без всяких изменений значения Альфа.
Есть-ли какой-то универсальный способ встраивания?

Автор: 12345c 16.2.2006, 04:40
В Опере можно сделать цифры из PNG, а в IE без ActiveX не обойтись.

Автор: dstorm81 16.2.2006, 09:33
Prof, где это мелкомягкий ругается на фильтры, ты наверное страницу смотришь с винта своего, а по дефолту msie тупит про локальные файлы

Автор: Prof 17.2.2006, 18:21
Т.е. Вы хотите сказать, что если эту страницу залить на сайт, такого не будет?
Если да - большое спасибо за совет. Не думал, что из-за этого может такое получаться)

Автор: Lixil 17.2.2006, 19:08
Вот спер недвно с какого - то бесплатного комплекта
Код

function $() {
  var elements = new Array();

  for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);

    if (arguments.length == 1)
      return element;

    elements.push(element);
  }

  return elements;
}

function setOpacity(element, value)
{  
  element= $(element);  
  if (value == 1){
    setStyle(element, { opacity: 
      (/Gecko/.test(navigator.userAgent) && !/Konqueror|Safari|KHTML|Opera/.test(navigator.userAgent)) ? 
      0.999999 : null });
    if(/MSIE/.test(navigator.userAgent))  
      setStyle(element, {filter: getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'')});  
  } else {  
    if(value < 0.00001) value = 0;  
    setStyle(element, {opacity: value});
    if(/MSIE/.test(navigator.userAgent))  
     setStyle(element, 
       { filter: getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'') +
                 'alpha(opacity='+value*100+')' });  
  }   
}

function getOpacity(element)
{  
  var opacity;
  if (opacity = getStyle(element, 'opacity'))  
    return parseFloat(opacity);  
  if (opacity = (getStyle(element, 'filter') || '').match(/alpha\(opacity=(.*)\)/))  
    if(opacity[1]) return parseFloat(opacity[1]) / 100;  
  return 1.0;  
}

function getStyle(element, style) 
{
    element = $(element);
    var value = element.style[style];
    if (!value) {
      if (document.defaultView && document.defaultView.getComputedStyle) {
        var css = document.defaultView.getComputedStyle(element, null);
        value = css ? css.getPropertyValue(style) : null;
      } else if (element.currentStyle) {
        value = element.currentStyle[style];
      }
    }

    if (window.opera && ['left', 'top', 'right', 'bottom'].include(style))
      if (Element.getStyle(element, 'position') == 'static') value = 'auto';

    return value == 'auto' ? null : value;
}

function setStyle(element, style)
{
    element = $(element);
    for (name in style) element.style[name] = style[name];
}


В данном случае нас интересует setOpacity(elem, value). value выставляется от 0 до 1. Работает во всех современных браузерах.
Добавлено @ 19:09
Блин пока ответа на свой вопрос дождешься уже 10 другим выдашь smile .

Автор: Wowa 28.3.2006, 00:18
Lixil, действительно неплохо. В FireFox работает. Но вот в Опере картинки просто меняются... - без плавности.
http://dojotoolkit.org/fast_widget_authoring.html

Автор: S.A.P. 28.3.2006, 09:46
Wowa, в 9 Опере все должно работать (проверял). А для более старых версий был вроде свой CSS для прозачности, с префиксом -o- кажется. Вечером домой приду, попробую.

Автор: 12345c 28.3.2006, 12:58
Да, про 9-ю нашёл информацию - http://forum.vingrad.ru/index.php?showtopic=60704&unread=1&st=0&#

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)