Войти

Показать полную графическую версию : Картинка меняющаяся при наведении.


BARTBERSERK
19-07-2009, 19:03
Помогите пожалуйста уже обыскался в Интернете.
Вобщем Хочу Сделать Чтоб кнопочки менялись одна на другую при наведении на неё мышью и можно было переходить по ссылке.
Как на етом сайте : Blizzard.com
Помогите пожалуйста! Уже Устал искать. :'(

K@kTuS
19-07-2009, 19:09
<td height="96" background="/shared/blizz-com/images/layout/spotlight_bgm.gif" align="center">
<a href="http://www.worldofwarcraft.com/" onMouseOver="point('wrath')" onMouseOut="nopoint('wrath')">
<img src="/shared/blizz-com/images/layout/spotlight_logo_wowwrath_off.jpg" width="129" height="96"
border="0" name="wrath"></a></td>
ответ в исходном коде страницы

Coutty
19-07-2009, 19:16
K@kTuS, сам по себе этот отрывок работать не будет - тут же функция вызывается.
Но в целом - это так:
<img src="image1.jpg" onmouseover="this.src='image2.jpg';" onmouseout="this.src='image1.jpg';" />

K@kTuS
19-07-2009, 19:20
сам по себе этот отрывок работать не будет »
я знаю, я лишь дал наводку на решение проблемы :)
Если присмотреться, onmouseout и onmouseover в моем посте выделены жирным шрифтом ))

BARTBERSERK
19-07-2009, 19:29
Спасибо
Вот ещё вопрос Надо Вставить 7 фото примерно так

( ) ( ) ( ) ( ) ( ) ( ) ( )

У каждого Фото есть 2 версии обычное и которе появляется при наведении .
Ещё Желательно чтобы при загрузке страницы фото стояли сразу на своих местах без наводки.подскажите плиз! :)

BARTBERSERK
19-07-2009, 20:19
Люди Помогите Пожалуста !!! Подскажите Что Надо Писать!!! :'(

proxy
19-07-2009, 20:59
BARTBERSERK,
как расположить фото можно почитать тут (http://designformasters.info/posts/css-float-theory-and-practice/) (галерея изображений)

У каждого Фото есть 2 версии обычное и которе появляется при наведении »
делай из фотографий ссылки, что бы при нажатии открывались большие версии фоторографий.

Опять же, есть готовые решения LiteBox например (http://www.huddletogether.com/projects/lightbox/), пример (http://www.huddletogether.com/projects/lightbox/)

Вобщем Хочу Сделать Чтоб кнопочки менялись одна на другую при наведении на неё мышью и можно было переходить по ссылке. »
K@kTuS, Coutty,
а с css normal / hover / active - не проще?

BARTBERSERK
19-07-2009, 21:28
вот код Вставлял его на пустую страницу работает нормально только все изображения при загрузке страницы держат на себе изображение 1.jpg и только когда наводишь на них они переходят в свои пары 2-2(2) 3-3(2) 5-5(2) и т.д.

пытался вставить в сайт но из-за етого всё перемешалось и фотки стали появлятся везде.

Скажите плиз что в етом коде неправильно?

<style>
a {
position:absolute;.
left:10;
width:157;
height:152;
text-align:center;
background-image:url('1.jpg');
}

div:hover.na {
background-image:url('1(2).jpg');
}
</style>


<body>
<a class='a' style='left:0' onmouseover='this.style.backgroundImage="url(\"1(2).jpg\")"' onmouseout='this.style.backgroundImage="url(\"1.jpg\")"'href='http://'></a><a class='a' style='left:180' onmouseover='this.style.backgroundImage="url(\"2(2).jpg\")"' onmouseout='this.style.backgroundImage="url(\"2.jpg\")"'href='http://'></a><a class='a' style='left:360' onmouseover='this.style.backgroundImage="url(\"3(2).jpg\")"' onmouseout='this.style.backgroundImage="url(\"3.jpg\")"'href='http://'></a><a class='a' style='left:540' onmouseover='this.style.backgroundImage="url(\"4(2).jpg\")"' onmouseout='this.style.backgroundImage="url(\"4.jpg\")"'href='http://'></a><a class='a' style='left:720' onmouseover='this.style.backgroundImage="url(\"5(2).jpg\")"' onmouseout='this.style.backgroundImage="url(\"5.jpg\")"'href='http://'></a><a class='a' style='left:900' onmouseover='this.style.backgroundImage="url(\"6(2).jpg\")"' onmouseout='this.style.backgroundImage="url(\"6.jpg\")"'href='http://'></a><a class='a' style='left:1080' onmouseover='this.style.backgroundImage="url(\"7(2).jpg\")"' onmouseout='this.style.backgroundImage="url(\"7.jpg\")"'href=''></a>

proxy
19-07-2009, 23:52
<a class='a' style='left:0' onmouseover='this.style.backgroundImage="url(\"1(2).jpg\")"' onmouseout='this.style.backgroundImage="url(\"1.jpg\")"'href='http://'></a><a class='a' style='left:180' onmouseover='this.style.backgroundImage="url(\"2(2).jpg\")"' onmouseout='this.style.backgroundImage="url(\"2.jpg\")"'href='http://'></a><a class='a' style='left:360' onmouseover='this.style.backgroundImage="url(\"3(2).jpg\")"' onmouseout='this.style.backgroundImage="url(\"3.jpg\")"'href='http://'></a><a class='a' style='left:540' onmouseover='this.style.backgroundImage="url(\"4(2).jpg\")"' onmouseout='this.style.backgroundImage="url(\"4.jpg\")"'href='http://'></a><a class='a' style='left:720' onmouseover='this.style.backgroundImage="url(\"5(2).jpg\")"' onmouseout='this.style.backgroundImage="url(\"5.jpg\")"'href='http://'></a><a class='a' style='left:900' onmouseover='this.style.backgroundImage="url(\"6(2).jpg\")"' onmouseout='this.style.backgroundImage="url(\"6.jpg\")"'href='http://'></a><a class='a' style='left:1080' onmouseover='this.style.backgroundImage="url(\"7(2).jpg\")"' onmouseout='this.style.backgroundImage="url(\"7.jpg\")"'href=''></a> »
это кнопочки или галерея изображений?

если кнопочки - то имхо лучше использовать css.
пример, если кнопки:


<html>
<head>
<title>Sent!</title>
<style>
.a1, .a2, .a3{
margin-right:5px;
width:157;
height:152;
}

.a1, .a1:visited{ background-image:url('1.jpg'); }
.a2, .a2:visited{ background-image:url('2.jpg'); }
.a3, .a3:visited{ background-image:url('3.jpg'); }

.a1:hover{ background-image:url('1(2).jpg'); }
.a2:hover{ background-image:url('2(2).jpg'); }
.a3:hover{ background-image:url('3(2).jpg'); }
</style>
</head>
<body>

<a class="a1" href="http://" title="Подсказка ссылки 1"></a>
<a class="a2" href="http://" title="Подсказка ссылки 2"></a>
<a class="a3" href="http://" title="Подсказка ссылки 3"></a>

</body>
</html>



если галерея изображений, лучше приведи точное описание необходимой задачи: что? где? куда? как? когда?
так легче будет привести пример. опять же, попробуй использовать готовые решения (http://www.dejurka.ru/articless/gallery/), вот куча примеров - легко и удобно...

BARTBERSERK
20-07-2009, 02:23
Я Везде смотрел немогу найти

Мне надо вставить под шапку сайта 7 фото вряд размером в 157x152 каждая, и чтобы при наведении на неё она светится начиналась и можно было пройти по ссылке если тыкнешь по ней.

Может это флешем сделать или как?!

proxy
20-07-2009, 04:05
и чтобы при наведении на неё она светится начиналась »
если точно так же как на Blizzard.com, то достаточно две картинки:
1. обычное состояние
2. подсвеченное состояние

пример как релиазовать с этими картинками смотри выше (http://forum.oszone.net/post-1172334-9.html), пример для кнопок.
+ думаю необходимо подумать о предзагрузке hover картинок через js или банально через div блок со стилем visibility:none

BARTBERSERK
20-07-2009, 19:27
Блин я уже обыскался обчитался всё никак неполучается :(
Помогите Плиз!!!
скажите код хватит уже скидывать на другие источники :(((

proxy
20-07-2009, 22:30
скажите код хватит уже скидывать на другие источники (( »
за тебя твою работу ни кто делать не будеть. Советаю это принять.

Помогите Плиз!!! »
легко и сколького угодно. прошу только одного: точное описание необходимой задачи: что? где? куда? как? когда? »

уже привел код, что не устраивает?
соберись!! )) и внимательно смотри на пример:


<html>
<head>
<title>Sent!</title>
<style>
.a1, .a2, .a3{
margin-right:5px;
width:157;
height:152;
}

.a1, .a1:visited{ background-image:url('1.jpg'); }
.a2, .a2:visited{ background-image:url('2.jpg'); }
.a3, .a3:visited{ background-image:url('3.jpg'); }

.a1:hover{ background-image:url('1(2).jpg'); }
.a2:hover{ background-image:url('2(2).jpg'); }
.a3:hover{ background-image:url('3(2).jpg'); }
</style>
</head>
<body>

<a class="a1" href="http://" title="Подсказка ссылки 1"></a>
<a class="a2" href="http://" title="Подсказка ссылки 2"></a>
<a class="a3" href="http://" title="Подсказка ссылки 3"></a>

</body>
</html>

>>> это - вариант - создания - ссылок - как на сайте Blizzard.com ! <<<
тебе остается только:
1. нарисовать нужные картинки
2. вставить код в свой сайт
3. закачать каритнки в соответсвующие папки сайта

Вариант № 2: Попробуй заказать выполнение задачи за деньги!! (данаая зада стоит копейки)
думаю это самый хороший пример, что бы понять КАК важно техническое задание и ЧТО же это такое.

koresaram
02-08-2009, 12:14
о! можно я тоже сюда с небольшим оффтопом влезу?

смысл задачи практически тот же. но есть нюанс. у меня при наведении мыши на картинку она должна анимироваться. вопрос в следующем: можно ли gif анимацию заставить прокрутиться только один раз после наведения? или такое только на флеше можно сделать?

ps/ то есть допустим у меня на гифе часы и там стрелка прокручивается с 6 часов до 12. вот чтоб принаведении она не крутилась 6-12 потом снова 6-12 и т.д. а крутанулась с 6 на 12 и больше не крутилась?


по теме топа
делал как-то давно для нашего (ну не делал а стырил :) )
в head записываешь скрипт


<script> if( parseInt( navigator.appVersion ) >= 3 ) compat = true; if(compat) { I1 = new Image; I1.src="img/blue.gif"; I1_1 = new Image; I1_1.src="img/red.gif"; I2 = new Image; I2.src="img/blue.gif"; I2_2 = new Image; I2_2.src="img/red.gif"; I3 = new Image; I3.src="img/blue.gif"; I3_3 = new Image; I3_3.src="img/red.gif"; I4 = new Image; I4.src="img/blue.gif"; I4_4 = new Image; I4_4.src="img/red.gif"; I5 = new Image; I5.src="img/blue.gif"; I5_5 = new Image; I5_5.src="img/red.gif"; I6 = new Image; I6.src="img/blue.gif"; I6_6 = new Image; I6_6.src="img/red.gif"; I7 = new Image; I7.src="img/blue.gif"; I7_7 = new Image; I7_7.src="img/red.gif"; } function SetImg(Name,Img) { if(compat) { document.images[Name].src=eval(Img+'.src'); } } </script>

в body идет код ссылок

<b><a class="a1" href="about.htm" onmouseover="SetImg('PIC1','I1_1')" onmouseout="SetImg('PIC1','I1')"><img src="img/blue.gif" name="PIC1" border="0" align="absmiddle" hspace="4">Компания</a> <a class="a1" href="analytics.htm" onmouseover="SetImg('PIC2','I2_2')" onmouseout="SetImg('PIC2','I2')"><img src="img/blue.gif" name="PIC2" border="0" align="absmiddle" hspace="4">Аналитика</a> <a class="a1" href="consulting.htm" onmouseover="SetImg('PIC3','I3_3')" onmouseout="SetImg('PIC3','I3')"><img src="img/blue.gif" name="PIC3" border="0" align="absmiddle" hspace="4">Консалтинг</a> <a class="a1" href="solutions.htm"onmouseover="SetImg('PIC4','I4_4')" onmouseout="SetImg('PIC4','I4')"><img src="img/blue.gif" name="PIC4" border="0" align="absmiddle" hspace="4">IT-решения</a> <a class="a1" href="recruitment.htm" onmouseover="SetImg('PIC5','I5_5')" onmouseout="SetImg('PIC5','I5')"><img src="img/blue.gif" name="PIC5" border="0" align="absmiddle" hspace="4">Рекрутмент</a>

меняешь имена картинок и расположение и будут они подменяться при наведении. но у proxy вариант получше будет.

Coutty
02-08-2009, 12:45
ps/ то есть допустим у меня на гифе часы и там стрелка прокручивается с 6 часов до 12. вот чтоб принаведении она не крутилась 6-12 потом снова 6-12 и т.д. а крутанулась с 6 на 12 и больше не крутилась? »
Просто сделайте анимацию, где последний кадр будет отображаться, скажем, 240 секунд (больше фотошоп не позволяет). И не надо мудрить)

koresaram
02-08-2009, 13:32
Просто сделайте анимацию, где последний кадр будет отображаться, скажем, 240 секунд (больше фотошоп не позволяет). И не надо мудрить) »

:) я думал на эту тему, но тогда размер гифа разве не увеличится в разы? :)
то есть в самом гифе нельзя такое задать получается?

еще я придумал очень извращенный вариант :))) типа при наведении запускается скрипт, который прокручивает 6 кадров (к примеру) но такого варианта я сам испугался после придумывания.

Coutty
02-08-2009, 14:03
я думал на эту тему, но тогда размер гифа разве не увеличится в разы? »
Ничуть не увеличится. Там же не 25 кадров в секунду, а есть, скажем, 6 кадров, для каждого из которых прописана длительность его отображения.
При этом есть ещё такие варианты: 1) каждый кадр - самостоятельный рисунок, и 2) каждый кадр содержит только изменяющуюся часть, а общая часть - только 1 раз записана. В тех же часах сами часы можно записать 1 раз, а стрелки - на отдельных кадрах.

Второй вариант тоже некоторыми используется, но это неразумно по-моему.

terrry
09-09-2010, 23:33
ЗДРАВСТВУЙТЕ! То что во фронтпэдже можно заменить картинку, это понятно, но на новой картинке пропадает текст. Подскажите, как это исправить?!




© OSzone.net 2001-2012