Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 28.01.2013, 17:20
Аватар для scpooch
Интересующийся
Отправить личное сообщение для scpooch Посмотреть профиль Найти все сообщения от scpooch
 
Регистрация: 28.01.2013
Сообщений: 15

Deff,
не меняются, а картинок будет очень много (на тысячи пойдет счет по примеркам). Теперь вот сижу и не врубаюсь, как сделать. Сам спрайт готов, код нужно настрочить теперь..
Ответить с цитированием
  #22 (permalink)  
Старый 28.01.2013, 17:25
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

scpooch,
Не делать все в один спрайт, а нарезать спрайты постранично, имя картинки совместить с расширением страницы
Ответить с цитированием
  #23 (permalink)  
Старый 28.01.2013, 17:43
Аватар для scpooch
Интересующийся
Отправить личное сообщение для scpooch Посмотреть профиль Найти все сообщения от scpooch
 
Регистрация: 28.01.2013
Сообщений: 15

Deff,
я вас не понял.
У меня на странице, грубо говоря, квадрат (1000х1000). Он разбит, скажем, на 25 фрагментов (200х200). Изначально я его нарезал на эти 25 кусков в фотошопе и вставил на страницу тем же квадратом. Теперь пытаюсь без нарезки исходника разбить его на эти самые фрагменты (200х200) в CSS.
Ответить с цитированием
  #24 (permalink)  
Старый 28.01.2013, 18:16
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

scpooch,
я говорил о том, если объем полного спрайта более 700 кБ, её стоит
разбить на части, желательно привязанных к страницам использования,? если данное разделение возможно( можно привязать название файла к названию страницы, на которых будет использоваться данный спрайт)
=================================================
Для последующей вставки удобнее делать спрайт в одну строку, вытянутой в длину или ширину(конечно, если кол-во картинок не 1000)
Квадратом - сложно вычислять смещение
а так чисто ставите бекграундом

/* Тут спрайт вытянут по вертикали */
div[id*="zap"] {
  background-image:url("Ccылка на картинку")
}

#zap1 {
  background-position:50% 0;
}
#zap2 {
  background-position:50% 100px;
}
#zap2 {
  background-position:50% 200px;
}
#zap3 {
  background-position:50% 300px;
}
....//И т.д.

Возможно удобнее при много картинках ставить позицию бекграунда не через css, а скриптом...

т.е тогда в css остаётся
div[id*="zap1"],div[id*="zap2"],div[id*="zap3"] {
  background-image:url("Ccылка на картинку")
}
div[id*="zap4"],div[id*="zap5"],div[id*="zap6"]  {
  background-image:url("Ccылка на картинку")
}
(Это если спрайты по 30 картинок

Последний раз редактировалось Deff, 28.01.2013 в 18:43.
Ответить с цитированием
  #25 (permalink)  
Старый 28.01.2013, 18:19
Аватар для scpooch
Интересующийся
Отправить личное сообщение для scpooch Посмотреть профиль Найти все сообщения от scpooch
 
Регистрация: 28.01.2013
Сообщений: 15

Deff,
спрайт вышел 209 кб, я думаю это нормально. Сейчас протестирую..

Сначала вышла какая-то белиберда - позиции фрагментов перепутались и картинка в паззл превратилась. Подредактировал код и все встало на места (правда, так и не понял, почему косяк такой).

Код CSS
.awki {
        height:200px;
        width:200px;
        background:url(../images/a.jpg)
}

/* awki */
.awki.a1 {background-position:0px 0px;}
.awki.a2 {background-position:200px 0px;}
.awki.a3 {background-position:400px 0px;}
.awki.a4 {background-position:600px 0px;}
.awki.a5 {background-position:800px 0px;}
.awki.a6 {background-position:0px 200px;}
.awki.a7 {background-position:200px 200px;}
.awki.a8 {background-position:400px 200px;}
.awki.a9 {background-position:600px 200px;}
.awki.a10 {background-position:800px 200px;}
.awki.a11 {background-position:0px 400px;}
.awki.a12 {background-position:200px 400px;}
.awki.a13 {background-position:400px 400px;}
.awki.a14 {background-position:600px 400px;}
.awki.a15 {background-position:800px 400px;}
.awki.a16 {background-position:0px 600px;}
.awki.a17 {background-position:200px 600px;}
.awki.a18 {background-position:400px 600px;}
.awki.a19 {background-position:600px 600px;}
.awki.a20 {background-position:800px 600px;}
.awki.a21 {background-position:0px 800px;}
.awki.a22 {background-position:200px 800px;}
.awki.a23 {background-position:400px 800px;}
.awki.a24 {background-position:600px 800px;}
.awki.a25 {background-position:800px 800px;}


Вот часть кода, отвечающего за вывод фрагмента.
<td>
			<a href="www.mysite.net/gallery/a25.html"> /* здесь линк, куда ссылается фрагмент  */
				<div id="a25"><img src="images/blank.gif" class="awki a7" alt=""></a></td></div></a></td>


Возвращаемся к выделению фрагмента (бордером или чем еще можно)

Последний раз редактировалось scpooch, 28.01.2013 в 19:04.
Ответить с цитированием
  #26 (permalink)  
Старый 28.01.2013, 21:07
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Чот Аввы - 200x200 , типично - 170х240

Вернусь поздно... так что терпите
Ответить с цитированием
  #27 (permalink)  
Старый 28.01.2013, 21:09
Аватар для scpooch
Интересующийся
Отправить личное сообщение для scpooch Посмотреть профиль Найти все сообщения от scpooch
 
Регистрация: 28.01.2013
Сообщений: 15

Сообщение от Deff Посмотреть сообщение
Чот Аввы - 200x200 , типично - 170х240
Я вообще ничего не понял
Ответить с цитированием
  #28 (permalink)  
Старый 28.01.2013, 21:31
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

scpooch,
Приеду - в час или два ночи по москве
Аватарки стандартных размеров 170х240
Ответить с цитированием
  #29 (permalink)  
Старый 28.01.2013, 21:33
Аватар для scpooch
Интересующийся
Отправить личное сообщение для scpooch Посмотреть профиль Найти все сообщения от scpooch
 
Регистрация: 28.01.2013
Сообщений: 15

Deff,
там речи про аватарки не идет, идея другая. Буду ждать, пока попробую сам что-нибудь сделать. Удачной поездки!
Ответить с цитированием
  #30 (permalink)  
Старый 29.01.2013, 18:35
Аватар для scpooch
Интересующийся
Отправить личное сообщение для scpooch Посмотреть профиль Найти все сообщения от scpooch
 
Регистрация: 28.01.2013
Сообщений: 15

Немного покопал код и стала работать версия:
<style>
   a25:target {
       visibility: hidden; 
   }
  </style>

<a href="http://mysite.net/next/a25.html">
<a25 id="a25"><img src="images/blank.gif" width="200" height="200" border="0" alt=""></a25></a>


Правда, то, что мне надо - border, либо не фурычит, либо криво встает.
Полагаю, это из-за того, что:

1) у самого фрагмента border="0", и все фрагменты стыкованы вплотную, образуя единую картинку
2) использован спрайт с 1х1px гифкой в основе

Что можно прописать

<style>
   a25:target {
       ??????????????;  /* [COLOR="Red"]СЮДА[/COLOR] */
   }
  </style>


, чтобы выделить фрагмент? При этом, желательно сохранить основу со спрайтом.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Задача такова : нужно при клике на ссылку открыть страницу с новой вкладке, оставаясь asustekk Javascript под браузер 4 25.05.2012 14:04
Изменение изображения при наведении mishko_o Элементы интерфейса 4 24.10.2011 16:20
30(1|2) редирект от сервера. Или как лучше сделать редирект при верной отсылке форма. pizzZ AJAX и COMET 2 18.02.2010 09:06
Смена картинки (бекграунд дива ) при событии (нажатие клавиш или клавиши и мыши) Monster Events/DOM/Window 5 01.11.2009 01:16
как при добавлении изображения на сервер считывать имя в БД? solomusic Серверные языки и технологии 3 12.06.2008 23:28