Форум

РустамRu · #31 (**permalink**) 11.02.2015, 13:34

все так просто) именно на странице с таблицей не работает, а на всех остальных все показывает, буду разбираться. Спасибо)

РустамRu · #32 (**permalink**) 12.02.2015, 11:04

<area id="squidhead" title="Статус: Свободна " alt="Link"  data-maphilight="{&quot;stroke&quot;:false,&quot;fillColor&quot;:&quot;fdff5a&quot;,&quot;fillOpacity&quot;:0.6}" />

при наведении сделал всплывающий title с помощью tooltip, вот думаю сделать изменение цвета шрифта при условии, что title содержит слово (свободна)

<script>
     $(function(){
       var x = $("area title").text();
           if (x == "Свободна") $('area title').css({color: '#fff');
});
</script>

но что-то ничего не получается, ни какой реакции в изменении цвета, что делаю не так?

ksa · #33 (**permalink**) 12.02.2015, 11:06

Сообщение от РустамRu

что делаю не так?

Ты так и не делаешь тестовые примеры... А пора бы.

РустамRu · #34 (**permalink**) 12.02.2015, 11:09

а как я его сделаю если он не работает

рони · #35 (**permalink**) 12.02.2015, 11:14

Сообщение от РустамRu

а как я его сделаю если он не работает

для того чтобы не гадать про остальные части кода

Сообщение от РустамRu

$("area title")

это пока фигня а не селектор ищите как достать атрибут

ksa · #36 (**permalink**) 12.02.2015, 11:16

Сообщение от РустамRu

а как я его сделаю если он не работает

ак телается тестовый пример тебе показывали и не раз... От тебя и не требуется "рабочий"... Просто на примере и будет понятно, что именно ты делаешь и что не так.
Или можно предложить другие варианты решения...

РустамRu · #37 (**permalink**) 12.02.2015, 11:23

.tooltip отвечает за оформление атрибута title, но и его использование не помогает

ksa · #38 (**permalink**) 12.02.2015, 11:27

РустамRu, т.е. тестовый пример от тебя мы так и не увидим?

РустамRu · #39 (**permalink**) 12.02.2015, 11:32

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.tooltip{
position:absolute;
z-index:60;
left:-9999px;
background:#8db24b;
padding:5px 5px 5px 20px;
max-width:108px;
height:81px;
font-size:14px;
}

  </style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_directory'); ?>/js/jquery.maphilight.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_directory'); ?>/js/scriptetag.js"></script>
<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>

<script>
     $(function(){
       var x = $("area title").text();
           if (x == "Свободна") $('area title').css({color: '#fff');
});
</script>


</head>

<body>
<img src=""  width="100" height="30"  class="map"  usemap="#simple" />

<map name="simple">
<area id="squidhead" title="Статус: Свободна " alt="Link"  data-maphilight="{&quot;stroke&quot;:false,&quot;fillColor&quot;:&quot;fdff5a&quot;,&quot;fillOpacity&quot;:0.6}" />
</map>

</body>

</html>

вот)

рони · #40 (**permalink**) 12.02.2015, 12:14

РустамRu,
что-то у вас с логикой сначала атрибут удалить потом его искать ...
где } строка 48

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.tooltip{
position:absolute;
z-index:60;
left:-9999px;
background:#8db24b;
padding:5px 5px 5px 20px;
max-width:108px;
height:81px;
font-size:14px;
}

  </style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_directory'); ?>/js/jquery.maphilight.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_directory'); ?>/js/scriptetag.js"></script>
<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>

<script>
     $(function(){
       var x = $("area").attr("title");
           if (x == "Статус: Свободна ") $('area').css({color : '#fff'});
           alert($('map').html())
});
</script>


</head>

<body>
<img src=""  width="100" height="30"  class="map"  usemap="#simple" />

<map name="simple">
<area id="squidhead" title="Статус: Свободна " alt="Link"  data-maphilight="{&quot;stroke&quot;:false,&quot;fillColor&quot;:&quot;fdff5a&quot;,&quot;fillOpacity&quot;:0.6}" />
</map>

</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript