Показать изображение для поля при наведении мыши

Question

Показать изображение для поля при наведении мыши

0

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

 $("#s_1_1_60_0_icon").mouseover(function () {
    $(*'#image'*).show(); //displays image on mouse in
 }
 $("#s_1_1_60_0_icon").mouseleave(function(){
    $(*'#image'*).hide(); //hides image on mouse out
});
});

Я хочу показать изображение как всплывающую подсказку. Пожалуйста, предложите направление для достижения этого.

благодаря

ak0053792 10 нояб. 2013, в 14:21

Источник

0

Не могли бы вы немного конкретизировать, чего вы хотите достичь, и показать нам, как выглядит ваша DOM.
codingjoe 10 нояб. 2013, в 12:38
1

@ Джон Спасибо Джон за ответ. Есть апплет формы, в котором один из элементов управления имеет значения в выпадающем списке. Моя цель - показать изображение на основе значения, которое пользователь выбирает для определенного столбца при наведении курсора.
ak0053792 10 нояб. 2013, в 12:42
0

ты можешь сделать скрипку или плнкер? Для начала посмотрите документацию по jquery. Селекторы Jquery (как вы их называете заполнители) почти такие же, как и css. «#» означает, что вы ищете элемент с этим идентификатором. Поэтому, если вы хотите применить что-либо к каждому изображению, вы бы сказали $ ('img'). вы также можете выполнить конкатенацию строк внутри селектора, поэтому, если у вас есть изображение, которое отображается на другой элемент, вы можете сказать $ ('# img _' + $ (this) .attr ('id')), если идентификатор соответствующего изображения равен "img_s_1_1_60_0_icon", но я мог бы дать вам лучший ответ, если бы знал, как выглядит остальная часть вашей страницы
Snowburnt 10 нояб. 2013, в 13:13
0

@ Snowburnt Я хотел, чтобы в приложении Siebel у него был немного сложный код. Который я не могу поставить здесь. В качестве простого примера, я хотел поставить изображение каждый раз при наведении мыши на ul ниже: jsfiddle.net/222GA
ak0053792 10 нояб. 2013, в 13:25
0

независимо от того, вы будете должны быть более конкретными. какой элемент именно вы пытаетесь показать? все изображения? Изображение, которое ДОЛЖНО присутствовать в доме, чтобы вы могли показать его таким образом, нельзя просто предположить, что JQuery может волшебным образом найти его для вас.
Snowburnt 10 нояб. 2013, в 13:29
0

@ Снегурочка Вы правы, что в этом нет никакой магии, кроме логики. Это немного сложный код, поэтому я не хочу вдаваться в подробности. Ссылка jsfiddle, которую я предоставил, можете ли вы просто сказать мне, как получить изображение (например, текст всплывающей подсказки), когда пользователь получает контроль над, скажем, значением «Кредитная карта»
ak0053792 10 нояб. 2013, в 13:38

Показать ещё 4 комментария

Теги:

jquery

1 ответ

Ещё вопросы

Не могли бы вы немного конкретизировать, чего вы хотите достичь, и показать нам, как выглядит ваша DOM.
@ Джон Спасибо Джон за ответ. Есть апплет формы, в котором один из элементов управления имеет значения в выпадающем списке. Моя цель - показать изображение на основе значения, которое пользователь выбирает для определенного столбца при наведении курсора.
ты можешь сделать скрипку или плнкер? Для начала посмотрите документацию по jquery. Селекторы Jquery (как вы их называете заполнители) почти такие же, как и css. «#» означает, что вы ищете элемент с этим идентификатором. Поэтому, если вы хотите применить что-либо к каждому изображению, вы бы сказали $ ('img'). вы также можете выполнить конкатенацию строк внутри селектора, поэтому, если у вас есть изображение, которое отображается на другой элемент, вы можете сказать $ ('# img _' + $ (this) .attr ('id')), если идентификатор соответствующего изображения равен "img_s_1_1_60_0_icon", но я мог бы дать вам лучший ответ, если бы знал, как выглядит остальная часть вашей страницы
@ Snowburnt Я хотел, чтобы в приложении Siebel у него был немного сложный код. Который я не могу поставить здесь. В качестве простого примера, я хотел поставить изображение каждый раз при наведении мыши на ul ниже: jsfiddle.net/222GA
независимо от того, вы будете должны быть более конкретными. какой элемент именно вы пытаетесь показать? все изображения? Изображение, которое ДОЛЖНО присутствовать в доме, чтобы вы могли показать его таким образом, нельзя просто предположить, что JQuery может волшебным образом найти его для вас.
@ Снегурочка Вы правы, что в этом нет никакой магии, кроме логики. Это немного сложный код, поэтому я не хочу вдаваться в подробности. Ссылка jsfiddle, которую я предоставил, можете ли вы просто сказать мне, как получить изображение (например, текст всплывающей подсказки), когда пользователь получает контроль над, скажем, значением «Кредитная карта»

Snowburnt · Accepted Answer · 2013-11-10T12-41-00.000Z

Здесь простой, основанный на вашей скрипке. http://jsfiddle.net/RnnrA/

Как и в большинстве случаев в веб-дизайне, есть миллионы способов сделать что-то. Если вы можете дать нам более подробную информацию (где, например, изображение), я мог бы дать вам лучший способ сделать это.

$("li a").mouseover(function(){
    $("#img_"+$(this).attr("id")).show();
});
$("li a").mouseout(function(){
    $("#img_"+$(this).attr("id")).hide();
});

Это немного сложнее: http://jsfiddle.net/e7UVb/

Я создал div, который содержит изображение, и каждый раз, когда вы наводите мышь на него, он создает элемент изображения и заполняет его изображением, а затем добавляет его в div. на mouseout он уничтожает элемент изображения. Это потребует больше клиентских звонков, потому что каждый раз, когда вы наводите курсор мыши на него, нужно получить изображение. В моем примере я использовал только одно изображение, вам нужно будет использовать некоторую лучшую логику, чтобы выяснить, какое изображение будет отображаться для этого.

$("li a").mouseover(function(){
    $("#imagePlaceholder").append($("<img></img>").prop("src","http://www.psdgraphics.com/file/psd-credit-card.jpg").prop("height","50"));
});
$("li a").mouseout(function(){
    $("#imagePlaceholder").empty();
});

Наконец, гораздо более простая версия: http://jsfiddle.net/Zt2pu/1/

$("li a").mouseover(function(){
    $("#imagePlaceholder").prop("src","http://www.psdgraphics.com/file/psd-credit-card.jpg").prop("height","50");
});
$("li a").mouseout(function(){
    $("#imagePlaceholder").prop("src","");
});

Здесь я просто сделал пустой тег изображения, а на mouseover я изменил атрибут src. На выводе я опустошил атрибут src. Как и предыдущий, у вас будет клиентский вызов для загрузки изображения на каждую мышь.

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

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

Это подробное решение и различные способы работы очень ценятся. Спасибо за все ваше время. Я рассмотрю предоставленное вами решение и постараюсь применить его в моем случае.