نسمة
09-17-2012, 08:29 AM
كيفية تصغير الصورة وتكبيرها من خلال الجيكوري 2012 , 2013
كيفية, تصغير, الصورة, وتكبيرها ,من, خلال, الجيكوري, 2012 , 2013
السلام عليكم ورحمة الله وبركاته
الصفحة كاملة
<head>
<title>تصغير وتكبير الصورة</title>
</head>
<script src="jquery.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function(){
$('img').click(function(){
$(this).css({'width': '400px', 'height':'400px' , 'border' :'8px solid #EEEEEE' });
$(this).fadeOut(500).fadeIn(500);
});
$('img').dblclick(function(){
$(this).css({'width': '100px', 'height':'100px'});
$(this).fadeOut(500).fadeIn(500);
});
});
</script>
<body>
<img src="http://a8.sphotos.ak.fbcdn.net/hphotos-ak-ash3/543391_378833415483359_100000701104653_1172193_480 294874_n.jpg" width="100" height="100" />
</body>
</html>
احنا وضع صورة وهذا رابطها
http://a8.sphotos.ak.fbcdn.net/hphotos-ak-ash3/543391_378833415483359_100000701104653_1172193_480 294874_n.jpg
من خلال الجيكوري راحيين نتحكم بي css
عملنا فنيكشن الاول كلك اي عند النقر على الصورة سوف تكبر
$('img').click(function(){
$(this).css({'width': '400px', 'height':'400px' , 'border' :'8px solid #EEEEEE' });
$(this).fadeOut(500).fadeIn(500);
});
قلنا this اي الصورة ثم عملنا لها css ووضعنا ابعاد الصورة طول 400 عرض 400 وعملنا لها ايطار
الفنيكشن الثاني استخدما دبل كلك اي عندما ينقر عليها مرتين تصغر الصورة
$('img').dblclick(function(){
$(this).css({'width': '100px', 'height':'100px'});
$(this).fadeOut(500).fadeIn(500);
});
بخصوص
$('img').click
معناه عندما يتم النقر على الصورة نفذ الاكواد
$(this).css({'width': '400px', 'height':'400px' , 'border' :'8px solid #EEEEEE' });
$(this).fadeOut(500).fadeIn(500);
وطبعا علمنا حركة فلاش عندما تكبر الصورة وميض
وهكذا بالنسبة للفنيكشن الثاني
اتمنى لكم التوفيق
كيفية, تصغير, الصورة, وتكبيرها ,من, خلال, الجيكوري, 2012 , 2013
السلام عليكم ورحمة الله وبركاته
الصفحة كاملة
<head>
<title>تصغير وتكبير الصورة</title>
</head>
<script src="jquery.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function(){
$('img').click(function(){
$(this).css({'width': '400px', 'height':'400px' , 'border' :'8px solid #EEEEEE' });
$(this).fadeOut(500).fadeIn(500);
});
$('img').dblclick(function(){
$(this).css({'width': '100px', 'height':'100px'});
$(this).fadeOut(500).fadeIn(500);
});
});
</script>
<body>
<img src="http://a8.sphotos.ak.fbcdn.net/hphotos-ak-ash3/543391_378833415483359_100000701104653_1172193_480 294874_n.jpg" width="100" height="100" />
</body>
</html>
احنا وضع صورة وهذا رابطها
http://a8.sphotos.ak.fbcdn.net/hphotos-ak-ash3/543391_378833415483359_100000701104653_1172193_480 294874_n.jpg
من خلال الجيكوري راحيين نتحكم بي css
عملنا فنيكشن الاول كلك اي عند النقر على الصورة سوف تكبر
$('img').click(function(){
$(this).css({'width': '400px', 'height':'400px' , 'border' :'8px solid #EEEEEE' });
$(this).fadeOut(500).fadeIn(500);
});
قلنا this اي الصورة ثم عملنا لها css ووضعنا ابعاد الصورة طول 400 عرض 400 وعملنا لها ايطار
الفنيكشن الثاني استخدما دبل كلك اي عندما ينقر عليها مرتين تصغر الصورة
$('img').dblclick(function(){
$(this).css({'width': '100px', 'height':'100px'});
$(this).fadeOut(500).fadeIn(500);
});
بخصوص
$('img').click
معناه عندما يتم النقر على الصورة نفذ الاكواد
$(this).css({'width': '400px', 'height':'400px' , 'border' :'8px solid #EEEEEE' });
$(this).fadeOut(500).fadeIn(500);
وطبعا علمنا حركة فلاش عندما تكبر الصورة وميض
وهكذا بالنسبة للفنيكشن الثاني
اتمنى لكم التوفيق