Смена картинки при наведении курсора

Snake · March 13, 2011

Помогите, пожалуйста, написать код.

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

Заранее, спасибо.

swetlana · March 13, 2011

http://htmlbook.ru/faq/kak-sdelat-chtoby-kartinka-menyalas-pri-navedenii-na-nee

Snake · March 14, 2011

У меня криворукого возникла проблема. Использовал как 1, так и 2 способ.

Указываю пути в кодах на разные изображения, а на выходе вижу одно и то же

Пример:

http://sch-1358.narod.ru/tst4.html

З.Ы. Не смейтесь

swetlana · March 14, 2011

на минуточку…

По ссылке всё написано правильно и работает исправно.

Justnewone · March 14, 2011

Почитайте подробно про CSS спрайты (sprites), в частности, определите для себя где картинка тег а где бекграунд и в дальнейшем пользуйтесь спрайтами по возможности, это правильно во всех смыслах.

Snake · March 14, 2011

Верхняя картинка должна отличаться от нижней

Кусок кода первой картинки:


... 
A.rollover {
    background: url(http://www.sch-1358.narod.ru/index/333.gif);
...

Кусок кода второй картинки:

...
A.rollover {
    background: url(http://www.sch-1358.narod.ru/index/222.gif);
...

Ссылки на картинки разные, почему браузеры так отображают информацию?

Почитайте подробно про CSS спрайты (sprites), в частности, определите для себя где картинка тег а где бекграунд и в дальнейшем пользуйтесь спрайтами по возможности, это правильно во всех смыслах.

Обязательно это всё подробно изучу, но сейчас нет времени, на данном этапе мне интересно решение данного случая.

Спасибо.

Justnewone · March 14, 2011

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
   A.rollover {
    background: url(http://www.sch-1358.narod.ru/index/333.gif);
    display: block; 
    width: 158px; 
    height: 98px;
   }
   A.rollover:hover {
    background-position: 0 -98px;
   }
  </style>
 </head>
  <body>
  <p><a href="http://www.sch-1358.narod.ru" class="rollover"></a></p>
 </body>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
   A.rollover {
    background: url(http://www.sch-1358.narod.ru/index/222.gif);
    display: block; 
    width: 158px; 
    height: 98px;
   }
   A.rollover:hover {
    background-position: 0 -98px;
   }
  </style>
 </head>
  <body>
  <p><a href="http://www.sch-1358.narod.ru" class="rollover"></a></p>
 </body>

МММ, как бе... Хочется сросить, где вы черпали вдохновение?

Похоже, вы совсем начинающий, либо невнимательно смотрите в код страницы. Это не в обиду.

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>

 </head>
  <body>

 </body>

Все остальное, касательно кода, отображает как раз интуитивно правильное восприятия идеи спрайтов.

Если пока все это сложно для восприятия, то вот рабочий код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">

   A.rollover {
    background: url(http://www.sch-1358.narod.ru/index/333.gif);
    display: block; 
    width: 158px; 
    height: 98px;
   }
   A.rollover:hover {
    background-position: 0 -98px;
   }
   A.rollover2 {
    background: url(http://www.sch-1358.narod.ru/index/222.gif);
    display: block; 
    width: 158px; 
    height: 98px;
   }
   A.rollover2:hover {
    background-position: 0 -98px;
   }
  </style>
 </head>
  <body>
<p><a href="http://www.sch-1358.narod.ru" class="rollover"></a></p>
  <p><a href="http://www.sch-1358.narod.ru" class="rollover2"></a></p>
 </body>

Snake · March 14, 2011

Большое спасибо!

Вы правы, я в этом всего 3-й день

и последний вопрос тогда сюда же:

дана таблица на сайте: КЛИК

В опере расстояние между строками, как нужно, в остальных браузерах - намного больше. Как это исправить? Возможно вообще?

Int · March 14, 2011

p {margin:3px;}

Так со строками всё нормально?

Snake · March 14, 2011

Да, проблема решена! Огромное спасибо!

Snake · March 15, 2011

Не стану создавать новой темы, ещё нашлась пара вопросов:

1)Почему в IE такая ситуация? (IE сверху, в остальных браузерах, как на нижней картинке) Можно ли исправить? Параметры таблицы пробовал менять - не получается исправить.

2)Откуда взялось пустое место внизу ЭТОЙ страницы?

wanntuzz · March 15, 2011

Потому что padding по разному установлен.

Snake · March 16, 2011

Вы явно не на оба вопроса ответили. Параметры таблиц на всех страницах идентичны.

wanntuzz · March 17, 2011

может быть не хватает самих страниц?

Snake · March 19, 2011

Я Вас не понимаю

psywalker · March 19, 2011

Я Вас не понимаю

Да его тут мало кто понимают

swetlana · March 19, 2011

Да его тут мало кто понимают

а если кто полагает, что понимает — ещё не факт, что так оно и есть на самом деле

Int · March 19, 2011

Snake, по фотографии не лечим, давай ссылку.

А этого клоуна вообще всерьёз не воспринимай. Относись к нему как к рекламе. Вроде есть, но читать не обязательно.

Snake · March 20, 2011

Ссылка

КЛИК

Иллюстрация проблемы

Через браузеры отображается всё нормально, а через всеми любимый IE - криво

Edited March 20, 2011 by Snake

ShumNo · March 20, 2011

опустили так сказать вантуса ))

Sign In

Смена картинки при наведении курсора

Question

Link to comment

Share on other sites

19 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information