Главная / Мой вордпресс / Показ чисел в виде графики

Показ чисел в виде графики

Показ чисел в виде графикиЧасто у многих вебмастеров возникает желание показать на своем сайте счетчик посещаемости, количество постов на форуме и так далее в более красивом виде. Не просто написать цифры поверх картинки, а сделать так, чтобы цифры являлись частью картинки. Хочу показать вам элегантный способ решения данной проблемы. Для того, чтобы было понятно о чем идет речь, давайте представим, что вы решили показывать счетчик посетителей на своем сайте

То есть, цифры и текст имеют отражение. Красиво, не правда ли? Но как выдавать картинку с числами? Ведь счетчик постоянно меняется. Конечно, можно было бы сами числа выводить текстом, а фоновую картинку оставить как есть.

Что-то в этом есть, но не так красиво, как хотелось бы.  Для того, чтобы решить нашу проблему, мы должны нарисовать все цифры, которые будут выведены на экран, и поместить их в один файл с картинкой.
То есть, вместо текстовых цифр мы будем выводить картинку с цифрой.

Теперь начинаем верстать html код.

Создадим слой с фоном, куда поместим слой-контейнер для цифр.

<div id="background">
 <div id="digitscont">185</div>
</div>

Стиль для этих слоев

#background {
 background: #242424 url(imgcnt_bg.jpg) left top no-repeat;
 /* Картинка для фонового слоя */
 width: 384px;
 height: 100px;
 position: relative;
 /* Относительное позиционирование, чтобы точно
    разместить слой с цифрами */
}

/* Слой, содержащий цифры */
#digitscont{
 font: 36px Arial;
 color: #40a7ff;
 line-height: 0.7em;
 /* Позиционируем слой справа от надписи на фоне */
 position: absolute;
 left: 302px;
 top: 33px;
}

Вот, что получается в итоге:

185

Теперь нам требуется заменить цифры на картинки. Для этого вместо цифр создадим span элементы с соответствующими классами.

HTML код

<div id="background">
 <div id="digitscont">
  <span></span>
  <span></span>
  <span></span>
 </div>
</div>

Дополнение к таблице стилей

 /* Общий класс для всех цифр*/
.digits{
 display:block;
 float: left;
 height: 44px;
}

/*
   Описание каждой цифры в отдельности
   Для каждой цифры мы задаем положение фона и ширину.
   То есть, мы сдвигаем фоновую картинку, чтобы отображалась
   только нужная нам цифра. А также задаем ширину конкретной
   цифры.
*/

.digits.n1{
 background: transparent url(imgcnt_digits.jpg) 0 0 no-repeat;
 width: 16px;
}

.digits.n2{
 background: transparent url(imgcnt_digits.jpg) -16px 0 no-repeat;
 width: 22px;
}

.digits.n3{
 background: transparent url(imgcnt_digits.jpg) -38px 0 no-repeat;
 width: 19px;
}

.digits.n4{
 background: transparent url(imgcnt_digits.jpg) -57px 0 no-repeat;
 width: 21px;
}

.digits.n5{
 background: transparent url(imgcnt_digits.jpg) -78px 0 no-repeat;
 width: 20px;
}

.digits.n6{
 background: transparent url(imgcnt_digits.jpg) -98px 0 no-repeat;
 width: 20px;
}

.digits.n7{
 background: transparent url(imgcnt_digits.jpg) -118px 0 no-repeat;
 width: 20px;
}

.digits.n8{
 background: transparent url(imgcnt_digits.jpg) -138px 0 no-repeat;
 width: 20px;
}

.digits.n9{
 background: transparent url(imgcnt_digits.jpg) -158px 0 no-repeat;
 width: 20px;
}

.digits.n0{
 background: transparent url(imgcnt_digits.jpg) -178px 0 no-repeat;
 width: 20px;
}

Для того, чтобы было удобнее задавать положение фоновой картинки для каждой цифры, я использовал инструмент slice. Размечаем область для каждой цифры, а потом смотрим свойства slice-ов.
А теперь посмотрим, что получается в итоге

Красиво, не правда ли.  Но есть одна проблемка: дело в том, что слои вместо цифр должен генерировать скрипт на стороне сервера, что не очень удобно. Попробуем создавать слои на лету с помощью JavaScript.
Добавим вот такой вот скрипт в начало страницы:

function MakeDigits()
{
 // Найдем слой с цифрами
 var dig = document.getElementById(digitscont);
 if( dig != null )
  {
   // Получим текст внутри слоя
   var t = dig.innerText;
   var out = ;
   // Проходим по всей строке и цифры обрамляем в span
   for( var i = 0; i < t.length; i++ )
    out += "<span class=\"digits n" + t.charAt(i) + "\"></span>";

   // Присваиваем слою с цифрами итоговый результат
   dig.innerHTML = out;
  }
}

Ну и не забудем выполнить скрипт при загрузке страницы выполнить наш код. Итак, код страницы будет выглядеть так:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<link rel="stylesheet" type="text/css" href="ss" />
<script language="javascript">
function MakeDigits()
{
 var dig = document.getElementById(digitscont);
 if( dig != null )
  {
   var t = dig.innerText;
   var out = ;
   for( var i = 0; i < t.length; i++ )
    out += "<span class=\"digits n" + t.charAt(i) + "\"></span>";

   dig.innerHTML = out;
  }
}
</script>
</head>
<body onload="MakeDigits()">
<div id="background">
 <div id="digitscont">185</div>
</div>
</body>
</html>

Вот и все. Вообще, применение данного метода ограничивается лишь фантазией вебмастера

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*