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.
3 Comments
abim gerçekten ajax konusunu senin sayende kavradım çok teşekkür ederim..
bu da güzel bir yazı olmuş, emeğine sağlık,
ancak demo da sorun var bilginize..
demo sorunları gumusluoglu.com adresinin kapanmasından kaynaklanıyor. Müslüm en kısa zamanda konuyla ilgilenecektir. teşekkürler