Adım 1 : head tagları arasına aşağıdkai kodu yerleştirin
<script type="text/javascript" src="http://mintik.com/wp-content/uploads/2011/07/mootools.svn_.js"></script> <style type="text/css" media="screen"><!-- body { background-color: #333 } .genel_cerceve_mintikcom { background-color: #333; padding: 10px; width: 690px; height: 460px } #resim { text-align: center; margin: 10px; width: 200px; height: 200px; float: left; border: solid 5px #666 } h2 { color: #ccc; font-size: 15px; font-weight: bold; font-stretch: extra-condensed } .tool-tip { color: #fff; z-index: 13000; width: 139px } .tool-title { color: #9fd4ff; font-size: 11px; font-weight: bold; background: url(http://mintik.com/wp-content/uploads/2011/10/bubble.png) left top; margin: 0; padding: 8px 8px 4px } .tool-text { font-size: 11px; background: url(http://mintik.com/wp-content/uploads/2011/10/bubble.png) right bottom; padding: 4px 8px 8px } .custom-tip { color: #000; width: 130px; z-index: 13000; } .custom-title { font-weight: bold; font-size: 11px; margin: 0; color: #3E4F14; padding: 8px 8px 4px; background: #C3DF7D; border-bottom: 1px solid #B5CF74; } .custom-text { font-size: 11px; padding: 4px 8px 8px; background: #CFDFA7; } --></style> <script type="text/javascript"> window.addEvent('domready', function(){ /* Tips 2 */ var tooltip = new Tips($$('.tooltip'), { initialize:function(){ this.fx = new Fx.Style(this.toolTip, 'opacity', { duration: 500, wait: false}).set(0); }, onShow: function(toolTip) { this.fx.start(1000); }, onHide: function(toolTip) { this.fx.start(0); } }); }); </script> </head> <!-- http://mintik.com kod sonu -->
Adım 2 : Resimleri eklemek istediğin alanada aşağıdaki kodları yerleştirin
<!-- http://mintik.com kod baslangici --> <body> <div align="center"> <div class="genel_cerceve_mintikcom"> <h2><a name="mintik.com" href="http://mintik.com"> Mootools Tooltip | Mintik.com</a></h2> <div id="resim"> <img src="http://mintik.com/wp-content/uploads/2011/07/africa_leopari.png" alt="mintik.com" class="tooltip" title="Leopar :: Vah_i Ya_am " height="200" width="200" /></a></div> <div id="resim"> <img src="http://mintik.com/wp-content/uploads/2011/07/ari_kusu.png" alt="mintik.com" class="tooltip" title="Ar1 Ku_u :: Yarat1l1_ Harikas1" height="200" width="200" /></div> <div id="resim"> <img src="http://mintik.com/wp-content/uploads/2011/07/colde_magara.png" alt="mintik.com" class="tooltip" title="Arazi :: Ma aradan Araziye Bak1_" height="200" width="200" /></div> <div id="resim"> <img src="http://mintik.com/wp-content/uploads/2011/07/kaplan.jpg" alt="mintik.com" class="tooltip" title="Kaplan :: Vah_i Ya_am" height="200" width="200" /></div> <div id="resim"> <img src="http://mintik.com/wp-content/uploads/2011/07/kartal.jpg" alt="" class="tooltip" title="Kartal ::� Kartal Kafas1 " height="200" width="200" /></a></div> <div id="resim"> <img src="http://mintik.com/upload/mootools_image/2.jpg" alt="mintik.com" class="tooltip" title="Irmak :: Bu ba_l1klar1n hepsi deneme ama�l1d1r" height="200" width="200" /></a></div> </div> </div> </body> <!-- http://mintik.com kod sonu -->
Adım 3 : Kodların birleştirilmiş hali
<script type="text/javascript" src="http://mintik.com/wp-content/uploads/2011/07/mootools.svn_.js"></script> <style type="text/css" media="screen"><!-- body { background-color: #333 } .genel_cerceve_mintikcom { background-color: #333; padding: 10px; width: 690px; height: 460px } #resim { text-align: center; margin: 10px; width: 200px; height: 200px; float: left; border: solid 5px #666 } h2 { color: #ccc; font-size: 15px; font-weight: bold; font-stretch: extra-condensed } .tool-tip { color: #fff; z-index: 13000; width: 139px } .tool-title { color: #9fd4ff; font-size: 11px; font-weight: bold; background: url(http://mintik.com/wp-content/uploads/2011/10/bubble.png) left top; margin: 0; padding: 8px 8px 4px } .tool-text { font-size: 11px; background: url(http://mintik.com/wp-content/uploads/2011/10/bubble.png) right bottom; padding: 4px 8px 8px } .custom-tip { color: #000; width: 130px; z-index: 13000; } .custom-title { font-weight: bold; font-size: 11px; margin: 0; color: #3E4F14; padding: 8px 8px 4px; background: #C3DF7D; border-bottom: 1px solid #B5CF74; } .custom-text { font-size: 11px; padding: 4px 8px 8px; background: #CFDFA7; } --></style> <script type="text/javascript"> window.addEvent('domready', function(){ /* Tips 2 */ var tooltip = new Tips($$('.tooltip'), { initialize:function(){ this.fx = new Fx.Style(this.toolTip, 'opacity', { duration: 500, wait: false}).set(0); }, onShow: function(toolTip) { this.fx.start(1000); }, onHide: function(toolTip) { this.fx.start(0); } }); }); </script> </head> <body> <div align="center"> <div class="genel_cerceve_mintikcom"> <h2><a name="mintik.com" href="http://mintik.com"> Mootools Tooltip | Mintik.com</a></h2> <div id="resim"> <img src="http://mintik.com/wp-content/uploads/2011/07/africa_leopari.png" alt="mintik.com" class="tooltip" title="Leopar :: Vah_i Ya_am " height="200" width="200" /></a></div> <div id="resim"> <img src="http://mintik.com/wp-content/uploads/2011/07/ari_kusu.png" alt="mintik.com" class="tooltip" title="Ar1 Ku_u :: Yarat1l1_ Harikas1" height="200" width="200" /></div> <div id="resim"> <img src="http://mintik.com/wp-content/uploads/2011/07/colde_magara.png" alt="mintik.com" class="tooltip" title="Arazi :: Ma aradan Araziye Bak1_" height="200" width="200" /></div> <div id="resim"> <img src="http://mintik.com/wp-content/uploads/2011/07/kaplan.jpg" alt="mintik.com" class="tooltip" title="Kaplan :: Vah_i Ya_am" height="200" width="200" /></div> <div id="resim"> <img src="http://mintik.com/wp-content/uploads/2011/07/kartal.jpg" alt="" class="tooltip" title="Kartal ::� Kartal Kafas1 " height="200" width="200" /></a></div> <div id="resim"> <img src="http://mintik.com/upload/mootools_image/2.jpg" alt="mintik.com" class="tooltip" title="Irmak :: Bu ba_l1klar1n hepsi deneme ama�l1d1r" height="200" width="200" /></a></div> </div> </div> <body> <div align="center"> <div class="genel_cerceve_mintikcom"> <h2><a name="mintik.com" href="http://mintik.com"> Mootools Tooltip | Mintik.com</a></h2> <div id="resim"> <img src="http://mintik.com/wp-content/uploads/2011/07/africa_leopari.png" alt="mintik.com" class="tooltip" title="Leopar :: Vah_i Ya_am " height="200" width="200" /></a></div> <div id="resim"> <img src="http://mintik.com/wp-content/uploads/2011/07/ari_kusu.png" alt="mintik.com" class="tooltip" title="Ar1 Ku_u :: Yarat1l1_ Harikas1" height="200" width="200" /></div> <div id="resim"> <img src="http://mintik.com/wp-content/uploads/2011/07/colde_magara.png" alt="mintik.com" class="tooltip" title="Arazi :: Ma aradan Araziye Bak1_" height="200" width="200" /></div> <div id="resim"> <img src="http://mintik.com/wp-content/uploads/2011/07/kaplan.jpg" alt="mintik.com" class="tooltip" title="Kaplan :: Vah_i Ya_am" height="200" width="200" /></div> <div id="resim"> <img src="http://mintik.com/wp-content/uploads/2011/07/kartal.jpg" alt="" class="tooltip" title="Kartal ::� Kartal Kafas1 " height="200" width="200" /></a></div> <div id="resim"> <img src="http://mintik.com/upload/mootools_image/2.jpg" alt="mintik.com" class="tooltip" title="Irmak :: Bu ba_l1klar1n hepsi deneme ama�l1d1r" height="200" width="200" /></a></div> </div> </div> </body> <!-- http://mintik.com kod sonu -->