منتديات عالم لنك
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.


افلام عربى , افلام اجنبى , العاب , برامج ,اغانى ,كليبات , مصارعة , برامج تلفزيونية ولقائات , مسلسلات عربية , مسلسلات اجنبية ,مسلسلات تركية
 
الرئيسيةاحدث البرامجأحدث الصورالتسجيلدخول

شاطر
 

 كود بوابة زرقاء + مثال

استعرض الموضوع التالي استعرض الموضوع السابق اذهب الى الأسفل 
كاتب الموضوعرسالة
مشاعر احساسى غريب
Admin
Admin
مشاعر احساسى غريب

البلد : مصر
شلونك اليوم : ابعدوا عنى معصب
mms : كود بوابة زرقاء + مثال Graaam-175d907f8b
الجنس : ذكر
عدد المساهمات : 779

كود بوابة زرقاء + مثال Empty
مُساهمةموضوع: كود بوابة زرقاء + مثال   كود بوابة زرقاء + مثال I_icon_minitime25/8/2012, 03:13

السلام عليكم
اقدم لكم
اليوم


مثال حي على البوابة
http://www.loverfog.net/


كودالبوابة
المحتوى مخفى ضع رد اولا
الكود:

<!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">
<meta name="keywords"
content=":شبكة ابداع نت:,مشاعر,صادقة,منتديات,جبال,الحشر,مدونة,lover,fog,desgin,tools,art,تصميم,وفوتوشوب,سويش,ماكس">
<meta name="description" content="هنا سيكون ,, للإبتسامة تعبير || آخر ||
 ,, ::">
<title>ملتقى الابداع والتميز </title>
<link rel="shortcut icon" href="http://www.loverfog.net/favicon.ico">
<script type="text/javascript" src="http://www.loverfog.net/jquery.js"></script>
<style type="text/css">img {border: 0;}
.container {
    width: 790px;
    padding: 0;
    margin: 0 auto;
}
.folio_block {
    position: absolute;
    left: 50%; top: 50%;
    margin: -140px 0 0 -395px;
}


/*--Main Container--*/
.main_view {
    float: left;
    position: relative;
}
/*--Window/Masking Styles--*/
.window {
    height:250px;    width: 600px;
    overflow: hidden;
        position: relative;
}
.image_reel {
    position: absolute;
    top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
    position: absolute;
    bottom: 40px; right: -7px;
    width: 178px; height:47px;
    z-index: 100; /*--Assures the paging stays on the top layer--*/
    text-align: center;
    line-height: 40px;
    background: url(http://i47.servimg.com/u/f47/15/47/68/39/417.png) no-repeat;
    display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
    padding: 5px;
    text-decoration: none;
    color: #fff;
}
.paging a.active {
    font-weight: bold;
    background: #920000;
    border: 1px solid #610000;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
</style>
</head><body topmargin="0" leftmargin="0" rightmargin="0"
bottommargin="0" background="http://i47.servimg.com/u/f47/15/47/68/39/415.png"
marginheight="0" marginwidth="0">
<div style="position: absolute; width: 100px; height: 100px; z-index: 5;
 left: -648px; top: -106px;" id="layer3">

    <img src="http://i47.servimg.com/u/f47/15/47/68/39/422.png" width="411" border="0" height="46"></div><div style="z-index: 10; position: absolute; top: 194px; left: -10px;"
id="s">
    <script language="JavaScript">

<!--

var itv = 50;

var step = 10;

var start = 0;

var end = 0;

var currentOpac;



//change the opacity for different browsers

function changeOpac(obj, opacity) {

    var object = obj.style;

    object.opacity = (opacity / 100);

    object.MozOpacity = (opacity / 100);

    object.KhtmlOpacity = (opacity / 100);

    object.filter = "alpha(opacity=" + opacity + ")";

}



function BeginOpacity(obj, s, e)

{

    start = s;

    end = e;

    currentOpac = s;

    theobject=obj;

    changing=setInterval("opacityit(theobject)",itv);

}



function EndOpacity(obj, end){

    clearInterval(changing);

    changeOpac(obj, end);

}



function opacityit(obj){

    if(start > end) {

        if (currentOpac>end){

            currentOpac = currentOpac - step;

            changeOpac(obj,currentOpac);

        }

        else if (window.highlighting)

            clearInterval(highlighting);

    } else if(start < end) {

        if (currentOpac<end){

            currentOpac = currentOpac + step;

            changeOpac(obj,currentOpac);

        }

        else if (window.changing)

            clearInterval(changing);

    }

}

//-->

</script>
    <a href="http://www.ebda3net.com/forum">
    <img style="opacity: 0.4;" onmouseover="BeginOpacity(this,40,100)"
onmouseout="EndOpacity(this,40)" src="http://i47.servimg.com/u/f47/15/47/68/39/210.gif"
longdesc="منتديات ابداع نت" alt="منتديات " border="0"></a>
</div><div style="z-index: 12; position: absolute; top: 346px; left: -10px;"
id="vb">
    <script language="JavaScript">

<!--

var itv = 50;

var step = 10;

var start = 0;

var end = 0;

var currentOpac;



//change the opacity for different browsers

function changeOpac(obj, opacity) {

    var object = obj.style;

    object.opacity = (opacity / 100);

    object.MozOpacity = (opacity / 100);

    object.KhtmlOpacity = (opacity / 100);

    object.filter = "alpha(opacity=" + opacity + ")";

}



function BeginOpacity(obj, s, e)

{

    start = s;

    end = e;

    currentOpac = s;

    theobject=obj;

    changing=setInterval("opacityit(theobject)",itv);

}



function EndOpacity(obj, end){

    clearInterval(changing);

    changeOpac(obj, end);

}



function opacityit(obj){

    if(start > end) {

        if (currentOpac>end){

            currentOpac = currentOpac - step;

            changeOpac(obj,currentOpac);

        }

        else if (window.highlighting)

            clearInterval(highlighting);

    } else if(start < end) {

        if (currentOpac<end){

            currentOpac = currentOpac + step;

            changeOpac(obj,currentOpac);

        }

        else if (window.changing)

            clearInterval(changing);

    }

}

//-->

</script>
    <a href="http://www.ibhathar.com/up/">
    <img style="opacity: 0.4;" onmouseover="BeginOpacity(this,40,100)"
onmouseout="EndOpacity(this,40)" src="http://i47.servimg.com/u/f47/15/47/68/39/212.gif"
longdesc="مركز الرفع الخاص بالأعضاء" alt="مركز الرفع الخاص بالأعضاء"
border="0"></a>

</div><div style="z-index: 11; position: absolute; top: 270px; left: -10px;"
id="s0">
    <script language="JavaScript">

<!--

var itv = 50;

var step = 10;

var start = 0;

var end = 0;

var currentOpac;



//change the opacity for different browsers

function changeOpac(obj, opacity) {

    var object = obj.style;

    object.opacity = (opacity / 100);

    object.MozOpacity = (opacity / 100);

    object.KhtmlOpacity = (opacity / 100);

    object.filter = "alpha(opacity=" + opacity + ")";

}



function BeginOpacity(obj, s, e)

{

    start = s;

    end = e;

    currentOpac = s;

    theobject=obj;

    changing=setInterval("opacityit(theobject)",itv);

}



function EndOpacity(obj, end){

    clearInterval(changing);

    changeOpac(obj, end);

}



function opacityit(obj){

    if(start > end) {

        if (currentOpac>end){

            currentOpac = currentOpac - step;

            changeOpac(obj,currentOpac);

        }

        else if (window.highlighting)

            clearInterval(highlighting);

    } else if(start < end) {

        if (currentOpac<end){

            currentOpac = currentOpac + step;

            changeOpac(obj,currentOpac);

        }

        else if (window.changing)

            clearInterval(changing);

    }

}

//-->

</script>
    <a href="http://www.ebda3net.com/">
    <img style="opacity: 0.4;" onmouseover="BeginOpacity(this,40,100)"
onmouseout="EndOpacity(this,40)" src="http://i47.servimg.com/u/f47/15/47/68/39/211.gif"
longdesc="قريباً" alt="عالمي هنا" border="0"></a>
</div><div style="position: absolute; width: 52px; height: 100px; z-index:
104; left: 930px; top: 175px;" id="layer6">
    <img src="http://i47.servimg.com/u/f47/15/47/68/39/416.png" width="51" border="0" height="250"></div><div align="center">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tbody><tr>
            <td valign="top" width="246" align="left"><map name="FPMap0">

            <area href="http://www.mozilla.com/ar/" shape="rect" coords="83, 11,
112, 36">
            <area href="http://www.google.com/chrome?hl=ar" shape="rect"
coords="8, 9, 36, 37">
            <area href="http://www.opera.com/" shape="rect" coords="45, 8, 73,
41">
            </map>
            <img src="http://i47.servimg.com/u/f47/15/47/68/39/413.png" usemap="#FPMap0" width="246"
border="0" height="379"></td>
            <td>
            <div style="position: absolute; width: 100px; height: 100px; z-index:
 105; left: 200px; top: 20px;" id="layer7">
                <img src="رابط صورة منتداك" width="241" border="0" height="155"></div>
            </td>

            <td valign="top" width="608" align="right"><map name="FPMap1">
            <area href="http://pushme.to/" shape="rect" coords="434, 5,
472, 42">
            <area href="http://www.facebook.com/" shape="rect"
coords="379, 5, 418, 44">
            <area href="https://twitter.com/" shape="circle"
coords="319, 59, 41">
            </map>
            <img src="http://i47.servimg.com/u/f47/15/47/68/39/414.png" usemap="#FPMap1" width="608"
border="0" height="379"></td>
        </tr>
        <tr>
            <td width="246"> </td>

            <td> </td>
            <td width="608"><!--****************************-->
<!--loverfog -  ����� ��� �������-->
<!--****************************-->

<!-- �������� jquery ����� ��� -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".paging").show();
$(".paging a:first").addClass("active");
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
$(".image_reel").css({'width' : imageReelWidth});
rotate = function(){
    var triggerID = $active.attr("rel") - 1;
    var image_reelPosition = triggerID * imageWidth;
    $(".paging a").removeClass('active');
    $active.addClass('active');
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500 );
};
rotateSwitch = function(){
    play = setInterval(function(){
        $active = $('.paging a.active').next();
        if ( $active.length === 0) {
            $active = $('.paging a:first');
        }
        rotate();
    }, 4000); //��� ���� ����� ��� ������� �������� 4 �����
};
rotateSwitch();

$(".image_reel a").hover(function() {
    clearInterval(play);
}, function() {
    rotateSwitch();
}); 
$(".paging a").click(function() {
    $active = $(this);
    clearInterval(play);
    rotate();
    rotateSwitch();
    return false;
});
});
</script>

<!-- �������� jquery �����  ��� -->
<!-- �������� style ����� ����� -->
<style type="text/css">
*{outline: none;}
img {border: 0;}
.container {
    width: 790px;
    padding: 0;
    margin: 0 auto;
}
.folio_block {
    position: absolute;
    left: 50%; top: 50%;
    margin: -140px 0 0 -395px;
}
.main_view {
    float: left;
    position: relative;
}
.window {
/*--������� ���� �����--*/
    height:250px;    width: 600px;
/*--����� ������� ���� �����--*/
    overflow: hidden;
    position: relative;
}
.image_reel {
    position: absolute;
    top: 0; left: 0;
}
.image_reel img {float: left;}
.paging {
    position: absolute;
    bottom: 40px; right: -7px;
    width: 178px; height:47px;
    z-index: 100;
    text-align: center;
    line-height: 40px;
    background: url(http://i47.servimg.com/u/f47/15/47/68/39/bg10.png) no-repeat;
    display: none;
    }
.paging a {
    padding: 5px;
    text-decoration: none;
    color: #fff;
}
.paging a.active {
    font-weight: bold;
    background: #920000;
    border: 1px solid #610000;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
</style>

<!-- �������� style ����� ��� -->

</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">

<!--�����  ����� ����� -->

<div style="position: absolute; width: 221px; height: 100px; z-index: 103; left: 304px; top: 184px" id="a" align="center">
    <div class="main_view">
        <div class="window">
            <div class="image_reel" style="position: absolute; left: 1px; top: 31px; height:966px" id="c">
                <a href="http://www.ebda3net.com/">

                <img src="http://www.computernewsme.com/wp-content/uploads/2011/09/Coming-soon.gif" alt="" width="600" height="221" /></a>
                <a href="http://www.ebda3net.com/">

                <img src="http://www.computernewsme.com/wp-content/uploads/2011/09/Coming-soon.gif" alt="" width="600" height="221" /></a>
                <a href="http://www.ebda3net.com/">
                <img src="http://www.computernewsme.com/wp-content/uploads/2011/09/Coming-soon.gif" alt="" width="600" height="221" /></a>
                <a href="http://www.ebda3net.com/">
                <img src="http://www.computernewsme.com/wp-content/uploads/2011/09/Coming-soon.gif" alt="" width="600" height="221" /></a> </div>
        </div>

        <div class="paging" style="position: absolute; left: 422px; bottom: 204px" id="b">
            <a href="#" rel="1">1</a> <a href="#" rel="2">2</a>

            <a href="#" rel="3">3</a> <a href="#" rel="4">4</a> </div>
    </div>
</div>

<!--����� ���  ����� �����-->
<!--****************************-->
<!--loverfog -  ����� ��� �������-->
<!--****************************-->
</td>
        </tr>
        <tr>
            <td valign="bottom" width="246" align="left">
          هنا
height="126"></td>
            <td> </td>
            <td width="608"> </td>

        </tr>
    </tbody></table>
</div>
<script>
$(document).ready(function() {
//Show the paging and activate its first link
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging  and Slider Function
rotate = function(){
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

    $(".paging a").removeClass('active'); //Remove all active class
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

    //Slider Animation
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500 );

};

//Rotation  and Timing Event
rotateSwitch = function(){
    play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
        $active = $('.paging a.active').next(); //Move to the next paging
        if ( $active.length === 0) { //If paging reaches the end...
            $active = $('.paging a:first'); //go back to first
        }
        rotate(); //Trigger the paging and slider function
    }, 4000); //Timer speed in milliseconds (7 seconds)
};

rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
    clearInterval(play); //Stop the rotation
}, function() {
    rotateSwitch(); //Resume rotation timer
}); 

//On Click
$(".paging a").click(function() {
    $active = $(this); //Activate the clicked paging
    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation timer
    return false; //Prevent browser jump to link anchor
});
});
</script>

</body></html>
<a href="http://www.ahlamontada.com" target="_blank"></a>
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://3-lnk.mam9.com/
شبح المنتديات
عضو مشارك
عضو مشارك
شبح المنتديات

من اين عرفت المنتدى : جوجل
البلد : العراق
شلونك اليوم : مستانسة
mms : كود بوابة زرقاء + مثال E9116892865be3b3daeae9844b4c5f0b
الجنس : ذكر
عدد المساهمات : 128

كود بوابة زرقاء + مثال Empty
مُساهمةموضوع: رد: كود بوابة زرقاء + مثال   كود بوابة زرقاء + مثال I_icon_minitime26/8/2012, 14:38

موضوع جميل ورائع يسلمو
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 

كود بوابة زرقاء + مثال

استعرض الموضوع التالي استعرض الموضوع السابق الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

 مواضيع مماثلة

-
» الاوسكار .. بوابة الخلود
» بوابة احلى منتدى المدفوعة الان مجانا لكم
» مجلة للمنتدى,اروع مجلة لمنتداك,مجلة رائعة لمنتداك,تفضل بالمشاهدة,تحمبل مباشر,مثال للمعاينة

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات عالم لنك :: القسم الادارى :: صندوق الشكايا-