X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> помогите в верстке
wasd
wasd
Topic Starter сообщение 14.7.2011, 20:52; Ответить: wasd
Сообщение #1


Участник
***

Группа: User
Сообщений: 150
Регистрация: 10.2.2011
Поблагодарили: 1 раз
Репутация:   -3  


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

сайт - sega-mega-drive . ru(надеюсь в индекс адрес не попадет так)
В подвале у меня будут находится превьюшки/скриншоты/ игр при наведение хотелось бы чтобы эта картинка была нормальная цветная (там есть одна в примере MK3U) и чтобы когда по ней щелкнули и перешли на страницу с этой игрой, она оставалась такой же цветной, вопрос как это лучше и удобней осуществить сайт на простом html.

Заранее благодарен за помощь!
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mr4q
mr4q
сообщение 14.7.2011, 20:55; Ответить: mr4q
Сообщение #2


Верстаю дорого
*****

Группа: Active User
Сообщений: 697
Регистрация: 18.9.2007
Из: Харьков, Украина
Поблагодарили: 325 раз
Репутация:   79  


Покоряем псевдоклассы, в частности :hover, :visited и др.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
wasd
wasd
Topic Starter сообщение 14.7.2011, 20:57; Ответить: wasd
Сообщение #3


Участник
***

Группа: User
Сообщений: 150
Регистрация: 10.2.2011
Поблагодарили: 1 раз
Репутация:   -3  


пожалуйста по подробней - я тугодум.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mr4q
mr4q
сообщение 14.7.2011, 21:04; Ответить: mr4q
Сообщение #4


Верстаю дорого
*****

Группа: Active User
Сообщений: 697
Регистрация: 18.9.2007
Из: Харьков, Украина
Поблагодарили: 325 раз
Репутация:   79  


(wasd @ 14.7.2011, 19:57) *
пожалуйста по подробней - я тугодум.


htmlbook.ru в помощь.

Делаем блок с классом imgs, к которому применим стили. Картинки толкаем в ссылки под тег <a>.
#html
<div class="imgs">
<a href="#"><img src="path/img.jpg" alt="alt"/></a>
</div>

#css

.imgs a {opacity: 0.6;} //задаём непрозрачность 60% для картинок
.imgs a:hover {opacity:1;} // возвращаем непрозрачность до 100% для ссылок (в нашем случае картинок) при наведении
.imgs a:visited {opacity:1;} // оставляем уровень непрозрачности 100% для уже посещенных ссылок


Сообщение отредактировал mr4q - 14.7.2011, 21:05


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
rjksdfhe
rjksdfhe
сообщение 14.7.2011, 21:09; Ответить: rjksdfhe
Сообщение #5


Straight arms
*******

Группа: Active User
Сообщений: 2760
Регистрация: 21.4.2009
Из: Мытищи, МО, РФ
Поблагодарили: 1111 раз
Репутация:   163  


В подвале у меня будут находится превьюшки/скриншоты/ игр при наведение хотелось бы чтобы эта картинка была нормальная цветная (там есть одна в примере MK3U) и чтобы когда по ней щелкнули и перешли на страницу с этой игрой, она оставалась такой же цветной, вопрос как это лучше и удобней осуществить сайт на простом html.


Никакими извращениями в CSS это не сделаете никогда.
Ищите программиста со знаниями JQuery.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
wasd
wasd
Topic Starter сообщение 14.7.2011, 21:23; Ответить: wasd
Сообщение #6


Участник
***

Группа: User
Сообщений: 150
Регистрация: 10.2.2011
Поблагодарили: 1 раз
Репутация:   -3  


Не как нельзя сделать отдельный файл CSS под эти картинки?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
artanik
artanik
сообщение 14.7.2011, 21:31; Ответить: artanik
Сообщение #7


Участник
***

Группа: User
Сообщений: 225
Регистрация: 3.5.2011
Из: Украина, Львов
Поблагодарили: 147 раз
Репутация:   47  


Используйте :hover и прозрачность, типа так
.footer a {
    -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
    -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
    opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); }/* синтаксис IE5.5+ (является предпочтительным) */
    filter: alpha(opacity=50); } /* синтаксис IE4 */
}
.footer a:hover{
    -moz-opacity: 1; /* Mozilla 1.6 и ниже */
    -khtml-opacity: 1; /* Konqueror 3.1, Safari 1.1 */
    opacity: 1; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); }/* синтаксис IE5.5+ (является предпочтительным) */
    filter: alpha(opacity=100); } /* синтаксис IE4 */
}

для текущей страницы нужно задать какой-то доп. класс, и прицепить его к ссылке на текущей странице
.footer a.active{
    -moz-opacity: 1; /* Mozilla 1.6 и ниже */
    -khtml-opacity: 1; /* Konqueror 3.1, Safari 1.1 */
    opacity: 1; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); }/* синтаксис IE5.5+ (является предпочтительным) */
    filter: alpha(opacity=100); } /* синтаксис IE4 */
}

для плавного появления, можно использовать jQuery и его метод .animation()
например:
jQuery('.footer a').css('opacity','0.5').mouseover(function() {
    jQuery(this).animate({opacity: 1}, 500 );
});

или найти в гугле js библиотеку, их полно....
или заплатить верстальщику денежку, и вам сделают всё на высшем уровне wink.gif

Сообщение отредактировал artanik - 14.7.2011, 21:42


--------------------
Мой промо-сайт

Нужна качественная вёрстка сайтов? Обращайтесь: ICQ 555-177-362 


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
wasd
wasd
Topic Starter сообщение 14.7.2011, 21:36; Ответить: wasd
Сообщение #8


Участник
***

Группа: User
Сообщений: 150
Регистрация: 10.2.2011
Поблагодарили: 1 раз
Репутация:   -3  


Благодарю, jQuery работает с обычным html и css ?

Нет желания платить так как мне по мимо дизайна еще и знания нужны,
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
artanik
artanik
сообщение 14.7.2011, 21:46; Ответить: artanik
Сообщение #9


Участник
***

Группа: User
Сообщений: 225
Регистрация: 3.5.2011
Из: Украина, Львов
Поблагодарили: 147 раз
Репутация:   47  


вот что нужно:
в разделе <head> подключить библиотеку, что бы не грузить её на сервер, используйте с гугл сервера
http://code.google.com/apis/libraries/devguide.html
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery('.footer a').css('opacity','0.5').mouseover(function() {
    jQuery(this).animate({opacity: 1}, 500 );
});
</script>

ну а там где .footer это обычный селектор ксс, для доступа к элементу smile.gif

ещё один момент:
<script type="text/javascript">
jQuery('.footer a').css('opacity','0.5').mouseover(function() {
    jQuery(this).animate({opacity: 1}, 500 );
});
</script>


нужно писать в конце документа, так как js не знает DOM-модель
для того что бы он знал структура сайта, ему нужно "приказать" дождаться полной загрузки документа
<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery('.footer a').css('opacity','0.5').mouseover(function() {
      jQuery(this).animate({opacity: 1}, 500 );
  });
});
</script>


Сообщение отредактировал artanik - 14.7.2011, 21:42


--------------------
Мой промо-сайт

Нужна качественная вёрстка сайтов? Обращайтесь: ICQ 555-177-362 


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
neonick
neonick
сообщение 22.7.2011, 3:08; Ответить: neonick
Сообщение #10


Новичок
*

Группа: Viewer
Сообщений: 9
Регистрация: 13.7.2011
Поблагодарили: 1 раз
Репутация:   0  


Во вы парню голову заморочили своим jQuerry wink.gif

Если нужны знания по этому вопросу, читай это: http://htmlbook.ru/faq/kak-sdelat-chtoby-k...avedenii-na-nee
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Помогите выбрать программу
Помогите выбрать программу
11 impak 1330 11.12.2017, 13:11
автор: Mikki
Открытая тема (нет новых ответов) Помогите найти плагин на WP
Отзывы с профилей соц сетей
1 SEOMR 433 30.11.2017, 7:18
автор: Nell
Открытая тема (нет новых ответов) Помогите найти проблему
Долгий ответ сервера
6 maxim1249 680 29.11.2017, 17:27
автор: genjnat
Открытая тема (нет новых ответов) Услуги по верстке
0 KOLIAN 336 29.11.2017, 15:31
автор: KOLIAN
Открытая тема (нет новых ответов) Помогите оценить новотник. Плиз
1 Alex-777 516 29.11.2017, 7:18
автор: grumdas


 



RSS Текстовая версия Сейчас: 13.12.2017, 12:00
Дизайн