|
Как сделать смену картинки при наведении?
|
|
| [1] likbezz [05.09.2010, 17:09] |
|
Такой вот скрипт: Code <script language="JavaScript"> if (document.images) { img1on = new Image(); img1on.src ="http://worldofsakura.ucoz.ru/animegggirl/profiles/gen2.jpg"; img1off = new Image(); img1off.src = "http://worldofsakura.ucoz.ru/animegggirl/profiles/gen1.jpg"; } function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); }}//osw function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); }} </script> <A href="" onmouseover="imgOn('img1')" ;="" onmouseout="imgOff('img1')" title="Генриетта и Жозе"> <IMG src="http://worldofsakura.ucoz.ru/animegggirl/profiles/gen2.jpg" border="0" name="img1" width="150"></A> Подрабатывая Кэпом скажу, что это смена картинки при наведении, так вот, проблема в том, что надо, чтобы заменялись ШЕСТь разных картинок (поотдельности). А если написать что-то такое, скажем: Code <script language="JavaScript"> if (document.images) { img1on = new Image(); img1on.src ="http://worldofsakura.ucoz.ru/animegggirl/profiles/gen2.jpg"; img1off = new Image(); img1off.src = "http://worldofsakura.ucoz.ru/animegggirl/profiles/gen1.jpg"; } function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); }}//osw function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); }} </script> <A href="" onmouseover="imgOn('img1')" ;="" onmouseout="imgOff('img1')" title="Генриетта и Жозе"> <IMG src="http://worldofsakura.ucoz.ru/animegggirl/profiles/gen2.jpg" border="0" name="img1" width="150"></A> Code <script language="JavaScript"> if (document.images) { img1on = new Image(); img1on.src ="http://worldofsakura.ucoz.ru/animegggirl/profiles/rico2.jpg"; img1off = new Image(); img1off.src = "http://worldofsakura.ucoz.ru/animegggirl/profiles/rico1.jpg"; } function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); }}//osw function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); }} </script> <A href="" onmouseover="imgOn('img1')" ;="" onmouseout="imgOff('img1')" title="Рико и Жан"> <IMG src="http://worldofsakura.ucoz.ru/animegggirl/profiles/rico1.jpg" border="0" name="img1" width="150"></A> То ОБЕ картинки перестают меняться (боюсь представить, что будет, если вообще их шесть поставить). Я как-то изучала что-то подобное, но тот скрипт был в несколько раз короче и держался на Over'ах и On'ах. Ну, насколько я понимаю, здесь тоже надо какие-то переменные или айдэшники ли сменить huh ... Но проблема в том, что я в упор не вижу, где их менять... |
|
| [2] likbezz [05.09.2010, 17:14] |
|
Да .... Это ЖЕСТЬ .... (блин, «приелось» слово - кто нить варианты знает???? памагите, плизззз .... ヅ) .... Короче, есть у меня под рукой похожий .... Ща сваяю ... по быстрому ... ヅ Вот ....
Всё, прозаично просто ... Да ж не интересно ..... Код:
Code a.Likbezz img{width:100px;height:28px;background:url('/_theme/_st/img/ico/likbezz_flesh_arts.png') no-repeat 0 0;}
a.Likbezz:hover img{background-position:0 -29px;} Html:
Code <a class="Likbezz" href="http://likbezz.ucoz.ru/"><img src="/_theme/_st/img/ico/spacer.gif" alt="Designed by likbezz.ucoz.ru"></a> ☑ Пример .... (Живой ..... В студию ... ヅ) .... Можно и не через css, точнее, не все.
Пример v2:
Стили в самом теге «img», там же и JS
Code <a href="http://likbezz.ucoz.ru/"><img onmouseover="this.style.backgroundPosition='0 -29px'"
onmouseout="this.style.backgroundPosition='0 0' " style="width:100px;height:28px;background:url('/_theme/_st/img/ico/likbezz_flesh_arts.png') no-repeat 0 0;" src="/_theme/_st/img/ico/spacer.gif" alt="Designed by likbezz.ucoz.ru"></a> ☑ Пример v2 (живой) Пример v3:
Стили в самом теге «img», переключение через css a.Likbezz img{background-repeat:no-repeat;background-position:0% 0%;}
a.Likbezz:hover img{background-position:0% 100%;} Для всех/любых изображений с hover эффектом Code <a class="Likbezz" href="http://likbezz.ucoz.ru/"><img style="width:100px;height:28px;background-image:url('/_theme/_st/img/ico/likbezz_flesh_arts.png');" src="/_theme/_st/img/ico/spacer.gif" alt="Designed by likbezz.ucoz.ru"></a> Все картинки должны быть составными - первая картинка - сверху - вторая снизу. ☑ Пример v3 (живой) .... В примере №3 - четко видно, что картинка немного не ровно по нижнему краю позиционирована - ещё в фотошопе .... ヅ ... Сравнительный пример:
☑ Пример v3-1 Ну и просто ..... ヅ
Картинка, при наведении, из черно-белой становится цветной ...
☑ Пример v4
Flesh
|
|
| [3] likbezz [05.09.2010, 17:18] |
|
Вот каким должен быть ваш код: Code <a href="http://likbezz.ucoz.ru/"> <img onmouseover="this.style.backgroundPosition='0 100%'" onmouseout="this.style.backgroundPosition='0 0' " style="width:180px;height:200px;background:url('/_example/_rest/_likbezz/gen.jpg') no-repeat 0 0;" src="/_theme/_st/img/ico/spacer.gif" alt="Генриетта"> </a> Где:
width:180px;height:200px;background:url('/_example/_rest/_likbezz/gen.jpg') no-repeat 0 0; - текущие свойства картинки ...
onmouseover="this.style.backgroundPosition='0 100%'" - при наведении.
src="/_theme/_st/img/ico/spacer.gif" - Прозрачный гиф - один для всех картинок. Лишнее - удалить ... А не таким:
Code <a href="http://worldofsakura.ucoz.ru/index/anime_quot_gunslinger_girl_quot_genirietta_i_zhoze/0-465"><img style="width: 180px; height: 200px; background-image: url(/animegggirl/profiles/gen1.jpg);" src="/animegggirl/profiles/gen2.jpg%27%29" alt="Генриетта"></a> ☑ Пример с JS и картинкой «Генриетта» .... ☑ Пример только на css ... тоже с картинкой «Генриетта» Flesh Добавлено (09-Июл-2010, 13:00:36)
---------------------------------------------
... А можно пойти ещё дальше ... и написать неболшой скриптик, который будет изменять свойство «background-position» у всх картинок с заданным классом. Вот ... только что состряпал ... Code <script type="text/javascript">
$(document).ready(function(){
// Start DocumentReady
$('img.myChange').hover(function(){
$(this).css('backgroundPosition','0 100%');
},function(){$(this).css('backgroundPosition','0 0');
});
// End DocumentReady
});
</script> Где:
img.myChange - Класс картинок, к кторорым применяется скрипт .... Code <img class="myChange" style="width:180px;height:200px;background:url('/_example/_rest/_likbezz/gen.jpg') no-repeat 0 0;" src="/_theme/_st/img/ico/spacer.gif" alt="Designed by likbezz.ucoz.ru"></a> Примечание:
Для картинок обязательны атрибуты «width» и «height» ... ну и, естественно, «background» ...
Примечание2:
Скрипт вставлять на страницу только один раз, а не к каждой картинке .... (мало-ли ...... умников ...) ☑ Пример ..... (Картинка таже ... то есть «Генриетта» ....... ヅ ... Удивительно, правда ... ヅ) .... ☑ Ну и просто так ... несколько примеров на одной странице ... (красивые картинки ... были ... ヅ) (в столбик ....) ☑ То же самое - только в ряд ... (v3-1)(в ряд .... ヅ) Flesh
|
|
| [4] likbezz [05.09.2010, 17:27] |
Сходил на вашу страничку - глянул ...
У вас, в принципе, картинки не очень различаются - что при наведении, что в состоянии «покоя» ... ヅ Может вам стоит просто ограничится фильтрами ...? ... Как, например вот на этом примере? ....(ка-ла-мбур) ... ☑ Пример ... Фильтры изображений ... (рабочий ...) ... (прозрачность - 50%) Скрин ...
☑ Пример ... Фильтры изображений v2... ... (прозрачность - 30%) ...
☑ Ещё пример ... только с рамочной ... при наведении ... ヅ
...
Стили .... На всякий ....
Code img{margin:0;border:none;cursor:pointer;text-decoration:none;}
a img.myHover{border:none;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";filter: alpha(opacity=30);opacity:.3;cursor:pointer;}
a:hover img.myHover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1.0;}
a:active img.myHover{border:1px solid #F69;}
Flesh
|
|
| [5] likbezz [17.02.2011, 21:44] |
Вот ещё вариант ....
Code <script type="text/javascript">
$(function(){
/*Start DocumentReady*/
$('img.myChange').hover(function(){var e=$(this);
e.data('_src',e.attr('src')).attr('src',''+e.attr('src').replace(/(.jpg|.gif|.png)/,'_1$1'));
},function(){var e=$(this);e.attr('src',e.data('_src'));
});
/*End DocumentReady*/
});
</script>
...
☑ Пример ....
... |
|
| [6] Diz6942 [06.10.2011, 18:57] |
Здравствуйте, likbezz! Прочитала всю эту тему. Но, к стыду своему, мало что поняла... Пожалуйста еще раз, пошагово, какой код и куда его вставлять, чтобы было так - вторая картинка в указанном посте, без дымки.
Такая штука нужна в Блоке "Проекты" - бывшая "Доска объявлений". Сайт тутДобавлено (20.09.2011, 15:57)
---------------------------------------------
likbezz! Вы где?????? Сегодня уже вторник. Выходные давно прошли. Давайте поработаем?  Добавлено (06.10.2011, 18:57)
---------------------------------------------
Здравствуйте! Может кто сталкивался с такой проблемой: фотки, загружаемые на сайт разного размера. Есть квадратные, есть прямоугольные(как в высоту, так и в ширину). В итоге, на "Доске", получается совсем неприглядная картина... Может кто знает как их сделать одного размера? Или может шаблон какой-то для них прописать? Как тут.
Сообщение отредактировал Diz6942 - Понедельник, 19.09.2011, 17:48 |
|
| [7] likbezz [08.10.2011, 10:10] |
Diz6942, Quote (Diz6942) likbezz! Вы где?????? Сегодня уже вторник. Выходные давно прошли. Давайте поработаем?
А при чём здесь “выходные”? - уезжал я ) ... Далеко (в глушь кромешную ... ヅ ) ...
Ok, типа вернулся ) ...
Quote (Diz6942) Прочитала всю эту тему. Но, к стыду своему, мало что поняла... Пожалуйста еще раз, пошагово, какой код и куда его вставлять, чтобы было так - вторая картинка в указанном посте, без дымки.
Что-то не очень понял (видимо, за время отсутствия, способность к “пониманию” слегка притупилась ヅ), как понять “без дымки” - ведь сама суть фильтров - это как раз и есть прозрачность элементов - в данном случае картинки .... |
|
| [8] Diz6942 [08.10.2011, 10:15] |
Ура! Шеф вернулся! 
По теме: Нужно чтоб при клике на демо картинку появлялось полное изображение во всплывающем окне, а не в новом. Можно и так |
|
| [9] likbezz [08.10.2011, 10:39] |
Quote (Diz6942) Нужно чтоб при клике на демо картинку появлялось полное изображение во всплывающем окне, а не в новом
Как сделать превью фотографии/картинки/рисунка на форуме ... (Чтобы при клике открывалось новое окно с полной картинкой ..) ....
Там, практически, готовые варианты, на все случаи и не только для форума.
☑ Пример работы (Как сделать превью фотографии/картинки/рисунка на форуме ... )
... |
|
| [10] MoVeMix [27.11.2011, 16:16] |
likbezz, у меня такой вопрос, написал простенький код, что бы уменьшить предыдущий, но есть проблема, при наведении на картинку, вторая начинает только прогружаться, как сделать, что бы при загрузке сайта загружались сразу обе картинки?
Делал через CSS.
Сама ссылка:
Code <a href="/" class="hhome" title="Главная"></a>
в CSS:
Code a.hhome {background: url(http://www.awsp.ru/_ld/14/96353729.jpg); display: block; width: 127px; height: 30px;}
a.hhome:hover {background: url(http://www.awsp.ru/_ld/14/98143884.jpg);}
Сообщение отредактировал MoVeMix - Воскресенье, 27.11.2011, 16:20 |
|
| [11] likbezz [02.12.2011, 20:43] |
MoVeMix, Quote (MoVeMix) likbezz, у меня такой вопрос, написал простенький код, что бы уменьшить предыдущий, но есть проблема, при наведении на картинку, вторая начинает только прогружаться, как сделать, что бы при загрузке сайта загружались сразу обе картинки?
Самое простое - через спрайт - то бишь объеденить две картинки в одну, и менять только положение.
Типа:
Code <style type="text/css"> a.hhome,a.hhome:hover{ background: url(/_example/_rest/_2011/sprite/96353729.png) no-repeat left top; display:block; width:127px; height:30px; } a.hhome:hover{ background-position:left bottom; } </style> <a href="/" class="hhome" title="Главная"> </a>
...
Или поставить двойной фон, например дополнительному элементу:
Code <style type="text/css"> a.hhome { background:url(http://www.awsp.ru/_ld/14/96353729.jpg); display:block; width:127px; height:30px; } a.hhome b,a.hhome:hover{ background:url(http://www.awsp.ru/_ld/14/98143884.jpg); } a.hhome b{visibility:hidden;}</style> <a href="/" class="hhome" title="Главная"><b> </b></a>
... |
|
| [12] MoVeMix [02.12.2011, 21:17] |
likbezz, ссылка:
Quote /_example/_rest/_2011/sprite/96353729.png
не рабочая, как это слепить 2 картинки, покажи пример если не трудно. |
|
| [13] likbezz [02.12.2011, 21:37] |
MoVeMix, Quote (MoVeMix) как это слепить 2 картинки, покажи пример если не трудно.
Типа так:
... |
|
| [14] MoVeMix [02.12.2011, 21:57] |
|
likbezz, спасибо, попробую. |
|
