Jump to content
  • 0

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

Snake

Asked by Snake,

 Share

Question

Snake Explorer

Snake

Posted
Posted

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

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

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

Link to comment
Share on other sites

19 answers to this question

Recommended Posts

  • 0
Snake Explorer

Snake

Posted
  • Author
Posted

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

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

Пример:

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

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

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted

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

Link to comment
Share on other sites
  • 0
Snake Explorer

Snake

Posted
  • Author
Posted

a6fdb7e9a30f.gif

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

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


... 
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), в частности, определите для себя где картинка тег а где бекграунд и в дальнейшем пользуйтесь спрайтами по возможности, это правильно во всех смыслах.

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

Спасибо.

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted 

<!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>

Link to comment
Share on other sites
  • 0
Snake Explorer

Snake

Posted
  • Author
Posted

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

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

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

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

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

Link to comment
Share on other sites
  • 0
Snake Explorer

Snake

Posted
  • Author
Posted

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

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

2e2171acc284.gif

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

3f66197e96f1.gif

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept