Версия для печати темы

Нажмите сюда для просмотра этой темы в обычном формате

Форум о web-дизайне, графике - RusForumz _ Web-программирование: другое _ Как здкелать

Автор: ArhiModer 30.4.2008, 15:08

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

Автор: антиКИЛЛЕР 30.4.2008, 22:58

Это можно сделать либо на ява скриптах, либо на CSS. Как сделать это на ява-скрипте не могу точно сказать, т.к. не очень в нём разбираюсь...
На css алгоритм примерно такой:
Создаешь некий класс для img. А качестве обычного прописываешь там беграунд первой картинки. А потом прописываешь тоже самое, но для hover (и там уже прописываешь URL второй картинки которая должна показываться при наведении). В случаее css желателно чтобы было зарнее известно ли размеры картинки или сама картинка была однородной (чтобы не возникало проблем с правильным отображением и повторением картинки)/
Вот например чтобы это было в ячейках таблицы. Синтаксис точно не понмю, поэтмоу за достоверную точность не ручаюсь но должно выгдлядеть примерно так:
td.ResetImage {background-image: url('images/img_not_hover.gif');}
td.ResetImage:hover {background-image: url('images/img_hover.gif');}
Так же тебе скорее всего придётся использовать "background-position", чтобы правильно расположить свою картинку. И лучше всего установить ещё фиксированные размеры у этих ячеек, совпадающие с размерами картинок.

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

Автор: krest 3.5.2008, 17:11

А че незя что ли сделать класс типа a.img в ссылке поместить фоновый рисунок и менять его hover - ром, типа
<a class="img" href="..."><a/>
и все будет работать в ИЕ6

Автор: ArhiModer 3.5.2008, 17:59

Можеш по подробней

Автор: krest 3.5.2008, 21:17

Код


<style>

  .blockV1 {width:100px; height:50px;}
  .blockV1 a .blockD1 {background:#00FF80; background:url("images11.gif");width:100%; height:100%;}
  .blockV1 a:hover { background:#808080; color:#00FF00; background:url("images12.gif");}
  .blockV1 a:hover .blockD1 { background:#808080; color:#00FF00; background:url("images12.gif");}

  .blockV2 {width:100px; height:50px;}
  .blockV2 a .blockD2 {background:#00FF80; background:url("images21.gif");width:100%; height:100%;}
  .blockV2 a:hover { background:#808080; color:#00FF00; background:url("images22.gif");}
  .blockV2 a:hover .blockD2 { background:#808080; color:#00FF00; background:url("images22.gif");}

/* и так далее для каждой кнопки */

</style>

<html>

<div class="blockV1">
<a href="#"><div class="blockD1"> </div></a>
</div>

<div class="blockV2">
<a href="#"><div class="blockD2"> </div></a>
</div>

<!-- и так далее для каждой кнопки -->

</html>


естественно дивы blockVxx можно разместить либо с помощью таблицы или еще как-нибудь

Автор: krest 3.5.2008, 21:25

Еще возможно нужно будет запретить повтор фонового рисунка указанием свойства
background-repeat:no-repeat;
после background: url( "..."); т.е.
background: url ("..."); background-repeat:no-repeat;

Автор: 3ABAPKA 4.5.2008, 6:40

А можно вот так!

Код
<a href="" > <IMG onmouseover="this.src='C01-01.jpg'" onmouseout="this.src='C01-04.jpg'" src="C01-04.jpg" border="0" align="absmiddle" height="100"></a>

Можно не использовать <a>

Русская версия Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)