Вход | Регистрация | FAQ
Anonymous

Изменения ссылки - изображения при наведение на него мыши

+ Ответить

Сообщений: 12 1, 2


Изменения ссылки - изображения при наведение на него мыши

Pavel2 » Сб авг 20, 2011 10:29 pm

Код: Выделить всё
<html>
     <head>
       <title>Мой документ</title>
     </head>
          <body>   
        <a style=visited "color: #660099;" href="http://www.html.net">   <p>aaa</p> </a>
          </body>
</html>

Мне нужно сделать тоже самое только чтоб ссылка была не надписью, а изображением. Т.е. Я нажимаю на изображению - ссылку, а оно изменяется. Подскажите пожалуйста, как это сделать.
Аватара пользователя

Pavel2

  • Сообщения: 7
  • Зарегистрирован: Сб авг 20, 2011 10:20 pm

Re: Изменения ссылки - изображения при наведение на него мыш

HTML.net » Вс авг 21, 2011 8:31 am

Вы можете сделать это с фоновое изображение:

a:visited { background: url(image.gif) }

- Andreas, HTML.net
Аватара пользователя

HTML.net
Site Admin

  • Сообщения: 1194
  • Зарегистрирован: Сб сен 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: Изменения ссылки - изображения при наведение на него мыш

Pavel2 » Вс авг 21, 2011 10:14 am

Спасибо, но мне нужно не чтоб изменялась фоновое изображение, а то изображение, которое является ссылкой. Но и с фоном у меня тоже не работает.

<html>
<head>
<title>Мой документ</title>
</head>

<body style="background-image: url("фон.jpg");">
<a style=active"background-image: url("b.jpg");" href="http://www.html.net"><img src="a.jpg"></a>
</body>
</html>

При запуске появляется только изображение А, при нажатии на него ничего не изменяется. Скажите, пожалуйста, что сделано не так?
Аватара пользователя

Pavel2

  • Сообщения: 7
  • Зарегистрирован: Сб авг 20, 2011 10:20 pm

Re: Изменения ссылки - изображения при наведение на него мыш

HTML.net » Вс авг 21, 2011 10:48 am

Что-то вроде этого:

<html>
<head>

<style>
a:active {
background-image: url(image.png);
}
</style>
</head>

<body>
<a href="index.htm">aaa</a>
</body>
</html>
Аватара пользователя

HTML.net
Site Admin

  • Сообщения: 1194
  • Зарегистрирован: Сб сен 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: Изменения ссылки - изображения при наведение на него мыш

Pavel2 » Вс авг 21, 2011 6:46 pm

Вы не поняли, я делаю сайт у которого будет фоновое изображение, и на фоновом изображении будут кнопки в виде картинок. Когда на эти кнопки я буду нажимать они станут объемными. А вы мне пишите пример в котором не может быть фонового изображения. Я хочу сделать эффект как на этом сайте: http://kareliaextreme.ru/.
Аватара пользователя

Pavel2

  • Сообщения: 7
  • Зарегистрирован: Сб авг 20, 2011 10:20 pm

Re: Изменения ссылки - изображения при наведение на него мыш

HTML.net » Пн авг 22, 2011 7:43 am

Я думаю, некоторые вещи теряются в переводе:)

Вы хотите, чтобы кнопка так:

<input type="button" />

С фоновое изображение, что изменения при нажатии кнопки?

Кстати, хороший сайт - и очень здорово фотографии!

- Andreas, HTML.net
Аватара пользователя

HTML.net
Site Admin

  • Сообщения: 1194
  • Зарегистрирован: Сб сен 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: Изменения ссылки - изображения при наведение на него мыш

Pavel2 » Пн авг 22, 2011 9:55 am

Если вы не поняли, мне нужно сделать такое: http://vsevolod-s10.narod2.ru/Moi_film.wmv
Аватара пользователя

Pavel2

  • Сообщения: 7
  • Зарегистрирован: Сб авг 20, 2011 10:20 pm

Re: Изменения ссылки - изображения при наведение на него мыш

naOy » Сб ноя 12, 2011 3:25 pm

Я думаю что получиться если для указания кнопок будешь использовать псевдокласс :hover
элемент:hover { ... }
При наведении мышки будут видны изменения, заданные в стилях, к примеру:
a:hover {
background:url(../images/active.png) ;
}
Аватара пользователя

naOy

  • Сообщения: 4
  • Зарегистрирован: Сб ноя 12, 2011 3:17 pm

Re: Изменения ссылки - изображения при наведение на него мыш

naOy » Сб ноя 12, 2011 3:51 pm

<a href="index.html" onmouseover="on('top_menu_main')" onmouseout="off()"><img name="top_menu_main" src="http://kareliaextreme.ru/images/menu/top_menu_main.gif" width="166" height="60" border="0" alt=""></a>
<img name="top_menu_main" src="http://kareliaextreme.ru/images/menu/top_menu_main.gif" width="166" height="60" border="0" alt="">


вот как описана кнопка на сайте http://kareliaextreme.ru
Аватара пользователя

naOy

  • Сообщения: 4
  • Зарегистрирован: Сб ноя 12, 2011 3:17 pm

Re: Изменения ссылки - изображения при наведение на него мыш

naOy » Сб ноя 12, 2011 3:53 pm

http://htmlbook.ru/html/attr/onmouseover
Аватара пользователя

naOy

  • Сообщения: 4
  • Зарегистрирован: Сб ноя 12, 2011 3:17 pm


+ Ответить

1, 2