Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
galograff
0 / 0 / 2
Регистрация: 22.04.2013
Сообщений: 12
#1

Появление картинки при наведении на элемент - jQuery

10.12.2013, 13:41. Просмотров 842. Ответов 14
Метки нет (Все метки)


http://www.cyberforum.ru/javascript-jquery/thread2243309.html
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
10.12.2013, 13:41
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Появление картинки при наведении на элемент (jQuery):

Плавное появление блока при наведении jQuery
Люди добрые, выручайте! Есть блок, по умолчанию он display: none, как сделать...

Сделать плавное появление картинки при загрузке страницы
есть две картинки нужно чтобы при загрузке страницы они в течении 5 секунда...

Серые картинки при наведении
Здравствуйте в js и jQuery я новичок вот мой первый скрипт, исправьте все...

Смена картинки при наведении
У меня есть две картинки, одна копия второй только чёрнобелая. мне надо, чтобы...

Описание картинки при наведении
Извиняюсь если тема заезжена, но чеслово пытался найти решение самостоятельно -...

14
philin
Иллюзионист
153 / 152 / 27
Регистрация: 02.10.2013
Сообщений: 330
10.12.2013, 14:00 #2
ID должен быть уникальным по всему документу. Используйте класс
1
galograff
0 / 0 / 2
Регистрация: 22.04.2013
Сообщений: 12
10.12.2013, 14:08  [ТС] #3
Цитата Сообщение от philin Посмотреть сообщение
ID должен быть уникальным по всему документу. Используйте класс
както так?
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function (){
$('#point_img').hide(0);
 $('.point1').mouseover(function(){
    var cssD=$('#point_img').css('display');
    if(cssD=="none"){
        $('#point_img').animate( { "opacity": "show"} , 100 );
    }
    else{
        $('#point_img').hide(100);
    }
    });
$('.point1').mouseout(function(){
        $('#point_img').hide(100);
    });
                     
 });
Добавлено через 3 минуты
Цитата Сообщение от philin Посмотреть сообщение
ID должен быть уникальным по всему документу. Используйте класс
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$(document).ready(function (){
$('.img1').hide(0);
 $('.point1').mouseover(function(){
    var cssD=$('.img1').css('display');
    if(cssD=="none"){
        $('.img1').animate( { "opacity": "show"} , 100 );
    }
    else{
        $('.img1').hide(100);
    }
    });
$('.point1').mouseout(function(){
        $('.img1').hide(100);
    });
                     
 });
$(document).ready(function (){
$('.img2').hide(0);
 $('.point2').mouseover(function(){
    var cssD=$('.img2').css('display');
    if(cssD=="none"){
        $('.img2').animate( { "opacity": "show"} , 100 );
    }
    else{
        $('.img2').hide(100);
    }
    });
$('.point2').mouseout(function(){
        $('.img2').hide(100);
    });
                     
 });
у меня 8 элементов, мне бы как-то унифицировать код
0
philin
Иллюзионист
153 / 152 / 27
Регистрация: 02.10.2013
Сообщений: 330
10.12.2013, 14:17 #4
Вы спутали ID и класс. Класс можно присваивать множеству элементов, ID - только одному
HTML5
1
2
3
4
<span id="point1" class="point">Текст 1</span>
<span id="point2" class="point">Текст 2</span>
<div id="point_img1" class="img"></div>
<div id="point_img2" class="img"></div>
Тут селекторы вида $("#point1") для поиска конкретного элемента и $(".point") для всех, имеющих класс "point". Обработчик события для класса и будет универсальным
1
galograff
0 / 0 / 2
Регистрация: 22.04.2013
Сообщений: 12
10.12.2013, 14:29  [ТС] #5
Цитата Сообщение от philin Посмотреть сообщение
Вы спутали ID и класс. Класс можно присваивать множеству элементов, ID - только одному
HTML5
1
2
3
4
<span id="point1" class="point">Текст 1</span>
<span id="point2" class="point">Текст 2</span>
<div id="point_img1" class="img"></div>
<div id="point_img2" class="img"></div>
Тут селекторы вида $("#point1") для поиска конкретного элемента и $(".point") для всех, имеющих класс "point". Обработчик события для класса и будет универсальным
а не получиться так что при наведении на один point откроются все Img?

Добавлено через 2 минуты
0
philin
Иллюзионист
153 / 152 / 27
Регистрация: 02.10.2013
Сообщений: 330
10.12.2013, 14:30 #6
Нет, если в обработчике использовать не общий селектор, а this - указатель на элемент, с которым произошло событие. $(this) для jQuery-скриптов.

Между прочим... а почему картинку не вложить в point и не переложить работу на CSS?
0
galograff
0 / 0 / 2
Регистрация: 22.04.2013
Сообщений: 12
10.12.2013, 14:33  [ТС] #7
Цитата Сообщение от philin Посмотреть сообщение
Нет, если в обработчике использовать не общий селектор, а this - указатель на элемент, с которым произошло событие. $(this) для jQuery-скриптов
куда правильно будет поставить $(this)
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function (){
$('.img').hide(0);
 $('.point').mouseover(function(){
    var pos=$('.img').css('display');
    if(pos=="none"){
        $('.img').animate( { "opacity": "show"} , 100 );
    }
    else{
        $('.img').hide(100);
    }
    });
$('.point').mouseout(function(){
        $('.img').hide(100);
    });
                     
 });
0
philin
Иллюзионист
153 / 152 / 27
Регистрация: 02.10.2013
Сообщений: 330
10.12.2013, 14:40 #8
Повторюсь, я бы вложил картинки внутрь point и просто добавил бы правило
CSS
1
.point:hover img {display:block}
Если все же с JS, то в подобных случаях удобно использовать атрибут data-*

HTML5
1
2
3
4
5
6
<span data-id="1">1</span>
<span data-id="2">2</span>
<span data-id="3">3</span>
<div data-id="1">photo1</div>
<div data-id="2">photo2</div>
<div data-id="3">photo2</div>
Javascript
1
2
3
$("span").mouseover(function(){
    $("div[data-id="+this.dataset.id+"]").show(); // или $(this).data("id")
})
1
galograff
0 / 0 / 2
Регистрация: 22.04.2013
Сообщений: 12
10.12.2013, 14:50  [ТС] #9
Цитата Сообщение от philin Посмотреть сообщение
Повторюсь, я бы вложил картинки внутрь point и просто добавил бы правило
CSS
1
.point:hover img {display:block}
Если все же с JS, то в подобных случаях удобно использовать атрибут data-*

HTML5
1
2
3
4
5
6
<span data-id="1">1</span>
<span data-id="2">2</span>
<span data-id="3">3</span>
<div data-id="1">photo1</div>
<div data-id="2">photo2</div>
<div data-id="3">photo2</div>
Javascript
1
2
3
$("span").mouseover(function(){
    $("div[data-id="+this.dataset.id+"]").show(); // или $(this).data("id")
})
спасибо. просветили. сделал по своему. работает)
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function (){
$('.img').hide(0);
 $('span').mouseover(function(){
    var pos=$("div[data-id="+this.dataset.id+"]").css('display');
    if(pos=="none"){
         $("div[data-id="+this.dataset.id+"]").animate( { "opacity": "show"} , 100 );
    }
    else{
        $("div[data-id="+this.dataset.id+"]").hide(100);
    }
    });
$('span').mouseout(function(){
        $("div[data-id="+this.dataset.id+"]").hide(100);
    });
                     
 });
HTML5
1
2
3
4
    <span id="point1" data-id="1" class="point">Текст 1</span>
    <span id="point2" data-id="2" class="point">Текст 2</span>
    <div id="img1" data-id="1" class="img"></div>
    <div id="img2" data-id="2" class="img"></div>
0
philin
Иллюзионист
153 / 152 / 27
Регистрация: 02.10.2013
Сообщений: 330
10.12.2013, 15:02 #10
Хех) Теперь причесать
Теперь ID не нужны.
Селектор $("span") заберет все span в документе - я же для упрощенного образца это написал. А тут нужен класс - $(".point")
И зачем $(".img").hide()? Лучше CSS-свойством прописать для класса display:none
Честно говоря, не понял финта с pos. При наведении - показать, при покидании - скрыть. просто hide(100) и show(100), jQuery сам работает с display. Или предполагалось при наведении уж точно скрыть все остальные?
1
galograff
0 / 0 / 2
Регистрация: 22.04.2013
Сообщений: 12
10.12.2013, 15:09  [ТС] #11
Цитата Сообщение от philin Посмотреть сообщение
Хех) Теперь причесать
Теперь ID не нужны.
Селектор $("span") заберет все span в документе - я же для упрощенного образца это написал. А тут нужен класс - $(".point")
И зачем $(".img").hide()? Лучше CSS-свойством прописать для класса display:none
Честно говоря, не понял финта с pos. При наведении - показать, при покидании - скрыть. просто hide(100) и show(100), jQuery сам работает с display. Или предполагалось при наведении уж точно скрыть все остальные?
id нужны надо кудато писать css
CSS
1
2
3
4
5
6
7
8
9
10
11
span#point1{
    left: 120px;
    position: absolute;
    text-transform: uppercase;
    top: 240px;
    z-index: 10;
    font-size: 12px;
    line-height: 16px;
    width: 120px; 
    height: 70px;
}
осталось только
Javascript
1
2
        document.getElementById('point').style.color='#fff';
        document.getElementById('block').style.fill='#f00';
превратить в божеский вид
0
philin
Иллюзионист
153 / 152 / 27
Регистрация: 02.10.2013
Сообщений: 330
10.12.2013, 15:17 #12
ID вообще уже не используются (по крайней мере, в показанной части). Это же указатель на конкретный элемент, а не группу
CSS
1
2
.point {} /* стиль общий для всех .point. И span уже не обязательно
указывать, если нет других элементов с таким же классом */
document.getElementById('point').style.color='#fff'; - это что? Общий цвет или при каком-то событии? Если общий, то лучше засунуть в CSS-класс .point. Если при событии - есть в CSS и псевдоклассы типа :hover. Вид, кстати, вполне божеский для чистого JS. Если jQuery, то $("#point").css("color", "#fff"); Но это, как обычно, медленнее "чистого"
1
galograff
0 / 0 / 2
Регистрация: 22.04.2013
Сообщений: 12
10.12.2013, 15:19  [ТС] #13
document.getElementById('point').style.color='#fff'; - это что?
-цвет при наведении
document.getElementById('block').style.fill='#f00';
- это заливка сектора
http://jsfiddle.net/TSA35/4/
0
philin
Иллюзионист
153 / 152 / 27
Регистрация: 02.10.2013
Сообщений: 330
10.12.2013, 15:33 #14
CSS-классы для того и есть, чтобы общие свойства для группы элементов хранить в одном месте, а не копировать для каждого. Например, #point1 и #point2. Куча же общих свойств. Так и давайте вынесем в один класс
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.point {
    position: absolute;
    text-transform: uppercase;
    z-index: 10;
    font-size: 12px;
    line-height: 16px;
}
#point1{
    left: 120px;
    top: 240px;
    width: 120px; 
    height: 70px;
}
#point2{
    left: 210px;
    top: 130px;
    width: 105px; 
    height: 90px;   
}
От ID все равно можно отказаться, взяв CSS-псевдоклассы. nth-child позволяет работать с пронумерованными найденными элементами

CSS
1
2
.point:nth-child(1) {} /* первый найденный .point */
.point:nth-child(2) {} /* второй найденный .point */
Тогда

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.point {
    position: absolute;
    text-transform: uppercase;
    z-index: 10;
    font-size: 12px;
    line-height: 16px;
}
.point:nth-child(1){
    left: 120px;
    top: 240px;
    width: 120px; 
    height: 70px;
}
.point:nth-child(2){
    left: 210px;
    top: 130px;
    width: 105px; 
    height: 90px;   
}
И в HTML можно вообще убрать ID. С CSS мы просто считаем span.point и по номеру выдаем нужные свойства
0
galograff
0 / 0 / 2
Регистрация: 22.04.2013
Сообщений: 12
10.12.2013, 15:33  [ТС] #15
Цитата Сообщение от philin Посмотреть сообщение
ID вообще уже не используются (по крайней мере, в показанной части). Это же указатель на конкретный элемент, а не группу
CSS
1
2
.point {} /* стиль общий для всех .point. И span уже не обязательно
указывать, если нет других элементов с таким же классом */
document.getElementById('point').style.color='#fff'; - это что? Общий цвет или при каком-то событии? Если общий, то лучше засунуть в CSS-класс .point. Если при событии - есть в CSS и псевдоклассы типа :hover. Вид, кстати, вполне божеский для чистого JS. Если jQuery, то $("#point").css("color", "#fff"); Но это, как обычно, медленнее "чистого"
data-id="1" - Это волшебная вещь) все сделал. готов отблагодарить. через киви
0
10.12.2013, 15:33
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
10.12.2013, 15:33
Привет! Вот еще темы с решениями:

Прозрачность картинки при наведении
Доброго времени суток!!! При наведении на картинку по таймеру постепенно...

Появление блока при наведении курсора
&lt;!DOCTYPE HTML&gt; &lt;html lang=&quot;ru-RU&quot;&gt; &lt;head&gt; &lt;title&gt;...&lt;/title&gt; ...

Появление div при наведении на area в map-е
Имеется карта map, на ней обозначены области area &lt;div class=&quot;map&quot;...

Плавное появление подменю при наведении на основное
Вот меню &lt;div class=&quot;wrapper&quot;&gt; &lt;div class=&quot;header&quot;&gt;&lt;/div&gt; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
15
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru