Blogger Tips – Tricks – Gadgets – Templates – Hacks

Διαδραστικό Gadget



Print Friendly and PDFPrintPrint Friendly and PDFPDF





Δείτε το live εδώ



Απλά αντιγράψτε  τον παρακάτω κώδικα και επικολλήστε τον ως Gadget.

Με μερικές βασικές γνώσεις μπορείτε να αλλάξατε φόντο,τη θέση και τα ονόματα των κύκλων καθώς και τα link που θα οδηγούν.











<div class=”container”>

    <div class=”labels”>

        <div id=”label1″ class=”label” ><a href=”link1″>Ζάντες</a>

            <span />

        </span></div>

        <div id=”label2″ class=”label”><a href=”link1″>Φώτα</a>

            <span />

        </span></div>

        <div id=”label3″ class=”label” ><a href=”link1″>Πινακίδα</a>

            <span />

        </span></div>

        <div id=”label4″ class=”label” ><a href=”link1″>Σήμα</a>

            <span />

        </span></div>

        <div id=”label5″ class=”label” ><a href=”link1″>Πόρτα</a>

            <span />

        </span></div>

        <div id=”label6″ class=”label” ><a href=””link1″>Καθρέφτης</a>

            <span />

        </span></div>

    </div>

   

    </div>





<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js”></script>





<style>

.container {

    background: url(http://oi49.tinypic.com/2h51kk4.jpg) no-repeat scroll center top transparent;

    color: #000000;

    height: 535px;

    margin: 20px auto;

    overflow: hidden;

    position: relative;

    width: 1030px;

}



.dialog {

    background-color: rgba(163, 154, 77, 0.9);

    color: #FFFFFF;

    display: none;

    height: 140px;

    left: 343px;

    line-height: 24px;

    padding: 100px 30px;

    position: absolute;

    text-align: center;

    top: 97px;

    width: 280px;

    z-index: 10;



    -moz-border-radius: 170px;

    -ms-border-radius: 170px;

    -o-border-radius: 170px;

    -webkit-border-radius: 170px;

    border-radius: 170px;

}

.dialog .close {

    color: black;

    background-color: #65683b;

    cursor: pointer;

    font-size: 22px;

    font-weight: bold;

    height: 36px;

    line-height: 36px;

    position: absolute;

    right: 10px;

    top: 60px;

    width: 36px;



    -moz-border-radius: 18px;

    -ms-border-radius: 18px;

    -o-border-radius: 18px;

    -webkit-border-radius: 18px;

    border-radius: 18px;

}

.labels p {

    display: none;

}

.labels div {

    background-color: rgba(203, 189, 58, 0.8);

    color: #FFFFFF;

    display: none;

    height: 50px;

    padding: 30px 0 0;

    position: absolute !important;

    text-align: center;

    text-decoration: none;

    width: 80px;



    -moz-border-radius: 40px;

    -ms-border-radius: 40px;

    -o-border-radius: 40px;

    -webkit-border-radius: 40px;

    border-radius: 40px;

}

.labels > div {

    background-color: rgba(203, 189, 58, 0.8);



    -moz-transition: .3s;

    -ms-transition: .3s;

    -o-transition: .3s;

    -webkit-transition: .3s;

    transition: .3s;

}

.labels div:hover {

    background-color: rgba(128, 128, 128, 0.8);

}

.labels div span {

    border-left: 10px solid transparent;

    border-right: 10px solid transparent;

    border-top: 15px solid rgba(203, 189, 58, 0.8);

    bottom: -14px;

    height: 0;

    left: 30px;

    position: absolute;

    width: 0;



    -moz-transition: .3s;

    -ms-transition: .3s;

    -o-transition: .3s;

    -webkit-transition: .3s;

    transition: .3s;

}

.labels div:hover span {

    border-top: 15px solid rgba(128, 128, 128, 0.8);

}

#label1 {

    left: 720px;

    top: 181px;

}

#label2 {

    left: 495px;

    top: 183px;

}

#label3 {

    left: 165px;

    top: 260px;

}

#label4 {

    left: 270px;

    top: 178px;

}

#label5 {

    left: 845px;

    top: 85px;

}

#label6 {

    left: 239px;

    top: 50px;

}

</style>





<script>



jQuery(function(){

    // initialize of labels

    $(‘.labels div#label1’).fadeIn(100).effect(‘bounce’, { times:3 }, 300, function() {

        $(‘.labels div#label2’).fadeIn(100).effect(‘bounce’, { times:3 }, 300, function() {

            $(‘.labels div#label3’).fadeIn(100).effect(‘bounce’, { times:3 }, 300, function() {

                $(‘.labels div#label4’).fadeIn(100).effect(‘bounce’, { times:3 }, 300, function() {

                    $(‘.labels div#label5’).fadeIn(100).effect(‘bounce’, { times:3 }, 300, function() {

                        $(‘.labels div#label6’).fadeIn(100).effect(‘bounce’, { times:3 }, 300);

                    });

                });

            });

        });

    });



    // dialog close

    $(‘.dialog .close’).click(function() {

        $(this).parent().fadeOut(500);

        return false;

    });



    // display dialog on click by labels

    $(‘.labels div’).click(function() {

        $(‘.dialog p’).html( $(this).find(‘p’).html() ).parent().fadeIn(500);

        return false;

    });



    // close dialog on click outside

    $(‘.container’).click(function() {

        $(‘.dialog’).fadeOut(500);

    });

});

</script>







Copyrights: /






6
comments:

Maaste Blogerrmen
είπε…

Your article is very informative, specially to the new individual entering to the field….. But I expect a little more detailed explanations for making the topic more clear for the common readers…. Sorry if am wrong…. Make Money , Blogging Tips

obat menggugurkan kandungan
είπε…

It looks like the life of a blogger is so interesting. and now I am the spirit of the world to pursue blogger

vimax
είπε…

I am a beginner blogger and still shallow knowledge of coding, by reading this article can add knowledge to me . obat perangsang wanita , obat sipilis

obat bius
είπε…

After taking to read this article. we can reap the benefits of the content of this article. and certainly can add to my knowledge


obat penggugur kandungan
είπε…

This article is very useful and add knowledge to the readers

cara menggugurkan kandungan
είπε…

for beginners like me need a lot of reading and searching for information on various blogs. and articles that you share a very nice and inspires me . jual obat aborsi

Δημοσίευση σχολίου

Παρακαλούμε τους φίλους αναγνώστες:

ΟΧΙ SPAM,
ΟΧΙ GREEKLISH,
ΟΧΙ ΠΡΟΣΒΛΗΤΙΚΑ ΣΧΟΛΙΑ

Παρακαλώ το σχόλιό σας να είναι σχετικό με την παραπάνω ανάρτηση.
Γενικές απορίες μόνο στη σελίδα μας στο facebook.