переключение картинок при наведении на ссылку выбора - PullRequest
Новая
       33

переключение картинок при наведении на ссылку выбора

1 голос
/ 30 марта 2010

Я новичок в этом. Я пишу на html, и мне было любопытно, можно ли переключиться на другое изображение при наведении ссылки.

Ответы [ 4 ]

1 голос
/ 30 марта 2010

Абсолютно. Если ваш код выглядит так: 

<div class="menu">
<a href="1.html">First</a>
<a href="2.html">Second</a>
<a href="3.html">Third</a>
</div>

Просто добавьте несколько стилей к вашей голове: 

<style type="text/css">
    /* These are comments, and are ignored by the browser
            . {dot} is the CSS selector for a class
            We are selecting all of the "a" elements inside of 
            the element with a class of "menu"
    */
    .menu a {
        background-image: url('link.gif');
        width: 100px;
    }

    /* :hover, :active, and :focus are all pseudo-selectors -- they select
            elements based on their state rather than based on their attributes
    */
    .menu a:hover, .menu a:active, menu a:focus {
        background-image: url('link_hover.gif');
    }
</style>

Одним из лучших мест для начала изучения HTML и CSS является W3Schools . Прочитав их примеры, вы сможете лучше понять основы, а затем просмотреть здесь вопросы HTML и CSS , которые помогут вам лучше понять, как все устроено. Удачи!

1 голос
/ 30 марта 2010

Как говорит Шон Виейра, распространенным способом является модификация CSS ваших тегов HTML в зависимости от состояния вашего тега меню.

Это может быть так просто, как это: 

<style>
div.myimg:hover   {
    background-image:url(p1.png);
}

div.myimg  {
    background-image:url(p2.png);
}
</style>

<div class="myimg">
<a href="#">my link here</a>
</div>
</code>

Также возможно и не намного сложнее использовать функцию hover из библиотеки JQuery.

1 голос
/ 30 марта 2010

Да, вы можете, здесь - это пример использования javascript.

0 голосов
/ 30 марта 2010

Я очень рекомендую использовать спрайты CSS:

http://www.alistapart.com/articles/sprites

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

У этого подхода есть несколько существенных преимуществ:

  • Объединяя два изображения в одно, вы устраняете необходимость в одном HTTP-запросе, что повышает производительность загрузки страницы.
  • При использовании обычного эффекта свопинга JavaScript изображение при наведении не будет загружаться, пока пользователь не наведет курсор мыши на ссылку. Это создает заметную задержку при загрузке / рендеринге, что визуально раздражает. Используя CSS-спрайты, оба состояния изображения загружаются одновременно (они являются частью одного и того же изображения), поэтому эффект при наведении изображения происходит мгновенно.
  • Некоторые (включая меня) утверждают, что простой обмен изображениями при наведении изображения относится к уровню представления (CSS), а не к уровню поведения (JavaScript). Это просто хорошая практика, и она может привести к более понятному и понятному коду.

Конечно, это предполагает, что изображение, которое вы переключаете, является самим изображением ссылки, а не другим элементом на странице, который изменяется при наведении курсора на ссылку. Это, конечно, возможно, но потребует JavaScript.

...