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

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

Want create site? Find Free WordPress Themes and plugins.

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

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

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

Теперь начинаем верстать 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>

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

Did you find apk for android? You can find new Free Android Games and apps.

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

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

*

Если вы хотите получать уведомления на свой E-mail о появлении новых статей, то рекомендуем вам чуть ниже ввести свой электронный почтовый адрес.