Изображения карт с CSS

Изображения карт - Этот учебник покажет вам преимущества изображения карт и почему вы должны выполнять его, когда веб-сайты потенциала. Я возьму вас по каким образом и почему, а также показать вам отображение изображений в действии. Этот образ отображения Учебник направлен на начинающих, так и только потребует, чтобы вы знали основы HTML и CSS.

Чтобы увидеть демонстрацию изображений карт в действие нажмите здесь

Зачем использовать графические карты?

Рассмотрим следующую картинку. Обратите внимание, что это на самом деле 2 изображения, которые были размещены в одном файле. Это может быть достигнуто с использованием самого хорошего изображения такие программы, как Photoshop.

Существуют два основных преимущества графических карт. Первое время чистого кода, то, что все веб-дизайнеры должны стремиться к достижению, второе изображение отображения уникальные способности для преодоления проблем, созданное кнопки государств.

При использовании опрокидывания изображений вам необходимо скачать более чем 1 изображение, вам также необходимо отобразить это при изображении изменения состояния, а это означает, что браузер будет необходимо сделать второй загруженное изображение, таким образом, опрокидывания не будет так гладко Впервые это отображено. Использование изображений карт останавливает эту проблему в целом, потому что, когда исходное изображение загружается так же как и второй. Существует без запаздывания, это так просто.

Как использовать графические карты

Давайте рассмотрим, что я хочу хочу использовать значок выше, а при опрокидывании изображения. Это будет иметь два состояния: "серым, когда страница первоначально нагрузок, а затем цвет, когда пользователь парит над ним. Для этого нам нужно будет использовать несколько простых Styling CSS, код будет хотят выглядеть следующим образом.

body{
font-size: 12pt;
font-family: Arial;
}
#links {
padding:10px;
}
a.bookmark {
background: url('/images/delicious.gif') left no-repeat;
background-position: 0px -17px;
text-decoration: none;
pointer:cursor;
padding-left: 18px;
margin-left:5px;
}
a.bookmark:hover {
background: url('images/delicious.gif') left no-repeat;
background-position: 0px 1px;
text-decoration: none;
padding-left: 18px;
margin-left:5px;
pointer:cursor;
}


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

< a class = "bookmark" href = "#" >Delicious</ a >


Вот и все, что нужно сделать. С помощью всего лишь небольшого количества CSS и даже меньшие суммы HTML, мы можем создать очень быстрый и эффективный способ опрокидывания изображений. Чтобы увидеть демонстрацию в действии щелкните здесь.