в чем ошибка
есть вот такой скрипт:
<script type="text/javascript">
function simple_tooltip(target_items, name){
$(target_items).each(function(i){
$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
var my_tooltip = $("#"+name+i);
$(this).removeAttr("title").mouseover(function(){
my_tooltip.css({opacity:1, display:"none"}).fadeIn(10);
}).mousemove(function(kmouse){
my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+0});
}).mouseout(function(){
my_tooltip.fadeOut(10);
});
});
}
$(document).ready(function(){
simple_tooltip("area","tooltip");
});
</script>
я решил его немного подкорректировать так, чтобы только при условии что id="squidhead0" title принимал class="tooltip", например если id="squidhead2", то title не оформляется или же оформляется но по другому стилю. Так вот я изменил вот так:
<script type="text/javascript">
function simple_tooltip(target_items){
$(target_items).each(function(){
$("body").append("<div class='parking' id='squidhead0'><p>"+$(this).attr('title')+"</p></div>");
var my_tooltip = $("#squidhead0");
$(this).removeAttr("title").mouseover(function(){
my_tooltip.css({opacity:1, display:"none"}).fadeIn(10);
}).mousemove(function(kmouse){
my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+0});
}).mouseout(function(){
my_tooltip.fadeOut(10);
});
});
}
$(document).ready(function(){
simple_tooltip("area","tooltip-parking");
});
<div class="parking">
<img src="... alt="" class="map" usemap="#park" />
<map name="park">
<area id="squidhead0" title="Парковка" alt="Link" coords="5,35, 155,10, 250,70, 285,140, 277,143, 278,190, 335,310, 90,320, " shape="poly" href="#" data-maphilight="{"stroke":false,"fillColor":"fdff5a","fillOpacity":0.7}" />
</map>
</div>
но вот только не работает, что сделал не так ? |
А как она у вас будет работать, если каждому добавляемому div вы указываете одно и тоже значение id - squidhead0, и это при том, что id=squidhead0 уже имеет area?
|
а можете подсказать, как сделать правильно, в java не силен
|
Значит надо учить, а потом писать, а не действовать "может повезет".
Как в исходном коде формируется ID - по индексу элемента (i) и переданному имени (name): $(target_items).each(function(i){ $("body").append("<div class='"+name+"' id='"+name+i+"'> ... Вы имя в функции указываете, но индекс то зачем выбросили и всем добавляете 0? Более того, у вас цикл должен брать индекс + 1, так как area имеет индекс 0 в атрибуте ID. Или измените id у area. Да и вообще, уж если гонять в цикле, то хотя бы тогда обращений делать меньше надо, а то смрад какой-то. |
Почему в функцию передаете два аргумента "area","tooltip-parking", а в самой функции оставили только один?
|
Цитата:
|
В общем разбирайтесь с аргументом вторым, а функцию хотя бы так перепишите:
function simple_tooltip(target_items){
$(target_items).each(function(i){
$('<div class="parking" id="squidhead'+(i+1)+'"><p>'+this.title+'</p></div>')
.appendTo('body')
.mouseover(function(){
$(this).css({opacity:1, display:"none"}).fadeIn(10);
})
.mousemove(function(kmouse){
$(this).css({left:kmouse.pageX+15, top:kmouse.pageY+0});
})
.mouseout(function(){
$(this).fadeOut(10);
});
$(this).removeAttr('title')
});
}
|
>ориентируясь на исходный скрипт
Это каким образом вы на него ориентировались, если в исходнике и передается, и принимается два аргумента? |
так почему я и написал сюда!
|
Ну здрасьте, вам что тут аргументы подсчитывать должны?
В исходнике вторым аргументом передается имя, которое будет получать объект. Вы не используете этого, зачем передаете тогда, значит и вызов функции должен быть не: а simple_tooltip("area"); И, когда выставляете код, то жалейте читающих его (сами себя, это уже ваши проблемы) - делайте отступы в нем, а то в каше вами представленной разбираться.... |
спасибо, что откликнулись)
|
буду разбираться
|
а можете на примере показать, как сделать так, чтобы если допустим в <area id="1"/>, то применить стиль например .tooltip, а если id="2", то .tooltip-parking
|
Имя атрибута не может начинаться с цифры. Но, если закрыть глаза на правила, и ID, это как "хранитель цифр", а не служит для обращения к нему по ID, можно и так, с натяжкой. Так что сперва подумайте над этим.
А если id="3", тогда что? А если id="4", 5....n, что тогда? |
Цитата:
Цитата:
|
Что значит не надо, вообще никакого не должно быть, даже parking?
Отвечайте на вопросы развернуто, я что должен догадываться? |
вот смотрите есть id="squidhead1", id="squidhead2", id="squidhead3" и т.д. нужно только одно условие, если допустим id="squidhead2" то применить к нему стиль .tooltip-parking, а ко всем остальным .tooltip
|
$(target_items).each(function(i){
$('<div class="'+(i==1 ? 'tooltip-parking' : 'tooltip')+'" id="squidhead'+(i+1)+'"><p>'+this.title+'</p></div>') //далее без изменений
Сравнение на 1 потому, что для ID к индексу плюсутеся 1. |
не работает
а почему здесь '+this.title+' а не +$(this).attr('title')+ ? |
А зачем мне обращаться к jQuery, если значение атрибута я и без него могу получить?
this.title выполнит тоже самое, что и $(this).attr('title'). Что не работает? |
Цитата:
http://javascript.ru/tutorial/dom/attributes |
да вообще ничего, подставляю предложенную вами строчку и все, при наведении на изображение title не отображается
|
Какое изображение? У вас карта изображения, и вся эта затея для нее. А так как вы передали коллекцию area в функцию, и в функции же удалили элементам коллекции атрибут title, вот этой стройкой кода:
$(this).removeAttr('title') предварительно поместив значение этого атрибута в тег Р, вот тут: <p>'+this.title+'</p> то с чего оно должно отображаться по наведению? Не я же это придумал, мне собственно все равно в чем это будет. ) |
| Часовой пояс GMT +3, время: 15:15. |