아이디 비밀번호 | 회원가입 | 비밀번호분실
   
 새로운소식
 FAQ
 웹프로그램
 웹DB
 웹서버
 웹프로그램수정
 해피칼럼
 골드팁
 
제작의뢰
웹프로그램 판매몰
 
현재위치: 메인 해피포럼 웹프로그램 : 게시물 읽기
  2013-03-18 (16:29:18) from 110.12.36.14
  작성인 : dhdmlal 조회수 : 3200   
제목 : alt 내용 위치변경 문제

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 내용 위치변경 문제
dhdmlal
3201
2013-03-18
 



  HOME | 회사소개 | 제작의뢰 | 개인정보취급방침 | CGIMALL | 자료실 | 사이트등록 | 랭킹100 | 포럼 | 초보가이드 | 질문과답변 | 배너광고
Copyrightⓒ1997~2008 HappyCGI All rights reserved
Powered By HappyCGI