Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Магазин GROWERCITY.RU (https://javascript.ru/forum/project/36250-magazin-growercity-ru.html)

DR.GONZO 13.03.2013 10:39

Маэстро, Да именно так, вы все правильно поняли.. Просто лого с размером 1000-300 занимает много место. вот я и пытаюсь его как то обрезать через css и зафиксировать строго по центру..
Маэстро, А не посоветуете не какой нибудь редактор ?

Уважаемые пользователи помогите найти решения, хочется реализовать.
Нажимаешь на кнопку (картинку) и картинка меняется

Есть просто две крутых картинки (онлайн консультант)
Линк http://yraaa.ru/publ/3-1-0-1282

PS с уважением.

Маэстро 13.03.2013 11:45

Цитата:

Сообщение от DR.GONZO
Просто лого с размером 1000-300 занимает много место. вот я и пытаюсь его как то обрезать через css и зафиксировать строго по центру..
А не посоветуете не какой нибудь редактор ?

Я уже сказал, что корректировать изображение на клиенте (в браузере) с помощью css - это плохо. У Вас же есть Adobe Photoshop? Сохраните картинку как растровое изображение в файл *.png
Если интерфейс на русском, то дальше работайте в Меню-Изображение-Размер изображения/Размер холста.
Цитата:

Сообщение от DR.GONZO
Нажимаешь на кнопку (картинку) и картинка меняется

Используйте событие onclick на картинке и по нему меняйте свойство src у этой картинки.

DR.GONZO 10.01.2014 01:02

Цитата:

Сообщение от Маэстро (Сообщение 240334)
Я уже сказал, что корректировать изображение на клиенте (в браузере) с помощью css - это плохо. У Вас же есть Adobe Photoshop? Сохраните картинку как растровое изображение в файл *.png
Если интерфейс на русском, то дальше работайте в Меню-Изображение-Размер изображения/Размер холста.

Используйте событие onclick на картинке и по нему меняйте свойство src у этой картинки.

Спасибо Маэстро, за помощь..
Приятно когда люди окликаются :thanks:

От джава кнопки решил отказаться, грузит слишком сайт...

Теперь новый делама
В java есть такие события как onmouseover, onmouseout и onclick

А как на счет CSS.
Возможно ли реализовать открытие подобной понели, только по клику..
P.S на сайте такая панель реализзована, осталось только найти решение открытия по клику...

Zuenf 10.01.2014 22:18

Цитата:

От джава кнопки решил отказаться, грузит слишком сайт...
Одна "джава" кнопка и так грузит сайт? :lol:
Видимо ты что-то не так делаешь.

Цитата:

Возможно ли реализовать открытие подобной понели, только по клику..
Что то типа события onclick на css - http://ruseller.com/lessons.php?rub=2&id=1516

DR.GONZO 11.01.2014 14:46

Цитата:

Сообщение от Zuenf (Сообщение 291537)
Одна "джава" кнопка и так грузит сайт?
Видимо ты что-то не так делаешь.

Да не, просто кнопка такая.... не знаю кто её делал!
Но она тормазит даже пустой движек без модулей и на дефолтном шабе...

Спасибо за ссылочку буду разбираться.. ;)

DR.GONZO 13.01.2014 02:45

Доброго ночи.

Что то у меня не особо получается прикрепить функцию актив к моей панели =(

Кто нибудь подскажите пожалуйста как правельно прикрепить функцию active


#panel {
z-index: 999;
position: fixed; /* положение */
top: 100px; /* отступ сверху */
right: 0; /* отступ слева */
background-image: url(); /* цвет фона */
background-position: center;
background-repeat: no-repeat;
width: 62px; /* ширина блока */
height: 389px; /* высота блока */
font: 14px Lobster; /* размер и тип шрифта */
color: #fff; /* цвет текста */
text-align: center; /* выравнивание текста по центру */
padding: 5px; /* отступы от границ внутри блока */
-webkit-transition-duration: 0.3s; /* анимационное выдвижение для всех браузеров*/
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-border-radius: 0 5px 5px 0; /* закругление границ для всех браузеров*/
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}


/* СКРЫТЫЙ БЛОК */
#hidden_panel {
z-index: 999;
position: fixed; /* положение */
top: 100px; /* отступ сверху */
right: -200px; /* отступ слева */
background: url(**);
background-repeat: no-repeat;
background-position: center;
color: #000; /* цвет текста */
width: 185px; /* ширина блока */
height: 389px; /* высота блока */
padding: 4px; /* отступы от границ внутри блока */
text-align: left; /* выравнивание текста */

-webkit-transition-duration: 0.3s; /* анимационное выдвижение для всех браузеров*/
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;

-webkit-border-radius: 0 5px 5px 0; /* закругление границ для всех браузеров*/
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}

#panel:hover {
z-index: 999;
right: 185px; /* при наведении выдвигается на скрытые 200px + 20px отступы */
background-image: url(http://); /* цвет фона */
background-position: center;
background-repeat: no-repeat;
-webkit-transition-duration: 0.3s; /* анимационное выдвижение для всех браузеров*/
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-border-radius: 0 5px 5px 0; /* закругление границ для всех браузеров*/
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
#panel:hover #hidden_panel {
right: 0; /* отступ слева */
z-index: 999;
background: url(***);
background-repeat: no-repeat;
background-position: center;
}

Zuenf 13.01.2014 15:31

http://fiddle.jshell.net/45s6u/1/
Вот смотри, разбирайся, прикручивай анимацию к .hiding_panel
Но этот вариант не кроссбраузерный, лучше на js делать.


Часовой пояс GMT +3, время: 21:18.