11-A EML [2010-2011]

HtmlCode

--------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------------------------------------------

<!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> <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8"  /> <title>s3Slider jQuery plugin</title>  <style type="text/css" media="screen"> #slider1 {     width: 720px; /* important to be same as image width */     height: 300px; /* important to be same as image height */     position: relative; /* important */     overflow: hidden; /* important */ }  #slider1Content {     width: 720px; /* important to be same as image width or wider */     position: absolute;     top: 0;     margin-left: 0; } .slider1Image {     float: left;     position: relative;     display: none; } .slider1Image span {     position: absolute;     font: 10px/15px Arial, Helvetica, sans-serif;     padding: 10px 13px;     width: 694px;     background-color: #000;     filter: alpha(opacity=70);     -moz-opacity: 0.7;     -khtml-opacity: 0.7;     opacity: 0.7;     color: #fff;     display: none; } .clear {     clear: both; } .slider1Image span strong {     font-size: 14px; } .left {     top: 0;     left: 0;     width: 110px !important;     height: 280px; } .right {     right: 0;     bottom: 0;     width: 90px !important;     height: 290px; } ul { list-style-type: none;} </style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript">/* ------------------------------------------------------------------------
    s3Slider
  
    Developped By: Boban KariÅ¡ik -> http://www.serie3.info/
        CSS Help: MÃ©szÃ¡ros RÃ³bert -> http://www.perspectived.com/
    Version: 1.0
  
    Copyright: Feel free to redistribute the script/modify it, as
               long as you leave my infos at the top.
------------------------------------------------------------------------- */

(function($){

$.fn.s3Slider = function(vars) {      
      
        var element     = this;
        var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
        var current     = null;
        var timeOutFn   = null;
        var faderStat   = true;
        var mOver       = false;
        var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
        var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
          
        items.each(function(i) {
  
            $(items[i]).mouseover(function() {
               mOver = true;
            });
          
            $(items[i]).mouseout(function() {
                mOver   = false;
                fadeElement(true);
            });
          
        });
      
        var fadeElement = function(isMouseOut) {
            var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
            thisTimeOut = (faderStat) ? 10 : thisTimeOut;
            if(items.length > 0) {
                timeOutFn = setTimeout(makeSlider, thisTimeOut);
            } else {
                console.log("Poof..");
            }
        }
      
        var makeSlider = function() {
            current = (current != null) ? current : items[(items.length-1)];
            var currNo      = jQuery.inArray(current, items) + 1
            currNo = (currNo == items.length) ? 0 : (currNo - 1);
            var newMargin   = $(element).width() * currNo;
            if(faderStat == true) {
                if(!mOver) {
                    $(items[currNo]).fadeIn((timeOut/6), function() {
                        if($(itemsSpan[currNo]).css('bottom') == 0) {
                            $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        } else {
                            $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        }
                    });
                }
            } else {
                if(!mOver) {
                    if($(itemsSpan[currNo]).css('bottom') == 0) {
                        $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                            $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    } else {
                        $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                        $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    }
                }
            }
        }
      
        makeSlider();

};

})(jQuery);  </script> <script type="text/javascript">
    $(document).ready(function() {
        $('#slider1').s3Slider({
            timeOut: 4000
        });
    });
</script> </head>  <body>      <h2>Example 2</h2>     <p>This show the layer appears from left or right.</p>     <div id="slider1">         <ul id="slider1Content">             <li class="slider1Image">                 <a href="" _fcksavedurl=""><img src="http://www.araba.ws/araba/userpics/2008-Bugatti-Veyron-Pur-Sang-Bare-Carbon-and-Aluminum-A-full.jpeg" _fcksavedurl="http://www.araba.ws/araba/userpics/2008-Bugatti-Veyron-Pur-Sang-Bare-Carbon-and-Aluminum-A-full.jpeg" alt="1" /></a>                 <span class="left"><strong>Bugatti</strong><br />Content text...</span></li>             <li class="slider1Image">                 <a href="" _fcksavedurl=""><img src="http://www.araba.ws/araba/userpics/2006-Acura-RSX-A-SPEC-Concept-at-SEMA-A-full.jpeg" _fcksavedurl="http://www.araba.ws/araba/userpics/2006-Acura-RSX-A-SPEC-Concept-at-SEMA-A-full.jpeg" alt="2" /></a>                 <span class="right"><strong>ACura</strong><br />Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span></li>             <li class="slider1Image">                 <img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/wide/3.jpg" _fcksavedurl="http://s3slider-original.googlecode.com/svn/trunk/example_images/wide/3.jpg" alt="3" />                 <span class="right"><strong>Title text 2</strong><br />Content text...</span></li>             <li class="slider1Image">                 <img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/wide/4.jpg" _fcksavedurl="http://s3slider-original.googlecode.com/svn/trunk/example_images/wide/4.jpg" alt="4" />                 <span class="left"><strong>Title text 2</strong><br />Content text...</span></li>             <li class="slider1Image">                 <img src="http://s3slider-original.googlecode.com/svn/trunk/example_images/wide/5.jpg" _fcksavedurl="http://s3slider-original.googlecode.com/svn/trunk/example_images/wide/5.jpg" alt="5" />                 <span class="right"><strong>Title text 2</strong><br />Content text...</span></li>             <div class="clear slider1Image"></div>         </ul>     </div>     </body> </html>

ÖNİZLEME s3Slider jQuery plugin

Example 2

This show the layer appears from left or right.

Bugatti
Content text...
ACura
Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...
Title text 2
Content text...
Title text 2
Content text...
Title text 2
Content text...

<head> <style type="text/css">  #newsMainBox {     MARGIN: 10px auto 0px; OVERFLOW: hidden; WIDTH: 971px; ZOOM: 1; HEIGHT: auto } .newsMain {     WIDTH: 705px } .topNewsBox {     WIDTH: 705px; POSITION: relative; HEIGHT: 262px } .topNews {     BORDER-RIGHT: #b7b7b7 1px solid; BORDER-TOP: #b7b7b7 1px solid; Z-INDEX: 90; BACKGROUND: #999999; LEFT: 0px; BORDER-LEFT: #b7b7b7 1px solid; WIDTH: 701px; BORDER-BOTTOM: #b7b7b7 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 258px } .topNewsPic {     FLOAT: left; MARGIN: 7px 14px 0px 6px; OVERFLOW: hidden; WIDTH: 414px; HEIGHT: 243px } .topNewsPic IMG {     WIDTH: 414px; HEIGHT: 243px } .topNewsList {     MARGIN-TOP: 7px; FLOAT: left; OVERFLOW: hidden; WIDTH: 256px; HEIGHT: 243px;text-align:left;  } .topNewsList UL {     MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 250px; HEIGHT: 216px } .topNewsList UL LI {     FONT-SIZE: 14px; OVERFLOW: hidden; WIDTH: 250px; LINE-HEIGHT: 30px; BORDER-BOTTOM: #dbdbdb 1px solid; HEIGHT: 30px;  } .topNewsList UL LI A {     PADDING-RIGHT: 0px; PADDING-LEFT: 12px; BACKGROUND: url(../images/dian.gif) no-repeat 4px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px } .topNewsList UL LI A.up {     FONT-WEIGHT: bold; BACKGROUND: url(../images/jiantou.gif) no-repeat; COLOR: #f25500;  }    .focusPicBox {     PADDING-BOTTOM: 10px; OVERFLOW: hidden; ZOOM: 1; HEIGHT: auto } .newsHotBox .focusPic {     DISPLAY: block; FLOAT: none; MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 680px; ZOOM: 1; HEIGHT: auto } .newsHotBox .focusPic H4 {     BORDER-BOTTOM-WIDTH: 0px; MARGIN-BOTTOM: 5px; WIDTH: 680px } .newsHotBox .focusPic .picList {     MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 244px } .newsHotBox .focusPic .picList LI {     PADDING-RIGHT: 24px; PADDING-LEFT: 24px; FLOAT: left; PADDING-BOTTOM: 0pt; MARGIN-LEFT: -1px; BORDER-LEFT: #989898 1px dashed; WIDTH: 122px; PADDING-TOP: 0pt; HEIGHT: 122px } .newsHotBox .focusPic .picList LI IMG {     BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FLOAT: left; BORDER-LEFT: #000000 1px solid; WIDTH: 120px; BORDER-BOTTOM: #000000 1px solid; HEIGHT: 90px } .newsHotBox .focusPic .picList LI P {     MARGIN-BOTTOM: 10px; OVERFLOW: hidden; WIDTH: 122px; LINE-HEIGHT: 30px; HEIGHT: 30px; TEXT-ALIGN: center }  A {     COLOR: #333; TEXT-DECORATION: none;  } A:hover {     TEXT-DECORATION: underline;  } IMG {     BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px }   </style> <FCK:meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9" ></FCK:meta> <title>Tab Menü</title> <link rev="stylesheet" media="all" href="css/news.css" type="text/css" rel="stylesheet" /> </head>  <div align="center"><SCRIPT language=javascript>
            var CurrentHotScreen = 0 ;
            function setHotQueryList(screen){
                var Vmotion = "forward" ;
                var MaxScreen = 7 ;
                if (screen >= MaxScreen) {
                    screen = 0 ;
                    Vmotion = "reverse" ;
                }
                cleanallstyle();
                document.getElementById("focus_"+screen).className = "up" ;
              
              if(null!=hot_query_td.filters){
                hot_query_td.filters[0].apply();
                hot_query_td.filters[0].motion = Vmotion;
              }
              for (i=0;i<MaxScreen;i++) {
                document.getElementById("switch_"+i).style.display = "none" ;
              }
              document.getElementById("switch_"+screen).style.display = "block" ;
              if(null!=hot_query_td.filters){
                hot_query_td.filters[0].play();
              }
                CurrentHotScreen = screen ;
            }
            function refreshHotQuery(){
                refreshHotQueryTimer = null;
                setHotQueryList(CurrentHotScreen+1);
                refreshHotQueryTimer = setTimeout('refreshHotQuery();', 5000);
            }
    </SCRIPT> <div class="newsMain"> <div class="topNewsBox"> <div class="topNews"> <div class="topNewsPic"> <table>     <tbody>         <tr>             <td id="HotSearchList" style="">             <div id="switch_0"><a onclick_fckprotectedatt_fckprotectedatt="%20onclick_fckprotectedatt%3D%22%2520onclick%253D%2522setClick()%253B%2522%22" href="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" blockid="931" target="_blank"><img alt="Haber Resim 1" src="http://img03.blogcu.com/v2/images/editor/e/s/r/esraarda38/4402899968449_1261310527.jpg" _fcksavedurl="http://img03.blogcu.com/v2/images/editor/e/s/r/esraarda38/4402899968449_1261310527.jpg" _fcksavedurl="http://img03.blogcu.com/v2/images/editor/e/s/r/esraarda38/4402899968449_1261310527.jpg" /></a></div>             <div id="switch_1"><a onclick_fckprotectedatt_fckprotectedatt="%20onclick_fckprotectedatt%3D%22%2520onclick%253D%2522setClick()%253B%2522%22" href="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" blockid="931" target="_blank"><img alt="Haber Resim 2" src="http://image.haber7.com/haber/haber7/photos/2009/36118.jpg" _fcksavedurl="http://image.haber7.com/haber/haber7/photos/2009/36118.jpg" _fcksavedurl="http://image.haber7.com/haber/haber7/photos/2009/36118.jpg" /></a></div>             <div id="switch_2"><a onclick_fckprotectedatt_fckprotectedatt="%20onclick_fckprotectedatt%3D%22%2520onclick%253D%2522setClick()%253B%2522%22" href="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" blockid="931" target="_blank"><img alt="Haber Resim 3" src="http://2012.bilgiliol.com/wp-content/uploads/2009/08/foton_kusagi.jpg" _fcksavedurl="http://2012.bilgiliol.com/wp-content/uploads/2009/08/foton_kusagi.jpg" _fcksavedurl="http://2012.bilgiliol.com/wp-content/uploads/2009/08/foton_kusagi.jpg" /></a></div>             <div id="switch_3"><a onclick_fckprotectedatt_fckprotectedatt="%20onclick_fckprotectedatt%3D%22%2520onclick%253D%2522setClick()%253B%2522%22" href="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" blockid="931" target="_blank"><img alt="Haber Resim 4" src="http://www.turkcebilgi.com/images/imgk/Antartika%20konumu.png" _fcksavedurl="http://www.turkcebilgi.com/images/imgk/Antartika%20konumu.png" _fcksavedurl="http://www.turkcebilgi.com/images/imgk/Antartika%20konumu.png" /></a></div>             <div id="switch_4"><a onclick_fckprotectedatt_fckprotectedatt="%20onclick_fckprotectedatt%3D%22%2520onclick%253D%2522setClick()%253B%2522%22" href="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" blockid="931" target="_blank"><img alt="Haber Resim 5" src="http://www.baybul.com/resimler/Resim-170109-1340/2168-ismailkorpe_adkavmi2.jpg" _fcksavedurl="http://www.baybul.com/resimler/Resim-170109-1340/2168-ismailkorpe_adkavmi2.jpg" _fcksavedurl="http://www.baybul.com/resimler/Resim-170109-1340/2168-ismailkorpe_adkavmi2.jpg" /></a></div>             <div id="switch_5"><a onclick_fckprotectedatt_fckprotectedatt="%20onclick_fckprotectedatt%3D%22%2520onclick%253D%2522setClick()%253B%2522%22" href="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" blockid="931" target="_blank"><img alt="Haber Resim 6" src="http://www.medyumerdogan.net/images/remil-ilmi.png" _fcksavedurl="http://www.medyumerdogan.net/images/remil-ilmi.png" _fcksavedurl="http://www.medyumerdogan.net/images/remil-ilmi.png" /></a></div>             <div id="switch_6"><a onclick_fckprotectedatt_fckprotectedatt="%20onclick_fckprotectedatt%3D%22%2520onclick%253D%2522setClick()%253B%2522%22" href="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" target="_blank" blockid="931"><img alt="Haber Resim 7" src="http://files.myopera.com/okku29/albums/714168/thumbs/G%25C3%2596Z%2520SAAT.jpg_thumb.jpg" _fcksavedurl="http://files.myopera.com/okku29/albums/714168/thumbs/G%25C3%2596Z%2520SAAT.jpg_thumb.jpg" _fcksavedurl="http://files.myopera.com/okku29/albums/714168/thumbs/G%25C3%2596Z%2520SAAT.jpg_thumb.jpg" /></a></div>             </td>         </tr>     </tbody> </table> </div> <div class="topNewsList" style="font-family: 'trebuchet MS';"><img width="253" height="25" alt="" src="images/jrjd.jpg" _fcksavedurl="images/jrjd.jpg" _fcksavedurl="images/jrjd.jpg" /> <ul>     <li><a class="up" id="focus_0" onmouseover_fckprotectedatt_fckprotectedatt="%20onmouseover_fckprotectedatt%3D%22%2520onmouseover%253D%2522show_focus_image(0)%253B%2522%22" title="Haber Başlık 1" onclick_fckprotectedatt_fckprotectedatt="%20onclick_fckprotectedatt%3D%22%2520onclick%253D%2522setClick()%253B%2522%22" href="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" target="_blank" blockid="931">          Haber Başlık 1</a></li>     <li><a id="focus_1" onmouseover_fckprotectedatt_fckprotectedatt="%20onmouseover_fckprotectedatt%3D%22%2520onmouseover%253D%2522show_focus_image(1)%253B%2522%22" title="Haber Başlık 2" onclick_fckprotectedatt_fckprotectedatt="%20onclick_fckprotectedatt%3D%22%2520onclick%253D%2522setClick()%253B%2522%22" href="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" target="_blank" blockid="931">          Haber Başlık 2</a></li>     <li><a id="focus_2" onmouseover_fckprotectedatt_fckprotectedatt="%20onmouseover_fckprotectedatt%3D%22%2520onmouseover%253D%2522show_focus_image(2)%253B%2522%22" title="Haber Başlık 3" onclick_fckprotectedatt_fckprotectedatt="%20onclick_fckprotectedatt%3D%22%2520onclick%253D%2522setClick()%253B%2522%22" href="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" target="_blank" blockid="931">          Haber Başlık 3</a></li>     <li><a id="focus_3" onmouseover_fckprotectedatt_fckprotectedatt="%20onmouseover_fckprotectedatt%3D%22%2520onmouseover%253D%2522show_focus_image(3)%253B%2522%22" title="Haber Başlık 4" onclick_fckprotectedatt_fckprotectedatt="%20onclick_fckprotectedatt%3D%22%2520onclick%253D%2522setClick()%253B%2522%22" href="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" target="_blank" blockid="931">          Haber Başlık 4</a></li>     <li><a id="focus_4" onmouseover_fckprotectedatt_fckprotectedatt="%20onmouseover_fckprotectedatt%3D%22%2520onmouseover%253D%2522show_focus_image(4)%253B%2522%22" title="Haber Başlık 5" onclick_fckprotectedatt_fckprotectedatt="%20onclick_fckprotectedatt%3D%22%2520onclick%253D%2522setClick()%253B%2522%22" href="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" target="_blank" blockid="931">          Haber Başlık 5</a></li>     <li><a id="focus_5" onmouseover_fckprotectedatt_fckprotectedatt="%20onmouseover_fckprotectedatt%3D%22%2520onmouseover%253D%2522show_focus_image(5)%253B%2522%22" title="Haber Başlık 6" onclick_fckprotectedatt_fckprotectedatt="%20onclick_fckprotectedatt%3D%22%2520onclick%253D%2522setClick()%253B%2522%22" href="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" target="_blank" blockid="931">          Haber Başlık 6</a></li>     <li><a id="focus_6" onmouseover_fckprotectedatt_fckprotectedatt="%20onmouseover_fckprotectedatt%3D%22%2520onmouseover%253D%2522show_focus_image(6)%253B%2522%22" title="Haber Başlık 7" onclick_fckprotectedatt_fckprotectedatt="%20onclick_fckprotectedatt%3D%22%2520onclick%253D%2522setClick()%253B%2522%22" href="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" _fcksavedurl="http://www.kodarsivi.net/" target="_blank" blockid="931">          Haber Başlık 7</a></li> </ul> </div> </div> <div class="topNewsBg"> </div> </div> <SCRIPT>
            
            function cleanallstyle() {
                for (i=0;i<7;i++) {
                    document.getElementById("focus_"+i).className = "" ;
                }
            }
            function show_focus_image(index) {
                clearTimeout(refreshHotQueryTimer);
                setHotQueryList(index);
                refreshHotQueryTimer = setTimeout('refreshHotQuery();', 5000);
            }
            function setClick() {
                clearTimeout(refreshHotQueryTimer);
            }
          var refreshHotQueryTimer = null ;
          var hot_query_td =  document.getElementById('HotSearchList');
          setHotQueryList(CurrentHotScreen);
          refreshHotQueryTimer = setTimeout('refreshHotQuery();', 5000);

</SCRIPT></div> </div> </div>

ÖNİZLEME Tab Menü