На картинке наведите указатель на изображение/метку в центре

Я ищу способ, чтобы при наведении курсора на изображение в центре изображения отображалось название или тег alt (затухание в/из) при этом изображение также уменьшено в непрозрачности.На картинке наведите указатель на изображение/метку в центре

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

Спасибо за любые предложения.

РЕДАКТИРОВАТЬ: изображения, которые нужно оставить в образе, должны содержать простой список ультов, никаких дополнительных разделов или каких-либо оберток вокруг каждого изображения. Они также будут использовать rel attr для shadowbox или аналогичного.

источник

2011-12-28 malicedix

Вы могли бы сделать что-то вроде этого

$('ul li img').hover(
    function(){ 
     $(this).css('opacity','.5'); 
     var a = $(this).attr('alt'); 
     $(this).parent().append('<div class="title">' + a + '</div>'); 
    }, 
    function(){ 
     $(this).css('opacity','1'); 
     $(this).next().remove('.title'); 
    } 
);

(быстро и без JQuery определенно может быть улучшена)

CSS

ul li img{ 
    position:relative; 
} 

.title{ 
    position:absolute; 
    z-index:1000; 
    top:50%; 
    bottom:50%; 
    right:50%; 
    left:50%; 
    width:100px; 
    border-radius:5px; 
    background:red; 
}

(CSS также может быть улучшена ... но это дает вам идею)

Пример:http://jsfiddle.net/dgKne/

источник

2011-12-28 23:21:49

Спасибо, это работает блестяще. Мне просто нужно выяснить, как сделать css поместить заголовок в центр каждого изображения. С CSS при условии, что он находится в центре страницы. На данный момент у меня есть левое нижнее левое изображение. Если он делает .title relative, я могу поместить его в центр изображения, но он делает все другие изображения движущимися из положения при зависании (это сетка квадратных изображений). – malicedix

Это просто общее описание того, как вы можете подойти к решению этой проблемы с помощью jQuery:

1) Поместить изображение в DIV и дать этот Div класс (пример: altHover)
2) При наведении курсора , первый выбрать альт тег и сохранить его в переменной: var title = $("em").attr("title");
3) в одной и той же функции парения, сделать новые DIV внутри парил Див и печать альт тег внутри него:

$(".altHover").hover(
    function() { 
    $(this).append($("<div class='altText'>" + title +"</div>")); 
    }, 
    function() { 
    $(this).find(".altText").remove(); 
    } 
);

источник

2011-12-28 21:45:05

Спасибо, есть способ сделать это, имея изображения только в простом списке ул. Причина заключается в том, что клиент должен использовать CMS для добавления изображений на страницу, и способ, которым он настроен, не будет добавлять divs таким образом. Должно было упомянуть, что в первом посте, извините. – malicedix

Возможно. Просто измените часть в .append, чтобы выбрать, что вам нужно. Если вы не справитесь с этим, напишите html-код здесь –

Вы можете использовать то, что Ile есть, но вместо добавления div, y ou может использовать addClass. Просто используйте li как объект, способный к падению.

$("li.picture").hover(
    function(){ 
     $(".selected_result").removeClass("selected_result"); 
     $(this).addClass("selected_result"); 
    } 
);

Я не являюсь профессионалом javascript, но это дало бы вам представление.

источник

2011-12-28 23:09:46 KayleL

На картинке наведите указатель на изображение/метку в центре

ответ

Смежные вопросы