JQuery দিয়ে একটি ডিআইভি পটভূমি চিত্র স্যুইচ করা

Question

আমি যে সংস্থার জন্য কাজ করি তার জন্য আমি প্রসারিত / পতনের কল রেট টেবিল তৈরি করছি। এটি প্রসারিত করার জন্য আমার কাছে বর্তমানে নীচে একটি বোতাম সহ একটি টেবিল রয়েছে, বোতামটি "বিস্তৃত করুন" বলে। এটি ক্লিক করার সাথে সাথে "সঙ্কুচিত" এ পরিবর্তন করার জন্য আমার বোতামটি প্রয়োজন এবং এটি আবার ক্লিক করার পরে অবশ্যই "বিস্তৃত করুন" এ ফিরে আসা ছাড়া এটি কার্যকর হয়। বোতামে লেখাটি একটি পটভূমির চিত্র।

সুতরাং মূলত আমার যা দরকার তা হ'ল একটি ডিভের পটভূমির চিত্রটি ক্লিক করার সময় পরিবর্তন করা, টগলের মতো বাছাই করা ছাড়া।

Comments

একটি পটভূমি চিত্র কেন? কেন পাঠ্য নয় ?

— uınbɐɥs

আমি ভোট দিয়েছি কারণ তিনি এখন থেকে বেশ কয়েক বছর পরে উত্তরটি গ্রহণ করেননি, আশা করি তিনি @ ব্যবহারকারী 1040899 হলেও ঠিক আছেন!

— gsamaras

@ user1040899 zuk1 শেষবার ব্যবহার Aug 9 '10 at 0:42এ তাই হয়তো যে কেন, :(

— এম জুনায়েদ সালাতে

Answer 1

$('#divID').css("background-image", "url(/myimage.jpg)");  

কৌতুকটি করা উচিত, কেবলমাত্র উপাদানটির একটি ক্লিক ইভেন্টে এটি আঁকুন

$('#divID').click(function()
{
  // do my image switching logic here.
});

Comments

@ ফুকবোই এটি করে, যখন আমি কোনও ব্যবহারকারী কোনও বিকল্প নির্বাচন করে কোনও অ্যানিমেটেড এসভিজি চেকমার্ক বন্ধ করে দেওয়ার জন্য এই কোডটি ব্যবহার করি। :)

— নর্চাল জননি

ভাল উত্তর, আমি উল্লেখ করতে চাই >> ইউআরএল () STRING এর অংশ

— <<<

Answer 2

আমি ব্যক্তিগতভাবে জাভাস্ক্রিপ্ট কোডটি 2 ক্লাসের মধ্যে স্যুইচ করতে ব্যবহার করব।

আপনার ডিভি মাইনাসের জন্য আপনার প্রয়োজনীয় সমস্ত কিছু সিএসএসের রূপরেখার পটভূমির নিয়ম করুন, তারপরে যথাযথ ব্যাকগ্রাউন্ড ইমেজ (বা স্প্রাইট ব্যবহার করে ব্যাকগ্রাউন্ড পজিশন) সহ প্রতিটি বিধি হিসাবে দুটি ক্লাস যুক্ত করুন (যেমন: প্রসারিত এবং ধসে পড়া)।

বিভিন্ন চিত্র সহ সিএসএস

.div {
    /* button size etc properties */
}

.expanded {background: url(img/x.gif) no-repeat left top;}
.collapsed {background: url(img/y.gif) no-repeat left top;}

অথবা ইমেজ স্প্রাইট সহ সিএসএস

.div {
    background: url(img/sprite.gif) no-repeat left top;
    /* Other styles */
}

.expanded {background-position: left bottom;}

তারপর ...

ইমেজ সহ জাভাস্ক্রিপ্ট কোড

$(function){
    $('#button').click(function(){
        if($(this).hasClass('expanded'))
        {
            $(this).addClass('collapsed').removeClass('expanded');
        }
        else
        {
            $(this).addClass('expanded').removeClass('collapsed');
        }
    });
}

স্প্রাইট সহ জাভাস্ক্রিপ্ট

দ্রষ্টব্য: মার্জিত টগলক্লাস ইন্টারনেট এক্সপ্লোরার 6 এ কাজ করে না, তবে নীচে addClass/ removeClassপদ্ধতিটিও এই পরিস্থিতিতে ভাল কাজ করবে

সর্বাধিক মার্জিত সমাধান (দুর্ভাগ্যক্রমে ইন্টারনেট এক্সপ্লোরার 6 বন্ধুত্বপূর্ণ নয়)

$(function){
        $('#button').click(function(){
            $(this).toggleClass('expanded');
        });
    }

$(function){
        $('#button').click(function(){
            if($(this).hasClass('expanded'))
            {
                $(this).removeClass('expanded');
            }
            else
            {
                $(this).addClass('expanded');
            }
        });
    }

আমি যতদূর জানি এই পদ্ধতিটি ব্রাউজারগুলিতে কাজ করবে এবং আমি স্ক্রিপ্টে ইউআরএল পরিবর্তনের চেয়ে সিএসএস এবং ক্লাসে খেলতে অনেক বেশি স্বাচ্ছন্দ্য বোধ করব।

Comments

"দ্রষ্টব্য: মার্জিত টগলক্লাস ইন্টারনেট এক্সপ্লোরার 6 এ কাজ করে না"

— চ্যাওলি

Answer 3

JQuery সহ একটি পটভূমি চিত্র সিএসএস পরিবর্তন করার দুটি ভিন্ন উপায় রয়েছে।

1. $('selector').css('backgroundImage','url(images/example.jpg)');
2. $('selector').css({'background-image':'url(images/example.jpg)'});

পার্থক্যগুলি নোট করতে সাবধানে দেখুন Look দ্বিতীয়টিতে, আপনি প্রচলিত সিএসএস এবং একাধিক সিএসএস বৈশিষ্ট্যগুলি একসাথে স্ট্রিং করতে পারেন।

Comments

2. একটি অবৈধ ভুল। একাধিক বৈশিষ্ট্য একসঙ্গে গাঁথন ভালো সম্পন্ন করা হয়: $ ( 'নির্বাচক') CSS ({ 'পটভূমি-রঙ': 'হলুদ', 'পটভূমি চিত্র': 'URL ()'})।

— codecowboy

আমি যদি ২ চেষ্টা করে দেখি তবে আমি একটি ত্রুটি পেয়েছি - আনকচড সিনট্যাক্স এরিয়ার: অপ্রত্যাশিত টোকেন:

— geeky_monster

Answer 4

আপনি যদি পটভূমির চিত্রগুলির জন্য কোনও সিএসএস স্প্রিট ব্যবহার করেন, আপনি প্রসারিত হচ্ছেন বা ভেঙে যাচ্ছেন তার উপর নির্ভর করে আপনি পটভূমিতে অফসেটটি +/- n পিক্সেলটি গড়িয়ে ফেলতে পারেন। কোনও টগল নয়, তবে পটভূমির চিত্রগুলির URL গুলি স্যুইচ করার চেয়ে কাছে এটি।

Comments

বোনাস: যদি আপনি পৃথক চিত্র ব্যবহার করেন তবে কেবলমাত্র লোড প্রদর্শিত হবে actually দ্বিতীয় রাষ্ট্রটি লোড হওয়ার আগে চিত্রগুলি স্যুইচ করার সময় অল্প বিলম্ব হবে। একটি স্প্রিট সহ, আপনার কেবলমাত্র একটি চিত্র রয়েছে এবং এটি ইতিমধ্যে সেখানে থাকবে।

— লাসার

Answer 5

এখানে আমি এটি কীভাবে করছি:

সিএসএস

#button{
   background-image: url("initial_image.png");
}

#button.toggled{
  background-image:url("toggled_image.png");
}

জাতীয়

$('#button').click(function(){
  $('#my_content').toggle();
  $(this).toggleClass('toggled');
});

Comments

আপনি শেষ পর্যন্ত jQuery .toggleClass()বৈশিষ্ট্যটি ব্যবহার করতে পারেন ।

— পাওলো বুয়েনো

আমি পোস্ট করার দু'দিন পরে টগলক্লাস সম্পর্কে জানতে পেরেছিলাম: পি

— লুপ্যাক্স

Answer 6

এটি করার একটি উপায় হ'ল এইচটিএমএল, স্প্যান বা ডিআইভির অভ্যন্তরে উভয় চিত্রই রাখা, আপনি সিএসএস, অথবা পৃষ্ঠা লোডে জেএস সহ ডিফল্টটি আড়াল করতে পারেন। তারপরে আপনি ক্লিক এ টগল করতে পারেন। এখানে তালিকার বাম / ডাউন আইকন রাখার জন্য আমি ব্যবহার করছি এমন একটি অনুরূপ উদাহরণ:

$(document).ready(function(){
    $(".button").click(function () {
        $(this).children(".arrow").toggle();
            return false;
    });
});

<a href="#" class="button">
    <span class="arrow">
        <img src="/images/icons/left.png" alt="+" />
    </span>
    <span class="arrow" style="display: none;">
        <img src="/images/down.png" alt="-" />
    </span>
</a>

Answer 7

এটি WinXP- র সমস্ত বর্তমান ব্রাউজারগুলিতে কাজ করে। মূলত কেবল বর্তমান ব্যাকগ্র্যান্ড চিত্রটি কী তা পরীক্ষা করে দেখছি। যদি এটি চিত্র 1, চিত্র 2 দেখান, অন্যথায় চিত্র 1 দেখান।

জাসাপি স্টাফগুলি গুগল সিডিএন (ডেস্কটপে একটি বিবিধ ফাইল পরীক্ষার জন্য সহজ) থেকে কেবল jQuery লোড করে।

প্রতিস্থাপনটি ক্রস-ব্রাউজারের সামঞ্জস্যের জন্য (অপেরা এবং অর্থাত্ ইউআরএল এবং ফায়ারফক্স, ক্রোম এবং সাফারি মুদ্রার উদ্ধৃতিতে কোট যোগ করুন)।

<html>
    <head>
        <script src="http://www.google.com/jsapi"></script>
        <script>
          google.load("jquery", "1.2.6");
          google.setOnLoadCallback(function() {
            var original_image = 'url(http://stackoverflow.com/Content/img/wmd/link.png)';
            var second_image = 'url(http://stackoverflow.com/Content/img/wmd/code.png)';

            $('.mydiv').click(function() {
                if ($(this).css('background-image').replace(/"/g, '') == original_image) {
                    $(this).css('background-image', second_image);
                } else {
                    $(this).css('background-image', original_image);
                }

                return false;
            });
          });
        </script>

        <style>
            .mydiv {
                background-image: url('http://stackoverflow.com/Content/img/wmd/link.png');
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="mydiv">&nbsp;</div>
    </body>
</html>

Comments

উদাহরণস্বরূপ এটি করেছেন। এইভাবে, পুরো কোড স্নিপেট তার নিজস্ব কাজ করে।

— এনওব্রেভ

জনসাধারণের মুখোমুখি সাইটগুলির জন্য এটি গুগল থেকে লোড করা ভাল। গুগলের সিডিএন আপনার সাইটের তুলনায় খুব দ্রুত, এটি আপনার সাইটের অন্য কোনও কিছুর সাথে সমান্তরালভাবে ডাউনলোড করতে দেয় এবং আরও যে সাইটগুলি এটি ব্যবহার করে তত বেশি ব্যবহারকারীর ব্রাউজার থেকে একটি ক্যাশেড অনুলিপি ব্যবহার করা হবে।

— ডেভ ওয়ার্ড

গুগল যদি নীচে যায় এবং আমি এখনও বেঁচে থাকি; আমাকে জানতে দাও.

— গ্রিনিমালা

JQuery.com করার @Nick যান, আপনি তাদের নিজস্ব ওয়েবসাইট ব্যবহারের পাবেন<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

— meagar

@ নিক প্রশ্নটি আসলেই হওয়া উচিত, গুগল বন্ধ থাকলে আপনি কেন লোড করতে চান না । :-)

— জন পার্কার

Answer 8

খনি অ্যানিমেটেড:

$(this).animate({
    opacity: 0
}, 100, function() {
    // Callback
    $(this).css("background-image", "url(" + new_img + ")").promise().done(function(){
        // Callback of the callback :)
        $(this).animate({
            opacity: 1
        }, 600)
    });    
});

Answer 9

আমি নিয়মিত এক্সপ্রেশন ব্যবহার করে আমার কাজটি করেছি, যেহেতু আমি একটি আপেক্ষিক পথটি সংরক্ষণ করতে এবং অ্যাডক্লাস ফাংশনটি ব্যবহার করতে চাই না। আমি এটিকে কেবল বিশৃঙ্খলাবদ্ধ করে তুলতে চেয়েছিলাম, লোল।

$(".travelinfo-btn").click(
            function() {
                $("html, body").animate({scrollTop: $(this).offset().top}, 200);
                var bgImg = $(this).css('background-image')
                var bgPath = bgImg.substr(0, bgImg.lastIndexOf('/')+1)
                if(bgImg.match(/collapse/)) {
                    $(this).stop().css('background-image', bgImg.replace(/collapse/,'expand'));
                    $(this).next(".travelinfo-item").stop().slideToggle(400);
                } else {
                    $(this).stop().css('background-image', bgImg.replace(/expand/,'collapse'));
                    $(this).next(".travelinfo-item").stop().slideToggle(400);
                }
            }
        );

Answer 10

পুরানো পোস্ট, তবে এটি আপনাকে সিএসএস সম্পত্তি (ব্যাকগ্রাউন্ড, পুনরাবৃত্তি, বাম শীর্ষে) এর জন্য শর্টহ্যান্ড ব্যবহার করে একটি চিত্র স্প্রিট ব্যবহার করতে এবং পুনরাবৃত্তির পাশাপাশি অবস্থান নির্ধারণ করার অনুমতি দেবে।

$.each($('.smallPreview'), function(i){
  var $this = $(this);

  $this.mouseenter(function(){
    $this.css('background', 'url(Assets/imgs/imgBckg-Small_Over.png) no-repeat 0 0');
  });

  $this.mouseleave(function(){
    $this.css('background', 'url(Assets/imgs/imgBckg-Small.png) no-repeat 0 0');
  });

});

Answer 11

আমি একটি ফোরামে টোগল ব্যাকগ্রাউন্ড ইমগের সমাধান পেয়েছি ।

Comments

সেবাস্তিয়ানের স্ট্যাক ওভারফ্লোতে আপনাকে স্বাগতম। এই প্রশ্নটি এক বছর আগে জিজ্ঞাসা করা হয়েছিল এবং ইতিমধ্যে বেশ কয়েকটি গ্রহণযোগ্য উত্তর রয়েছে।

— rjh

Answer 12

সিএসএস স্প্রাইটস সবচেয়ে ভাল কাজ করে। আমি ক্লাস স্যুইচ করার চেষ্টা করেছি এবং jQuery দিয়ে 'ব্যাকগ্রাউন্ড-ইমেজ' সম্পত্তি হেরফের করার চেষ্টা করেছি, কেউই কাজ করেনি। আমি মনে করি কারণ ব্রাউজারগুলি (কমপক্ষে সর্বশেষতম স্থিতিশীল ক্রোম) ইতিমধ্যে লোড হওয়া কোনও চিত্র "পুনরায় লোড" করতে পারে না।

বোনাস: সিএসএস স্প্রাইটগুলি ডাউনলোড করার জন্য দ্রুত এবং প্রদর্শন করার জন্য দ্রুত। কম HTTP অনুরোধগুলির অর্থ দ্রুত পৃষ্ঠা লোড। এইচটিটিপি সংখ্যা হ্রাস করা সামনের সমাপ্তির কার্যকারিতা উন্নত করার সেরা উপায়, তাই আমি এই পথটি সর্বদা চলার পরামর্শ দিই।

Answer 13

এটি মোটামুটি সহজ প্রতিক্রিয়া আইটেমের তালিকা সহ সাইটের পটভূমি পরিবর্তন করে

function randomToN(maxVal) {
    var randVal = Math.random() * maxVal;
    return typeof 0 == 'undefined' ? Math.round(randVal) : randVal.toFixed(0);
};
var list = [ "IMG0.EXT", "IMG2.EXT","IMG3.EXT" ], // Images
    ram = list[parseFloat(randomToN(list.length))], // Random 1 to n
    img = ram == undefined || ram == null ? list[0] : ram; // Detect null
$("div#ID").css("backgroundImage", "url(" + img + ")"); // push de background

Comments

সরল? এটি অনেক সহজ হতে পারে। কেন এলোমেলো?

— uınbɐɥs

কারণ ব্যবহারকারী কী পটভূমি পরিবর্তন করে এবং কী পরিবর্তন করে :) তা দেখতে সহজ is আমার ইংরাজির জন্য দুঃখিত

Answer 14

ব্রাউজারগুলিকে চিত্রটি ক্যাশে করা থেকে বিরত রাখতে আমি সর্বদা একটি টাইমস্ট্যাম্প ব্যবহার করি। উদাহরণস্বরূপ, যদি ব্যবহারকারী তাদের অবতারটি ঘোরান, তবে এটি প্রায়শই ক্যাশে হয়ে যায় এবং কোনও পরিবর্তন হয় না বলে মনে হয়।

var d = new Date();
var t = d.getTime();

$('#avatar').css("background-image", "url(" + iPath + "?" + t + ")");