إظهار مربع معلومات لكل صورة

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

في الحقيقة أنا أعتمدت على أن الكود السابق يعمل بشكل ممتاز, وما قمت به فقط تعديل عليه...

$(function() {

    $('img').each(function(){

       $(this).hover(function(e){

           var html = '<div id="info">';
           html += '<h4>information </h4>';
           html += '<p>info of img</p>';
           html += '</div>';

           $('body').append(html).children('#info').hide().fadeIn(400);
           $('#info').css('top', e.pageY + -20).css('left', e.pageX + 40);

       }, function(){

           $('#info').remove();


       });

    });

    $('img').mousemove(function(e) {
         $('#info').css('top', e.pageY + -20).css('left', e.pageX + 40);
    });

});

أرجوا أن تكون الفكرة, وهي أستخدام دالة each في الـ jQuery و لمزيد من المعلومات

توضيح: لربما توجد هناك أخطاء في الكود أرجو أن يتم تعديلها.

------------------------

هذه نسخة من الكود مع بعض التعديلات مني, ولربما لا تلبي المطلوب لكن لا مانع من وضع الكود...

$(function() {

    $('img').each(function(){

       $(this).hover(function(e){

           var html = '<div id="info">';
           html += '<h4>information </h4>';
           html += '<p>info of img</p>';
           html += '</div>';

           $('body').append(html).children('#info').hide().fadeIn(400);
           $('#info').css('top', e.pageY + -20).css('left', e.pageX + 40);

       }, function(e){

           $('#info').remove();
           $('#info').css('top', e.pageY + -20).css('left', e.pageX + 40);
       });

    });


});

Good luck

حياك الله

يبدو إني ماشرحت المطلوب بشكل صحيح

أنا وضعت الكود السابق لينفذ على كل صورة ، لكن أنا أقصد المعلومات اللي راح تظهر في كل صورة تختلف

           var html = '<div id="info">';
html += '<h4>information </h4>';
html += '<p>info of img</p>';
html += '</div>';

هذا كود المعلومات اللي راح تظهر عالصورة

أبغى أغيرها لكل صورة

-------

توضيح أكثر

أنا في صفحتي ، عندي 10 صور ، كل صورة أبغى أظهر لها معلومات (في المستطيل بالجي كويري) تختلف عن الباقية .

يارب فهمت المطلوب :/

أنتظر ردك و شكرا جزيلا

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

أهلا مرة آخرى..

ما نحتاج فعله في هذه الحالة هو أضافة Attribute للصور وطبعاً أقصد الـ title مثال:

<img title="Your info here"/>

وبعدها ما سوف نكتبة هو أخفاء هذا الـ Attribute وحفظها في متغير وعرضها مع المعلومات كالتالي:-

$(function() {

        $('img').hover(function(e) {

                var info = $(this).attr("title");

                var html = '<div id="info">';
                html +=    '<h4>information </h4>';
                html +=    '<p>'+ info +'</p>';
                html +=         '</div>';


                $('body').append(html).children('#info').hide().fadeIn(400);
                $('#info').css('top', e.pageY + -20).css('left', e.pageX + 40);

        }, function() {
                $('#info').remove();
        });

        $('img').mousemove(function(e) {
                $('#info').css('top', e.pageY + -20).css('left', e.pageX + 40);
        });
});

و أتوقع هذا هو الحل. و لمزيد من المعلومات عن الـ attr في الـ jQuery على هذا الرابط

Good luck

الله يسعدك ويوفقك ، ضبط الحمد لله :)

مشكور ماتقصر

طيب لو أبغى المحتوى يكون كذا سطر ،وليس سطر واحد

كيف أقدر أسويه !

نافذة التايتل ماينفع أخفيها :/ ؟

جزاك الله خير

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

حقيقة أنا في الرد السابق تحدثت عن تعريف الـ Attribute و من ثم أخفائه ولم أطبقها :D

ما سنحتاجة هو أضافة سطر بعدما نأخذ القيمة التي في الـ title و ثم نقوم بحذف هذا الـ Attribute و الكود كالتالي:-

$(function() {

        $('img').hover(function(e) {

                var info = $(this).attr("title");

                $(this).attr("title").remove();

                var html = '<div id="info">';
                html += '<h4>information </h4>';  
                html += '<p>Year:<br/>'+ info +'</p>';
                html += '</div>';


                $('body').append(html).children('#info').hide().fadeIn(400);
                $('#info').css('top', e.pageY + -20).css('left', e.pageX + 40);

        }, function() {
                $('#info').remove();
        });

        $('img').mousemove(function(e) {
                $('#info').css('top', e.pageY + -20).css('left', e.pageX + 40);
        });
});

و أيضاً لوضع المحتوى على أكثر من سطر أنا وضعت </br>.

Good luck

أسعدك الله ، اختفت النافذة المطلوبة وبقيت نافذة خاصية التايتل ><

جزاك الله خير ، أنتظرك

استفسار أخر ، لو أحد الصور ما أبغى الكود السابق يُطبق عليها ، يعني ما أبغى مربع المعلومات يظهر عند تمرير الماوس عليها

وش أضيف للكود !

الله يجعلها بميزان حسناتك

حنين ، كتب:

أسعدك الله ، اختفت النافذة المطلوبة وبقيت نافذة خاصية التايتل ><

جزاك الله خير ، أنتظرك

غير هذا السطر

$(this).attr("title").remove();

بالتالي

$(this).removeAttr('title');

حنين ، كتب:

استفسار أخر ، لو أحد الصور ما أبغى الكود السابق يُطبق عليها ، يعني ما أبغى مربع المعلومات يظهر عند تمرير الماوس عليها

وش أضيف للكود !

الله يجعلها بميزان حسناتك

ممكن تعطي قيمة معينة لل class attribute للصور، مثلا show_tooltip، ثم تتحقق من هذه القيمة

$(function() {

    	$('img').hover(function(e) {
			if ($(this).attr('class') == 'show_tooltip') {
            	var info = $(this).attr("title");

            	$(this).removeAttr('title');

            	var html = '<div id="info">';
            	html += '<h4>information </h4>';  
            	html += '<p>Year:<br/>'+ info +'</p>';
            	html += '</div>';

            	$('body').append(html).children('#info').hide().fadeIn(400);
            	$('#info').css('top', e.pageY + -20).css('left', e.pageX + 40);
        	}
    	}, function() {
        	if ($(this).attr('class') == 'show_tooltip') {
            	$('#info').remove();
        	}
    	});

    	$('img').mousemove(function(e) {
            	$('#info').css('top', e.pageY + -20).css('left', e.pageX + 40);
    	});
});

الفاضل herch الكود تمام بدون هذا السطر

$(this).removeAttr('title');

الله يسعدكم ويفرج همكم

جزاكم الله خير

عفوا الكود الأخير فيه مشكلة

لما أمرر الماوس أول مرا عالصورة تظهر المعلومات تمام (أقصد السنة ) ، لكن لما أمرر الماوس مرا ثانيه تختفي وتظهر كلمه (Year)فقط

جزاك الله خير ، أنتظركم

المشكل هو أنه يتم مسح ال title، يكفي تخزينه قبل مسحه، ثم إعادته عند الخروج من الصورة

$(function() {
    	var info = '';
    	$('img').hover(function(e) {
			if ($(this).attr('class') == 'show_tooltip') {
            	info = $(this).attr("title");

            	$(this).removeAttr('title');

            	var html = '<div id="info">';
            	html += '<h4>information </h4>';  
            	html += '<p>Year:<br/>'+ info +'</p>';
            	html += '</div>';

            	$('body').append(html).children('#info').hide().fadeIn(400);
            	$('#info').css('top', e.pageY + -20).css('left', e.pageX + 40);
        	}
    	}, function() {
        	if ($(this).attr('class') == 'show_tooltip') {
            	$('#info').remove();
            	$(this).attr("title", info);
            	info = '';
        	}
    	});

    	$('img').mousemove(function(e) {
            	$('#info').css('top', e.pageY + -20).css('left', e.pageX + 40);
    	});
});

أسعدكم الله جميعاً

وأجزل لكم الأجر

شكرا ()