Компьютерный форум OSzone.net  

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)
-   Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)
-   -   Картинка меняющаяся при наведении. (http://forum.oszone.net/showthread.php?t=145593)

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

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

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

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

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

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

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

proxy 19-07-2009 20:59 1172181
BARTBERSERK,
как расположить фото можно почитать тут (галерея изображений)

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

Опять же, есть готовые решения LiteBox например, пример

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

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

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

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

HTML код:
<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 1172334
Цитата:
Цитата BARTBERSERK
<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 код:
<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>


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

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

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

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

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

пример как релиазовать с этими картинками смотри выше, пример для кнопок.
+ думаю необходимо подумать о предзагрузке hover картинок через js или банально через div блок со стилем visibility:none

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

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

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

HTML код:
<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 1183511
о! можно я тоже сюда с небольшим оффтопом влезу?

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

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


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


HTML код:
<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 идет код ссылок

HTML код:
<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 1183535
Цитата:
Цитата koresaram
ps/ то есть допустим у меня на гифе часы и там стрелка прокручивается с 6 часов до 12. вот чтоб принаведении она не крутилась 6-12 потом снова 6-12 и т.д. а крутанулась с 6 на 12 и больше не крутилась? »
Просто сделайте анимацию, где последний кадр будет отображаться, скажем, 240 секунд (больше фотошоп не позволяет). И не надо мудрить)

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

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

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

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

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


Время: 05:52.

Время: 05:52.
© OSzone.net 2001-