Şimdi Ara

acil yardım tooltip ve alttan çıkan sliding php

Daha Fazla
Bu Konudaki Kullanıcılar: Daha Az
1 Misafir - 1 Masaüstü
5 sn
2
Cevap
0
Favori
503
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
0 oy
Öne Çıkar
Sayfa: 1
Giriş
Mesaj
  • merhabar 2 hatta 3 haftadır uğraşıyorum ama birtürlü yapamadım. yapmaya çalıştığım şey veri tabanından çektiğim 190px x 200px lik gösellerin üstüne geldiğimde hem resim tooltip şeklinde büyüsün hemde resmin üstüne gelince alttan kayarak bir parça gelsin ve o parçanın içinde download butonu olsun. tooltip şeklinde büyüyen resimde mouse takip özelliği olacak ben birşeyler yapmaya çalıştım ama görselleri loop ettiğimde yani veri tabanındaki herşeyi çek ve sırala dediğimde sadece tooltip özelliği çalışıyor. alttan çıkan şey sadece birinci fotoda çalışıyor. lütfen bana yardımcı olun kafayı yedim artık.

    kodlar:
    bu kodlar resimleri listelediğim sayfadaki kodlar

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

    <html>
    <head>
    <title>deneme sayfası</title>

    <link type="text/css" rel="stylesheet" href="css/jquery.capty.css"/>

    <style type="text/css">
    body {
    margin: 0; padding: 0;
    font: normal 12px Verdana, Geneva, sans-serif;
    line-height: 1.8em;
    color: #333;
    }

    /*--Tooltip Stilleri--*/
    .tip {
    color: #fff;
    background: #1d1d1d; /*--Varsayılanı Gizler--*/
    padding: 10px;
    position: fixed;
    z-index: 1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    display: none;
    }
    </style>
    </head>
    <body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.capty.min.js"></script>


    <script type="text/javascript">
    $(function() {

    $('#default').capty();

    });
    </script>

    <script type="text/javascript">
    $(document).ready(function() {
    //Tooltips
    $(".tip_trigger").hover(function(){
    tip = $(this).find('.tip');
    tip.show(); //Show tooltip
    }, function() {
    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 = tip.width(); //Find width of tooltip
    var tipHeight = tip.height(); //Find height of tooltip

    //Distance of element from the right edge of viewport
    var tipVisX = $(window).width() - (mousex + tipWidth);
    //Distance of element from the bottom of viewport
    var tipVisY = $(window).height() - (mousey + tipHeight);

    if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
    mousex = e.pageX - tipWidth - 20;
    } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
    mousey = e.pageY - tipHeight - 20;
    }
    tip.css({ top: mousey, left: mousex });
    });
    });

    </script>


    <table width="190" height="200" border="0" cellpadding="0" cellspacing="0" >
    <tr>
    <td>
    <a target="_blank" class="tip_trigger"> <img id="default" src="veritabanından çekilecek resim" alt="üstüne gelince çıkan yerin içi" width="190" height="200"/>
    <span class="tip"> <img src="veritabanından çekilip mouse ile üstüne gelince büyüyecek resim" />
    <div align="center">büyüyen resmin alt yazısı</div>
    </span>
    </td>
    </tr>
    </table>

    </html>
    </body>




    yapmak istediğim şeyin resmini koyuyorum. bunun yapıldığı sitenin de linkini yazacaktım ama yasak olabilir bilmediğimden yazmıyorum.ama resme bakınca anlarsınız muhtemelen siteyi.
    kırmızı içine aldığım yerleri yapmak istiyorum. acil yardım tooltip ve alttan çıkan sliding php
     acil yardım tooltip ve alttan çıkan sliding php







  • mevzuyu tam anlamadım ama örnege bak div'in id si veritabanından gelen id.... o id ye göre istenilen işi jquery veya functionda yaparsın


    <div id="<%#"oy"+Eval("ID") %>"></div>
    veya
    <li id="<%#"oy"+Eval("ID") %>"></li>


    $('.list li').each(function (i) {

    var idt = $(this).find("#idt").attr("title");
    $("#oy" + idt).animate({ width: id, }, 2000, "linear"); $("#bar" + idt).show("slow");
    });
    ben böyle bir iş yapmıştım sen buna bakarak kendi işine uyarlarsın



    < Bu mesaj bu kişi tarafından değiştirildi Rainbow_Six -- 3 Ağustos 2014; 23:07:30 >
  • Yapay Zeka’dan İlgili Konular
    Daha Fazla Göster
    
Sayfa: 1
- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.