Warning: curl_setopt() [function.curl-setopt]: CURLOPT_FOLLOWLOCATION cannot be activated when safe_mode is enabled or an open_basedir is set in /home/serpito/public_html/wp-content/plugins/amp-plus/amp-plus.php on line 200
Jquery: Screenshot Preview (Url bağlantısında site görünümü gösterme) | - CSS - Serpito | www.serpito.com - AMP tarafı | Hızlandırılmış Mobil Sayfa

Jquery:
Screenshot Preview (Url bağlantısında site görünümü gösterme) | - CSS - Serpito

Jquery: Screenshot Preview (Url bağlantısında site görünümü gösterme) Posted on 26 Şubat 201002 Kasım 2012 by sword fish

Sistemlerimizde yer alan linkler linklerin açıklamalarını yazı şeklinde yapabildiğimiz gibi Screenshot (Ekran Resmi) şeklindede yapabiliriz. Bu sayede kullanıcıların daha iyi bilgilendirilmesini sağlayabiliriz.Örneğimizde jquery ile screenshot önizlemesi yapıyoruz.


index.html kodlarımız

 <!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" /> <title>jQuery Screenshot Önizleme</title> <meta name="description" content="Easiest jQuery Tooltip Ever"> <script src="jquery.js" type="text/javascript"></script> <script src="main.js" type="text/javascript"></script> </meta> <style> body { margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%; } h1{ font-size:180%; font-weight:normal; color:#555; } h2{ clear:both; font-size:160%; font-weight:normal; color:#555; margin:0; padding:.5em 0; } a{ text-decoration:none; color:#f30; } p{ clear:both; margin:0; padding:.5em 0; } pre{ display:block; font:100% "Courier New", Courier, monospace; padding:10px; border:1px solid #bae2f0; background:#e3f4f9; margin:.5em 0; overflow:auto; width:800px; } img{border:none;} ul,li{ margin:0; padding:0; } li{ list-style:none; float:left; display:inline; margin-right:10px; } #screenshot{ position:absolute; border:1px solid #ccc; background:#333; padding:5px; display:none; color:#fff; } </style> </head> <body> <h1>jQuery Screenshot Önizleme</h1> <p>Aykut Dilmen\'in Kişisel Sitesi <a href="http://www.dilmen.net" target="_blank" rel="cssg_screenshot2.jpg" title="Aykut Dilmen">Dilmen.Net</a></p> <p>Atilla Akoğlu\'nun Kişisel Sitesi <a href="http://www.cssglobe.com" target="_blank" rel="cssg_screenshot1.jpg">Serpito.Com</a> </p> <p>Mülsüm Gümüşlüoğlu\'nun Kişisel Sitesi <a href="http://www.gumusluoglu.com" target="_blank" rel="cssg_screenshot.jpg" title="Müslüm Gümüşlüoğlu">Gumusluoglu.Com</a></p> </body> </html> 

 

Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

This entry was posted in CSS, Javascript, jQuery and tagged , , , , , , . Bookmark the permalink.
Baskı
Içerikten sorumlu:
www.serpito.com
AMP eklentisi aracılığıyla mobil sayfa:
amp-cloud.de
Gizlilik ve Kullanım Şartları:
www.serpito.com
AMP-Update:
20.06.2018 - 09:32:43