|
http://www.happycgi.com/detail.cgi?number=14429&p=2#1
여기에 올라와 있는 버블메뉴를 사용하려고 합니다.
근데 alt에 적혀있는 내용이 이미지 위쪽으로 뜨는데요
이걸 이미지 아래에 뜨게 하고싶습니다..
어떻게 소스를 수정해야 하는지 감이 잡히지 않네요..ㅠㅠ
도움부탁드립니다..
-------------------
.js파일내용
(function($){
$.fn.bubbleup = function(options) {
//Extend the default options of plugin
var opts = $.extend({}, $.fn.bubbleup.defaults, options);
var tip = null;
return this.each(function() {
//Set the option value passed here
var $tooltip = opts.tooltips;
$(this).mouseover(
function () {
if($tooltip) {
tip = $('<div>' + $(this).attr('alt') + '</div>');
tip.css({
fontFamily: 'Helvetica, Arial, sans-serif',
color: '#333333',
fontSize: 12,
fontWeight: 'bold',
position: 'absolute',
zIndex: 100000
});
tip.remove().css({
top: 0, left: 0,
visibility: 'hidden',
display: 'block'
}).appendTo(document.body);
//Get the width and height of current image item
var position = $.extend({}, $(this).offset(), {
width: this.offsetWidth,
height: this.offsetHeight
});
//Get the width and height of the tip element
var tipWidth = tip[0].offsetWidth, tipHeight = tip[0].offsetHeight;
//Set position for the tip to display correctly
//Postion: top and center of image
tip.stop().css({
top: position.top - tipHeight,
left: position.left + position.width / 2 - tipWidth / 2,
visibility: 'visible'
});
tip.animate({
top: "-=24",
}, 'fast');
}
$(this).stop();
$(this).css({'z-index' : 100, 'top' : 0, 'left' : 0, 'width' : 48}).animate({
left: "-=24",
top: "-=24",
width: 96
}, 'fast');
}
).mouseout(
function () {
if($tooltip) {
tip.remove();
}
$(this).stop();
$(this).animate({
left: 0,
top: 0,
width: 48
}, 'fast', function() {
$(this).css({'z-index' : 0});
}
);
}
);
});
};
$.fn.bubbleup.defaults = {
tooltips: false
}
})(jQuery);
------------------------------
html 파일내용
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>http://www.blueb.co.kr</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><!-- jquery-->
<script type="text/javascript" src="js/bubbleup.jquery.js"></script>
<script type="text/javascript">
$(function(){
$("ul#menu li img").bubbleup({tooltips: true});
});
</script>
<style type="text/css">
<!--
body {
background-color: #EDEDED;
font-family: dotum,'돋움';
font-size: 11px;
letter-spacing:-1px;
margin: 0px;
padding: 0px;
}
div#content {
width: 100%;
margin: 50px auto 0px auto;
text-align: center;
}
h3 {
margin-bottom: 50px;
}
ul#menu {
margin: 5px 0px;
}
ul#menu li {
padding: 0px;
display: inline-block;
*display: inline; /* IE 7 and below */
position: relative;
margin-left: 5px;
margin-right: 5px;
width: 48px;
height: 48px;
}
ul#menu li img {
width: 48px;
position: absolute;
top: 0px;
left: 0px;
padding: 0px;
margin: 0 8px 0 0;
border: none;
}
-->
</style>
</head>
<body>
<div id="content">
<ul id="menu">
<li> <a href="http://www.blueb.co.kr"><img src="img/email.png" alt="E-Mail"></a> </li>
<li> <a href="http://www.blueb.co.kr"><img src="img/twitter.png" alt="Twitter"></a> </li>
<li> <a href="http://www.blueb.co.kr"><img src="img/facebook.png" alt="FaceBook"></a> </li>
<li> <a href="http://www.blueb.co.kr"><img src="img/technorati.png" alt="Link"></a> </li>
</ul>
</div>
</body>
</html>
| 
현재위치: 
alt 내용 위치변경 문제 
