Добрый день. У меня не получается установить всплывающую информацию при наведении на картинку. Подозреваю, что этот скрипт конфликтует с оформлением таблицы. Но другого подходящего скрипта найти не могут.
http://gramelnn.rusff.me/
Скрипт всплывающего окошка при наведении на картинку
html-верх
<script type="text/javascript">
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
$(this).find('.tip').show(); //Show tooltip
}, function() {
$(this).find('.tip').hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = $(this).find('.tip').width(); //Find width of tooltip
var tipHeight = $(this).find('.tip').height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
$(this).find('.tip').css({ top: mousey, left: mousex });
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
$(this).find('.tip').css({ top: mousey, left: mousex });
} else {
$(this).find('.tip').css({ top: mousey, left: mousex });
}
});
});
</script>
Цвета CSS
/* всплывающая информация
-------------------------------------------------------------*/
.tip {
padding: 10px; /* расстояние текста от края окна */
color: black; /* цвет шрифта */
background-color: gray; /* фоновый цвет окна */
display: none;
position: absolute;
z-index: 1000;
width: 150px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Соответственно сама картинка
<a href="http://gramelnn.rusff.me/profile.php?id=2" class="tip_trigger"><img src="http://funkyimg.com/i/Tu9G.png" border="0" style="height: 60px;">
<span class="tip" style="display: none; top: 15px; left: 15px; ">
<font size="1"><center><b>Элиас</b><br>
Главнюк</center></font>
</span></a>
Таблица оформлена таким скриптом
<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").show(); -->
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
$("div.#menu span").removeClass("tabactive");
$(this).addClass("tabactive");
$("td.#MenuTxT div.submenutext").hide();
var activeDiv = $(this).attr("alt");
$("div."+activeDiv).fadeIn();
return false; });
});
</script>
Отредактировано i_am_your_soul (03.06.2015 16:02:32)