تلون و تكبير للصورة

بدأه mazenwrq في 27 يونيو 2013 · 11 رد · 1,197 مشاهدة · في قسم البرمجة بــ Javascript

#127 يونيو 2013 في 07:26 صاحب الموضوع

السلام عليكم
اخواني الكرام اريد كود لعمل التالي:
عند مرور مؤشر الموس فوق صورة يكون لونها ابيض وأسود فقط فتتلون و يتم تكبير الصور حوالي 20 بكسيل.

لقد حاولت ودورت في مواقع انجبية كثيرة لكن لم احد هذه الخاصيتان (إن صح القول) في مثال واحد.
أرجو السرعة من اجل تسليم المشروع.

#227 يونيو 2013 في 16:07

وعليكم السلام ورحمة الله وبركاته

يوجد لديك طريقتين : الاولى هي الإحتفاظ بنسخة ثانية من الصورة وتكون grayscale ويتم التنقل بين الصورتين عند مرور مؤشر الفأرة . هذه الطريقة غير عملية أبدًا فهي تتطلب معالجة الصور في الخادم وتُبطئ الموقع حيث تحتاج الى تحميل نسختين من كل صورة...

الطريقة الثانية هي استخدام فلاتر css لعمل هذا التأثير :

            #image
            {

                filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");
                filter: grayscale(100%);
                -webkit-filter: grayscale(100%);
                -moz-filter: grayscale(100%);
                -ms-filter: grayscale(100%); 
                -o-filter: grayscale(100%);
                
            }
            #image:hover
            {
                -webkit-filter: grayscale(0);
                -moz-filter: grayscale(0);
                -ms-filter: grayscale(0); 
                -o-filter: grayscale(0);
                filter: none;
            }

طبعًا يكون المُعرف الخاص بالصورة هو image# . السطر الأول يبدو غريبًا لكنه طريقة لتشغيل الفلتر على متصفح firefox.

طبعًا إذا اردت أن يكون الإنتقال سلسًا استخدم css transition :

#image
            {

                filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");
                filter: grayscale(100%);
                -webkit-filter: grayscale(100%);
                -moz-filter: grayscale(100%);
                -ms-filter: grayscale(100%); 
                -o-filter: grayscale(100%);
                -webkit-transition: all 1s;
                -moz-transition: all 1s;
                -o-transition: all 1s;
                transition: all 1s;
            }

بالنسبة الى تكبير الصورة لا أدري إن كان هذا ما تبحث عنه لكن استخدم scale في خاصية transform في css. الكود التالي هو الكود النهائي مع كافة الخاصيات :

            #image
            {

                filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");
                filter: grayscale(100%);
                -webkit-filter: grayscale(100%);
                -moz-filter: grayscale(100%);
                -ms-filter: grayscale(100%); 
                -o-filter: grayscale(100%);
                
                -webkit-transition: all 1s;
                -moz-transition: all 1s;
                -o-transition: all 1s;
                transition: all 1s;

            }
            #image:hover
            {
                -webkit-filter: grayscale(0);
                -moz-filter: grayscale(0);
                -ms-filter: grayscale(0); 
                -o-filter: grayscale(0);
                filter: none;
                                
                -webkit-transform: scale(1.2);
                -moz-transform: scale(1.2);
                -o-transform: scale(1.2);
                transform: scale(1.2);
            }

إذا لم يعجبك تأثير الإنتقال في تكبير الصورة استبدل القيمة all في خاصيات transition الى filter

بالتوفيق

#327 يونيو 2013 في 21:25

ممتاز

والمطلوب الآن انه عندما تمر الموس فوق الصورة تعود الألوان و تكبر بتترج ليس (فجئة)

فما الحل؟

#427 يونيو 2013 في 21:44

ذكرت ذلك في مشاركتي السابقة :)

اقتباس
اذا لم يعجبك تأثير الإنتقال في تكبير الصورة استبدل القيمة all في خاصيات transition الى filter

#527 يونيو 2013 في 21:46

ممكن مثال

#627 يونيو 2013 في 23:05

تفضل :

<!DOCTYPE html>
<html>
    <head>
        <title>image test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            #image
            {

                filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");
                filter: grayscale(100%);
                -webkit-filter: grayscale(100%);
                -moz-filter: grayscale(100%);
                -ms-filter: grayscale(100%); 
                -o-filter: grayscale(100%);

                -webkit-transition: filter 1s;
                -moz-transition: filter 1s;
                -o-transition: filter 1s;
                transition: filter 1s;

                display: block;
                margin: 100px auto;

            }
            #image:hover
            {
                -webkit-filter: grayscale(0);
                -moz-filter: grayscale(0);
                -ms-filter: grayscale(0); 
                -o-filter: grayscale(0);
                filter: none;

                -webkit-transform: scale(1.2);
                -moz-transform: scale(1.2);
                -o-transform: scale(1.2);
                transform: scale(1.2);
            }
        </style>
    </head>
    <body>
        <img src="https://www.google.com/images/srpr/logo4w.png" id="image">
    </body>
</html>

#728 يونيو 2013 في 00:41

اكثر من رائع لكن طلب بسيط اذا ممكن

اخي بس وقت ابتكبر الصورة (لازم بالتدريج) مثل امثال الـ jquery ممكن؟

#828 يونيو 2013 في 01:19

اخي انحلت المشكلة واستخدمت التالي:

<!DOCTYPE html>
<html>
    <head>
        <title>image test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            #image
            {

                filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");
                filter: grayscale(100%);
                -webkit-filter: grayscale(100%);
                -moz-filter: grayscale(100%);
                -ms-filter: grayscale(100%); 
                -o-filter: grayscale(100%);

                -webkit-transition: filter 1s;
                -moz-transition: filter 1s;
                -o-transition: filter 1s;
                transition: filter 1s;

                display: block;
                margin: 100px auto;

            }
            #image:hover
            {
                -webkit-filter: grayscale(0);
                -moz-filter: grayscale(0);
                -ms-filter: grayscale(0); 
                -o-filter: grayscale(0);
                filter: none;

                /*-webkit-transform: scale(1.2);
                -moz-transform: scale(1.2);
                -o-transform: scale(1.2);
                transform: scale(1.2);*/
            }
        </style>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
		<script>
		$(window).load(function () {
			$('#image').mouseover(function () {
			   $(this).stop().animate({ width: '600px' }, 200);
			   //$(this).stop().animate({ -moz-filter: 'grayscale(0)' });
		   })
		   $('#image').mouseout(function () {
			   $(this).stop().animate({ width: '550px' }, 200);
		   });
		});
		</script>
		
    </head>
    <body>
        <img src="https://www.google.com/images/srpr/logo4w.png" id="image" />
    </body>
</html>

#928 يونيو 2013 في 04:00

السلام عليكم

يمكنك هذا بدون javaScript بتعديل بسيط على خاصية الـ transition مع وضع عرض للصورة وعرض جديد لها عند المرور عليها بمؤشر الفارة كالتالي :

<!DOCTYPE html>
<html>
    <head>
        <title>image test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            #image
            {

                filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
                filter: grayscale(100%);
                -webkit-filter: grayscale(100%);
                -moz-filter: grayscale(100%);
                -ms-filter: grayscale(100%);
                -o-filter: grayscale(100%);
                
                width: 200px;
                
                transition: all 2s;
                -webkit-transition: all 2s;
                
                display: block;
                margin: 100px auto;
                
            }
            #image:hover
            {
                -webkit-filter: grayscale(0);
                -moz-filter: grayscale(0);
                -ms-filter: grayscale(0);
                -o-filter: grayscale(0);
                filter: none;
                
                width: 500px;
                cursor: pointer;
            }
        </style>
        
    </head>
    <body>
        <img src="https://www.google.com/images/srpr/logo4w.png" id="image" />
    </body>
</html>

- ولكن هل لاحظت التوافقية مع المتصفحات ؟ الطبقات لا تعمل على كل من IE8 و opera12 وبالتالي تأثير تدرج الطبقات وتدرج الطبقات أيضاً لا يعمل مطلقاً على firefox عند مرور الماوس ولكن يعمل تدرج الحجم فقط , Chrome 23 تعمل عليه خاصيتي تدرج الطبقات والحجم معاً .

لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق

لا إله إلا أنت سبحانك إني كنت من الظالمين

#1028 يونيو 2013 في 04:35

ممكن شرح وافي او رابط يشرح الخاصية transition؟

تبدو مفيدة جداً بتحريك العناصر؟

#1129 يونيو 2013 في 19:23

السلام عليكم

تفضل هذا رابط الخاصية على موقع w3schools :

http://www.w3schools.com/css3/css3_transitions.asp

وأيضاً يمكنك استخدام css animation من خلال keyframes والربط التالي به أمثلة على استخدامها :

http://www.w3schools.com/css3/css3_animations.asp

لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق

لا إله إلا أنت سبحانك إني كنت من الظالمين

#126 يوليو 2013 في 05:57

مششششششششكور جداً

مواضيع مشابهة

كيف استطيع عمل تكبير لعنصر الصورة؟2 رد · 26 يناير 2009
تكبير الصورة3 رد · 7 يناير 2011
هل من الممكن تكبير حجم البكسل في الصورة1 رد · 26 يناير 2009
تكبير الصورة6 رد · 11 يناير 2005
تصفية صورة بعد التكبير5 رد · 27 فبراير 2006
كود تكبير الصورة عند المرور عليها بالماوس مع تقدمها لاملم عن الصفحة نفسها4 رد · 4 سبتمبر 2009