Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.11.2011, 14:38
Кандидат Javascript-наук
Отправить личное сообщение для nyols Посмотреть профиль Найти все сообщения от nyols
 
Регистрация: 16.02.2011
Сообщений: 134

Частично закрашиваемые изображения
К примеру для вывода рейтинга материала показываются 5 звезд, и в зависимости от рейтинга первые звезды закрашены.
Для этого нужно округлить рейтинг до целого числа.
А если есть необходимость без округления, к примеру рейтинг 2.5 то нужно вывести 2 звезды закрашены и третью на половину.

Как средствами html можно частично закрашивать изображения ?
Ответить с цитированием
  #2 (permalink)  
Старый 16.11.2011, 14:54
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от nyols
Как средствами html можно частично закрашивать изображения ?
Как вариант, сделать png-шную картинку с "дырявыми" звёздами, а вот "подложкой" закрашивать нужную ширину...
Ответить с цитированием
  #3 (permalink)  
Старый 16.11.2011, 14:54
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

<img src="star.gif" style="star-bg.gif; background-position: -20px 0;">

Где star.gif -- изображение с прозрачной дыркой в форме звезды.
star-bg.gif -- изображение нужного цвета и нужного размера (будет закрашивать звезду).
Ответить с цитированием
  #4 (permalink)  
Старый 16.11.2011, 15:08
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Или вот такой пример...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
#box {	
	position: relative;
	width: 100px;
	height: 20px;
	border: 1px solid;
}
#rating,
#stars {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}
#stars {
	width: 100%;
	background: url('http://javascript.ru/forum/images/smilies/smile.gif');
}
#rating {
	width: 0;
	background-color: orange;
}
</style>
<script type="text/javascript">
function Go(N) {
	var l=document.getElementById('box').offsetWidth;
	l=(l*N)/100;
	l=l.toFixed();
	document.getElementById('rating').style.width=l+'px';
}
</script>
</head>
<body onload='Go(30)'>
<div id='box'>
	<div id='rating'></div>
	<div id='stars'></div>
</div>
</body>
</html>


Только у меня "дырявый" фон, а не картинка. Но думаю смысл понятен...
Ответить с цитированием
  #5 (permalink)  
Старый 16.11.2011, 15:18
Кандидат Javascript-наук
Отправить личное сообщение для nyols Посмотреть профиль Найти все сообщения от nyols
 
Регистрация: 16.02.2011
Сообщений: 134

Спасибо Kolyaj и ksa, смысл ясен
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получение высоты изображения theo_ Javascript под браузер 2 21.06.2011 16:04
карта увеличенного изображения Luna82 Элементы интерфейса 11 15.06.2011 10:17
Проверка размера изображения Bizarre Общие вопросы Javascript 4 09.03.2011 18:02
отрисовка изображения по произвольным координатам Th0m@$ Events/DOM/Window 14 23.01.2010 16:04
как при добавлении изображения на сервер считывать имя в БД? solomusic Серверные языки и технологии 3 12.06.2008 23:28