مطور Mtwer

vista-design · #1 09-02-2010, 01:51 AM

بسم الله الرحمن الرحيم

فى هذا الموضوع راح أرد على اى استفسارات من الاعضاء خاصة بهذا الدرس

أخوكم vista-design

توقيعي

عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com

MQAM · #2 10-02-2010, 01:23 AM

لغة جميلة الصراحة ولها تأثيرات أجمل

يعطيك العافية ..

وهذا تطبيقي للدرس ..
الصورة ..
والملفات مرفقة ..

كود الـصفحة

كود بلغة HTML:

<!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>
<**** ************"Content-Type" content="text/html; charset=windows-1256" />
<title>الدرس الحادي عشر من دورة الـ web2.0</title>
<script type="text/javascript" src="jquery.js"></script>

<style type="text/css">
#largeImage {
position: fixed;
padding: 1px;
background:#669999;
border:1px double #0066FF;
}

a img {
border: 1px teal dotted;
}

</style>


<script type="text/javascript">

$(function() {

	var offsetX = 20;
	var offsetY = 10;
	
	$('a').hover(function(e) {
		var href = $(this).attr('href');
		$('<img id="largeImage" src="' + href + '" alt="لاتوجد صورة" />')
		.css('top', e.pageY + offsetY)
		.css('left', e.pageX + offsetX)
		.appendTo('body');
	}, function() {
		$('#largeImage').remove();
	});
	
	$('a').mousemove(function(e) {
		$("#largeImage").css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
	});

});	

</script>

</head>

<body>
<div align="center">
<a href="img1.jpg"><img src="im1.jpg" alt="image" /></a>
<a href="img2.jpg"><img src="im2.jpg" alt="image" /></a>
<a href="img3.jpg"><img src="im3.jpg" alt="image" /></a>
<a href="img4.jpg"><img src="im4.jpg" alt="image" /></a>
</div>
</body>
</html>

الصور المرفقة

t11.jpg‏ (63.7 كيلوبايت, المشاهدات 12)

الملفات المرفقة

imgsizer.zip‏ (122.2 كيلوبايت, المشاهدات 19)

vista-design · #3 11-02-2010, 12:47 AM

اقتباس:

المشاركة الأصلية كتبت بواسطة MQAM

لغة جميلة الصراحة ولها تأثيرات أجمل

يعطيك العافية ..

وهذا تطبيقي للدرس ..
الصورة ..
والملفات مرفقة ..

كود الـصفحة

كود بلغة HTML:

<!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>
<**** ************"Content-Type" content="text/html; charset=windows-1256" />
<title>الدرس الحادي عشر من دورة الـ web2.0</title>
<script type="text/javascript" src="jquery.js"></script>

<style type="text/css">
#largeImage {
position: fixed;
padding: 1px;
background:#669999;
border:1px double #0066FF;
}

a img {
border: 1px teal dotted;
}

</style>


<script type="text/javascript">

$(function() {

	var offsetX = 20;
	var offsetY = 10;
	
	$('a').hover(function(e) {
		var href = $(this).attr('href');
		$('<img id="largeImage" src="' + href + '" alt="لاتوجد صورة" />')
		.css('top', e.pageY + offsetY)
		.css('left', e.pageX + offsetX)
		.appendTo('body');
	}, function() {
		$('#largeImage').remove();
	});
	
	$('a').mousemove(function(e) {
		$("#largeImage").css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
	});

});	

</script>

</head>

<body>
<div align="center">
<a href="img1.jpg"><img src="im1.jpg" alt="image" /></a>
<a href="img2.jpg"><img src="im2.jpg" alt="image" /></a>
<a href="img3.jpg"><img src="im3.jpg" alt="image" /></a>
<a href="img4.jpg"><img src="im4.jpg" alt="image" /></a>
</div>
</body>
</html>

تمام
وان شاء الله تكون عجبتك الjquery
لان اقل ما يقال عليها انها تحفة فنية
وفى اشياء كثيرة فيما بعد راح اعرضها فى دروس منفصلة خارج الدورة ان شاء الله

توقيعي

عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com

sea-khlij · #4 12-02-2010, 05:56 PM

عندي سؤال بخصوص الأوامر

ممكن اعرف من وين تاخد الأوامر علشان لو مثلا ً ابي اوامر زيادة ادخل عليها

انا دخلت الموقع رسمي ولقيت صعوبات في الكود لأن اكثر الكودات برمجية

يعني للبرمجة مو لتنسيق

vista-design · #5 13-02-2010, 11:59 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة sea-khlij

عندي سؤال بخصوص الأوامر

ممكن اعرف من وين تاخد الأوامر علشان لو مثلا ً ابي اوامر زيادة ادخل عليها

انا دخلت الموقع رسمي ولقيت صعوبات في الكود لأن اكثر الكودات برمجية

يعني للبرمجة مو لتنسيق

ادخل هنا

Main Page - jQuery JavaScript Library

ثم شوف

Events

effects

attributes

الخ.....

توقيعي

عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com

sea-khlij · #6 14-02-2010, 01:30 AM

طيب اخي لو حبيت اسوي أمر ان اضغط على صورة ويطلع قائمة منسلدة

لو ستخدمت css ماينفع مع الصور فقط كلمات

بس لما استخدم الحركة الموجودة في منتديات فلبتن هي تستخدم jquery

ممكن أمر نفسه لو مثلا ً حبيت احطه في صفحة خاصة لأني جربت أوامر كثيرة

وحاولت الاقي الأمر بس دون فائدة

vista-design · #7 14-02-2010, 01:05 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة sea-khlij

طيب اخي لو حبيت اسوي أمر ان اضغط على صورة ويطلع قائمة منسلدة

لو ستخدمت css ماينفع مع الصور فقط كلمات

بس لما استخدم الحركة الموجودة في منتديات فلبتن هي تستخدم jquery

ممكن أمر نفسه لو مثلا ً حبيت احطه في صفحة خاصة لأني جربت أوامر كثيرة

وحاولت الاقي الأمر بس دون فائدة

اخى طلبك هو نفس فكرة درس الازار والقوائم المتحركة
واستبدل اى tab بصورة

راجع الدرس

توقيعي

عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com

واحد من الناس1 · #8 14-02-2010, 05:50 PM

السلام عليكم

أستاذنا الفاضل

ماشاء الله

زادك الله علمًا

لدي طلب

لكنه ثقيل

هو ليس خاصًا بهذه الدورة

لكنه خاص بدورة ( تصميم الاستايلات )

بالنسبة لدرس إعدادات css الخاصة بالاستايل

أرجو منك إعادة رفعه -إن كان لا يزال موجودًا لديك-

لأن روابطه انتهت

وأنا في أمس الحاجة إليه

وجزاك الله خيرًا

المحقق كونـــان · #9 15-02-2010, 03:54 AM

تفضل التطبيق

بالمرفقات التطبيق :d

الملفات المرفقة

تطبيق الدرس الحادي عشر.rar‏ (87.4 كيلوبايت, المشاهدات 12)

vista-design · #10 16-02-2010, 04:17 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة المحقق كونـــان

تفضل التطبيق

بالمرفقات التطبيق :d

ممتاز ياغالى تطبيق ولا احلى

وحاول تتطبق بقية التأثيرات السلايدشو والهوفر

توقيعي

عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
انواع عرض الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
مناقشة جوجل ادسنس-الدرس الحادى عشر-شرح المشاكل الشائعه وحلها	vista-design	دورة الربح من الانترنت بواسطة جوجل ادسنس	20	12-05-2011 06:38 PM
(دورة php بالفيديو) .. شرح التعامل مع الثوابت define [الدرس 11 الحادي عشر]	عبدالله عيد	دورة PHP بالفيديو .. الجزء الأول	5	25-12-2010 03:46 AM
درس jquery ، أساسيات التعامل مع الjquery لغير المبرمجين، [الدرس الثانى]	vista-design	تصميم المواقع بتقنية الـ جي كويري jQuery	0	13-08-2010 02:50 PM
[الدرس الحادى عشر] شرح التعامل بمكتبة jquery وعمل التاثيرات الرائعة لمـــوقعــــك	vista-design	دورة تصميم المواقع بإسلوب المحترفين web2.0	1	09-02-2010 01:48 AM

مطور Mtwer

روابط مفيدة ننصح بزيارتها

روابط مهمة

من خدماتنا

خيارات الاعضاء والزوار