Нужна помощь
Доброе время суток Ув. посетители данного форума.
Столкнулся с такой вот проблемой: При наведении на картинку к примеру, отображается блок с доп. информацией на чёрном фоне. (То что я очень долго искал) Но проблема вот в чём картинок разных много а информация всегда одна и та же... А нужна разная. Помогите сделать так, что бы информацию можно было менять и она не повторялась! Вот всё что есть: <script type="text/javascript" src="http://ruseller.com/lessons/les205/tooltip.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a#cell").easyTooltip({
useElement: "item"
});
});
</script>
<div class="item even_row r2 c0 lvl1"><div class="image"><a href="#" id="cell"><img src="source/img/cell.png" /></a></div></div> <div id="item"> <div class="openText" id="openTexts"> <h3>Uwow Бесплатный сервер WOW</h3> <div class="dashed"><li></li></div> <img src="source/img/cell.png" /> <p><b>Голосов:</b> 245059</p> <p><b>Версия:</b> 243-434</p> <p><b>Онлайн:</b> 56500</p> <p><b>Переходов:</b> 17957</p> <p><b>Оценка:</b><div class="picture-star stars-4"></div></p> <div class="dashed"><li></li></div> <div class="block-worlds"> <a href="#" class="red-billet">x125</a> <a href="#" class="red-billet">x10</a> <a href="#" class="red-billet">x999</a> <a href="#" class="red-billet">x100</a> <a href="#" class="red-billet">x100</a> <a href="#" class="red-billet">x175</a> <a href="#" class="red-billet">x100000</a> <a href="#" class="red-billet">x75</a> <a href="#" class="red-billet">x30</a> <a href="#" class="red-billet">x115</a> <a href="#" class="red-billet">x1</a> <a href="#" class="red-billet">x150</a> </div> </div> </div> |
Походу, текст подсказки прячется в атрибуте original-title. от этого пляшите
|
Привязка к элементу, а именно если информация в блоке всплывающего окна изменить т.е дублировать также но с другой информацией он её не видит.
|
Моя задача сделать так чтобы информация в любом блоке могла быть изменена.
|
Буду рад любому ответу по теме!!! Сил нет больше ;(
|
XaPu3Ma,
Цитата:
|
В смысле?
|
Цитата:
|
XaPu3Ma, не совсем понятно, что вы хотите сделать.
у вас на странице сколько элементов с id, равным cell ? Цитата:
$("a#cell")
Коллекция элементов, получается. |
Всего 1 элемент, как сделать так чтобы информация в блоке могла быть изменена и элемент оставался один?
|
id="cell" используется в ссылке на картинку.
id="item" используется в инф. блоке. Картинок очень много и для каждой нужно сделать свой инф. блок. Проблема в том что инф. в блоке всегда одна и та же (как в первом примере) Вопрос: Как сделать так чтобы можно было разную информацию сделать для каждой из картинок? |
Цитата:
Цитата:
Цитата:
|
Простая подсказка
XaPu3Ma,
вы определитесь что будет источником информации для подсказки ... давайте я сделаю это за вас
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#easyTooltip {
font-size: 32px;
}
span{
color: #FF00FF;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
(function ($) {
$.fn.easyTooltip = function (options) {
var defaults = {
xOffset: 10,
yOffset: 25,
tooltipId: "easyTooltip",
clickRemove: false,
content: "",
useElement: "",
source: null
};
var options = $.extend(defaults, options);
var content;
this.each(function () {
var title = $(this).attr("title");
$(this).hover(function (e) {
content = options.content != "" ? options.content : title;
content = options.useElement != "" ? $("#" + options.useElement).html() : content;
content = typeof options.source == "function" ? options.source(this) : content;
$(this).attr("title", "");
if (content != "" && content != undefined) {
$("body").append("<div id='" + options.tooltipId + "'>" + content + "</div>");
$("#" + options.tooltipId)
.css({"position": "absolute",
"top": e.pageY - options.yOffset + "px",
"left": e.pageX + options.xOffset + "px",
"display": "none"}).fadeIn("fast")
}
}, function () {
$("#" + options.tooltipId).remove();
$(this).attr("title", title)
});
$(this).mousemove(function (e) {
$("#" + options.tooltipId).css({"top": e.pageY - options.yOffset + "px",
"left": e.pageX + options.xOffset + "px"})
});
if (options.clickRemove) $(this).mousedown(function (e) {
$("#" + options.tooltipId).remove();
$(this).attr("title", title)
})
})
}
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function(){
$("a").easyTooltip({
source: function (el)
{
return $(el).data('title')+'<span> и тихий ужас</span>'
}
});
});
</script>
</head>
<body>
<a href="#" data-title='Фигня'><img src="http://javascript.ru/forum/images/smilies/write.gif" /></a><br>
<a href="#" data-title='Супер Фигня'><img src="http://javascript.ru/forum/images/smilies/cray.gif" /></a>
</body>
</html>
вместо самого контента в data-title можно хранить id элемента с нужным содержимым |
Рони, спасибо за помощь и потраченное время. Но Вы не могли бы подстроить под мой скрипт свой. Ибо я не совсем понимаю что делать.
|
Цитата:
а что вы хотите я так и незнаю до сих пор |
Дублировать id="item" (с разной информацией) и указывать id="cell" для нужной картинки.
|
Вот к примеру:
<div class="item even_row r2 c0 lvl1"><div class="image"><a href="#" id="cell"><img src="source/img/cell.png" /></a></div></div> <div id="item"> <div class="openText" id="openTexts"> <h3>Первый блок</h3> <div class="dashed"><li></li></div> <img src="source/img/cell.png" /> <p><b>Голосов:</b> 245059</p> <p><b>Версия:</b> 243-434</p> <p><b>Онлайн:</b> 56500</p> <p><b>Переходов:</b> 17957</p> <p><b>Оценка:</b><div class="picture-star stars-5"></div></p> <div class="dashed"><li></li></div> <div class="block-worlds"> <a href="#" class="red-billet">x125</a> <a href="#" class="red-billet">x10</a> <a href="#" class="red-billet">x999</a> <a href="#" class="red-billet">x100</a> <a href="#" class="red-billet">x100</a> <a href="#" class="red-billet">x175</a> <a href="#" class="red-billet">x100000</a> <a href="#" class="red-billet">x75</a> <a href="#" class="red-billet">x30</a> <a href="#" class="red-billet">x115</a> <a href="#" class="red-billet">x1</a> <a href="#" class="red-billet">x150</a> </div> </div> </div> И вторая картинка с своим инф. блоком: <div class="item even_row r3 c7 lvl1"><div class="image"><a href="#" id="cell"><img src="source/img/cell.png" /></a></div></div> <div id="item"> <div class="openText" id="openTexts"> <h3>Второй блок</h3> <div class="dashed"><li></li></div> <img src="source/img/cell.png" /> <p><b>Голосов:</b> 245059</p> <p><b>Версия:</b> 243-434</p> <p><b>Онлайн:</b> 56500</p> <p><b>Переходов:</b> 17957</p> <p><b>Оценка:</b><div class="picture-star stars-4"></div></p> <div class="dashed"><li></li></div> <div class="block-worlds"> <a href="#" class="red-billet">x125</a> <a href="#" class="red-billet">x10</a> <a href="#" class="red-billet">x999</a> <a href="#" class="red-billet">x100</a> <a href="#" class="red-billet">x100</a> <a href="#" class="red-billet">x175</a> <a href="#" class="red-billet">x100000</a> <a href="#" class="red-billet">x75</a> <a href="#" class="red-billet">x30</a> <a href="#" class="red-billet">x115</a> <a href="#" class="red-billet">x1</a> <a href="#" class="red-billet">x150</a> </div> </div> </div> |
Цитата:
|
XaPu3Ma,
ну не делают одинаковых ид |
Я выше на примере показать как сделать, думаю вы поймёте)))
|
XaPu3Ma,
<script type="text/javascript">
$(document).ready(function(){
$(".item").easyTooltip({
source: function (el)
{
return $(el).next().html()
}
});
});
</script>
|
Ох спасибо, т.е мне нужно это:
<script type="text/javascript">
$(document).ready(function(){
$("a#cell").easyTooltip({
useElement: "item"
});
});
</script>
заменить на:
<script type="text/javascript">
$(document).ready(function(){
$(".item").easyTooltip({
source: function (el)
{
return $(el).next().html()
}
});
});
</script>
|
Я правильно понял?
|
Цитата:
|
У вас есть скайп? Не хотели бы вы в проект?
|
Спасибо Вам огромное, всё получилось на ура!))))
|
Я хотел бы поговорить с вами, предложить работу и хорошие деньги!
|
Тему можно закрыть, спасибо огромное Рони!
|
| Часовой пояс GMT +3, время: 13:12. |