JQuery ব্যবহার করে চিত্রের উত্স পরিবর্তন করা

761

আমার ডিওএম এর মতো দেখাচ্ছে:

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

যখন কেউ কোনও ছবিতে ক্লিক করে, আমি চাই চিত্রটি এসআরসি <img src="imgx_off.gif">যেখানে পরিবর্তন করা উচিত যেখানে xচিত্রটি 1 বা 2 চিত্রের প্রতিনিধিত্ব করে।

এটি কি সম্ভব বা আমাকে চিত্রগুলি পরিবর্তন করতে সিএসএস ব্যবহার করতে হবে?

javascript jquery image

— user67033
সূত্র

আপনি যদি jQuery ব্যবহার করে কিছু চান তবে আপনি jQuery সাইকেল প্লাগইন, ডেমো স্ক্রোলরাইট (নীচের ডানদিক উদাহরণ) সন্ধান করতে চাইতে পারেন

— টমহস্তজারজ্যান্তো

43

jQuery ("# my_image")। attr ("src", "first.jpg")

— মণীশ নটিয়াল

9

আপনার জন্স্টজহনের উত্তরটি সত্যই গ্রহণ করা উচিত :) প্রশ্ন এবং উত্তর উভয়টিতেই আপোভোটের সংখ্যাটি ইঙ্গিত করে যে প্রচুর লোক এতে প্রবেশ করেছে। এটি গ্রহণযোগ্য উত্তর পেতে প্রশ্নের উন্নতি করবে।

— এক্সসেল্ড

4

তারিখ পর্যন্ত অর্থাৎ 19th July, 2016 15:39 PM, প্রশ্ন Upvotes গণনা 369 আর @jonstjohn উত্তর গণনা Upvotes 931 । তবে, এ জাতীয় দুর্ভাগ্য, @OP লগ ইন করার পরে নেই Feb 17 '09 at 2:57। :(এবং, @jonstjohn উত্তর থাকা অচিহ্নিত ।

— নানা পার্টিকার

@ একসেসড, একমাত্র সমস্যা হ'ল জন্সস্টজনের উত্তর প্রশ্নের উত্তর দেয় না। এটি একটি ছোটখাটো বিষয় তবে একটি মূল্যবান মূল্য। ইনকোর উত্তরটি একবার দেখুন কারণ এখানে একমাত্র এটিই প্রকৃতপক্ষে সঠিকভাবে প্রশ্নের উত্তর দেয়।

— ডেভিড নিউকম্ব

1686

আপনি jQuery এর attr () ফাংশন ব্যবহার করতে পারেন । উদাহরণস্বরূপ, যদি আপনার imgট্যাগটিতে id'মাই_মেজ' এর একটি বৈশিষ্ট্য থাকে, আপনি এটি করতে পারেন:

<img id="my_image" src="first.jpg"/>

তারপরে আপনি srcএই জাতীয় jQuery এর সাথে আপনার চিত্রটির পরিবর্তন করতে পারেন :

$("#my_image").attr("src","second.jpg");

এটি একটি clickইভেন্টের সাথে সংযুক্ত করতে , আপনি লিখতে পারেন:

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

চিত্রটি ঘোরানোর জন্য, আপনি এটি করতে পারেন:

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

— jonstjohn
সূত্র

79

চিত্রের উত্স পরিবর্তন করার সময় লোকেদের মধ্যে একটি সাধারণ ভুল চিত্রের আকারের পরিপক্কতা ইত্যাদির মতো পরবর্তী ক্রিয়াগুলি করতে ইমেজ লোডের জন্য অপেক্ষা করে না image আপনাকে চিত্রের বোঝার পরে .load()জিনিসগুলি করতে jQuery পদ্ধতি ব্যবহার করতে হবে।

$('yourimageselector').attr('src', 'newsrc').load(function(){
    this.width;   // Note: $(this).width() will not work for in memory images

});

সম্পাদনার কারণ: https://stackoverflow.com/a/670433/561545

— মোহসেন
সূত্র

হ্যাঁ. এটি অবশেষে কৌশলটি করেছিল। .destroy () প্রায় যথেষ্ট দূরে যায় না। সমস্ত এইচটিএমএলকে এনুক করা এবং ডিআইএসের চেয়ে পুনরায় প্রকৃতপক্ষে কাজ করে যখন বিভিন্ন আকারের এবং এর মতো চিত্রগুলি অদলবদল করে।

— ম্যাট জে।

নোট করুন যে লোডটি নির্ভরযোগ্যভাবে আগুনে পোড়াবে না, বিশেষত যদি চিত্রটি ক্যাশে থাকে। JQuery ডকুমেন্টেশন দেখুন।

— টোভলাইট

19

আরও তথ্যের জন্য. আমি উদাহরণস্বরূপ সিনট্যাক্স ব্যবহার করে বিজ্ঞাপন চিত্রের জন্য jquery এ অ্যাটর্ পদ্ধতির সাথে এসসিআর অ্যাট্রিবিউট সেট করার চেষ্টা করি:$("#myid").attr('src', '/images/sample.gif');

এই সমাধানটি কার্যকর এবং এটি কাজ করে তবে যদি পথ পরিবর্তন হয় তবে চিত্রেরও পথ পরিবর্তন হয় এবং কাজ করে না।

আমি এই সমস্যার সমাধানের জন্য অনুসন্ধান করেছি কিন্তু কিছুই পাইনি।

সমাধানটির শুরুতে '\' লাগানো হচ্ছে: $("#myid").attr('src', '\images/sample.gif');

এই কৌশলটি আমার পক্ষে খুব কার্যকর এবং আমি আশা করি এটি অন্যদের জন্যও কার্যকর।

— wphonestudio
সূত্র

18

যদি এখানে কেবল jQuery বা অন্যান্য সংস্থান নিধন কাঠামো না থাকে - প্রতিটি ব্যবহারকারী কেবলমাত্র একটি সাধারণ কৌতুকের জন্য প্রতিবার ডাউনলোড করতে অনেক কেবি - তবে স্থানীয় জাভাস্ক্রিপ্ট (!):

<img src="img1_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img1_off.jpg':'img1_on.jpg';">
<img src="img2_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img2_off.jpg':'img2_on.jpg';">

এটি সাধারণ এবং আরও মার্জিত লেখা যেতে পারে:

<html>
<head>
<script>
function switchImg(img){
    img.src = img.src.match(/_on/) ? 
        img.src.replace(/_on/, "_off") : 
        img.src.replace(/_off/, "_on");
}
</script>
</head>
<body>
    <img src="img1_on.jpg" onclick="switchImg(this)">
    <img src="img2_on.jpg" onclick="switchImg(this)">
</body>
</html>

— ছ
সূত্র

এটি সর্বদা আমাকে অবাক করে দেয় যে কত লোক কোনও প্রশ্ন পড়তে পারে না এবং অনুরোধ করা উত্তরটি দিতে পারে না। এটা আমার কাছে (এবং আপনি) কাছে সুস্পষ্ট বলে মনে হয়েছিল যে প্রশ্নটি একটি জেনেরিক সমাধানের সন্ধান করছে যা সে কারণেই ওপি ২ টি উদাহরণ দিয়েছে। এবং তবুও প্রত্যেকে মনে হয়েছিল কেবল এটি সম্পূর্ণরূপে মিস করবে না তবে এমন একটি উত্তর দেবে যা এমনকি প্রশ্নের উত্তর দেয়নি। :(

— ডেভিড নিউকম্ব

17

আমি আপনাকে চিত্রটি কীভাবে পরিবর্তন করব তা দেখাব src, যাতে আপনি যখন কোনও চিত্র ক্লিক করেন এটি আপনার এইচটিএমএল-এ থাকা সমস্ত চিত্রের মাধ্যমে ঘুরবে (আপনার d1আইডি এবং c1ক্লাসে বিশেষত) ... আপনার এইচটিএমএলে আপনার 2 বা ততোধিক চিত্র রয়েছে কিনা ।

ডকুমেন্ট প্রস্তুত হওয়ার পরে পৃষ্ঠাটি কীভাবে পরিষ্কার করবেন তাও আমি আপনাকে দেখাব, যাতে প্রাথমিকভাবে কেবলমাত্র একটি চিত্র প্রদর্শিত হয়।

সম্পূর্ণ কোড

$(function() {

    var $images = $("#d1 > .c1 > a").clone();  

    var $length = $images.length;
    var $imgShow = 0;

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );  

    $("#d1 > .c1 > a").click(function(event) { 

        $(this).children().attr("src", 
                        $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();

    });
});

ভাঙ্গন

ছবিযুক্ত লিঙ্কগুলির একটি অনুলিপি তৈরি করুন (দ্রষ্টব্য: আপনি যুক্ত কার্যকারিতার জন্য লিঙ্কগুলির href বৈশিষ্ট্যটি ব্যবহার করতে পারেন ... উদাহরণস্বরূপ প্রতিটি চিত্রের নীচে ওয়ার্কিং লিঙ্কটি প্রদর্শন করুন ):
```
    var $images = $("#d1 > .c1 > a").clone();  ;
```
এইচটিএমএলে কতগুলি চিত্র ছিল তা পরীক্ষা করে দেখুন এবং কোন চিত্রটি প্রদর্শিত হচ্ছে তা ট্র্যাক করার জন্য একটি পরিবর্তনশীল তৈরি করুন:
```
var $length = $images.length;
var $imgShow = 0;
```
ডকুমেন্টটির এইচটিএমএল সংশোধন করুন যাতে কেবল প্রথম চিত্র প্রদর্শিত হয়। অন্যান্য সমস্ত চিত্র মুছুন।
```
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") ); 
```
চিত্রের লিঙ্কটি ক্লিক করা হলে হ্যান্ডেল করতে কোনও ফাংশন বাঁধুন।
```
    $("#d1 > .c1 > a").click(function(event) { 
        $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();
    });
```
উপরের কোডের হৃদয় ++$imgShow % $lengthচিত্রগুলি সহ jQuery অবজেক্টের মাধ্যমে চক্র ব্যবহার করছে। ++$imgShow % $lengthপ্রথমে আমাদের কাউন্টারকে বাড়িয়ে তোলে, তারপরে এটি সংখ্যাকে কতগুলি চিত্রের সাথে মোড করে। এই থেকে পরিসমাপ্তি সূচক সাইক্লিং রাখা হবে 0থেকে length-1, যার মধ্যে সূচকের হয় $imagesঅবজেক্ট। এর অর্থ এই কোডটি 2, 3, 5, 10 বা 100 টি চিত্রের সাথে কাজ করবে ... প্রতিটি চিত্রের ক্রম অনুসারে সাইক্লিং করে এবং শেষ চিত্রটি পৌঁছে যাওয়ার পরে প্রথম চিত্রটিতে পুনরায় চালু করা হবে।

অতিরিক্তভাবে, .attr()চিত্রগুলির "src" বৈশিষ্ট্যটি পেতে এবং সেট করতে ব্যবহৃত হয়। $imagesঅবজেক্টের মধ্যে থেকে উপাদান বাছতে , আমি ফর্মটি ব্যবহার করে jQuery প্রসঙ্গ$images হিসাবে সেট করেছি । তারপরে আমি নির্দিষ্ট সূচকটি সম্পর্কে আগ্রহী সেটির সাথে আমি কেবলমাত্র উপাদানটি বেছে নিয়েছি।$(selector, context).eq()

3 ছবি সহ jsFizz উদাহরণ

আপনি srcএকটি অ্যারে এ গুলি সংরক্ষণ করতে পারেন ।
3 ছবি সহ jsFizz উদাহরণ

এবং চিত্রগুলির চারপাশে অ্যাঙ্কর ট্যাগ থেকে hrefs কীভাবে অন্তর্ভুক্ত করা যায় তা এখানে:
jsFizz উদাহরণ

— পিটার আজতাই
সূত্র

17

আশা করি এটি কাজ করতে পারে

<img id="dummyimage" src="http://dummyimage.com/450x255/" alt="" />
<button id="changeSize">Change Size</button>

$(document).ready(function() {
    var flag = 0;
    $("button#changeSize").click(function() {
        if (flag == 0) {
            $("#dummyimage").attr("src", "http://dummyimage.com/250x155/");
            flag = 1;
        } else if (flag == 1) {
            $("#dummyimage").attr("src", "http://dummyimage.com/450x255/");
            flag = 0;
        }
    });
});

— জিসান
সূত্র

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

— ডেরেক ব্রাউন

ধন্যবাদ ডেরেক পরবর্তী সময় থেকে এই বিষয়টি আমার মনে রাখবে

— জিশান

14

আপনার ইমেজ ট্যাগটিতে আইডি বৈশিষ্ট্যটি যুক্ত করা উচিত:

<div id="d1">
   <div class="c1">
            <a href="#"><img id="img1" src="img1_on.gif"></a>
            <a href="#"><img id="img2" src="img2_on.gif"></a>
   </div>
</div>

তাহলে আপনি চিত্রগুলির উত্স পরিবর্তন করতে এই কোডটি ব্যবহার করতে পারেন:

 $(document).ready(function () {
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });

— মিঃ বিটম্যাপ
সূত্র

9

আপনি jQuery এর মাধ্যমেও এটি করতে পারেন:

$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});

চিত্র উত্সের জন্য একাধিক রাজ্য থাকলে আপনার একটি শর্ত থাকতে পারে।

— FernandoEscher
সূত্র

5

এই বাক্য গঠন সঠিক নয়। jquery attr () ফাংশনটিতে 1 বা 2 টি প্যারাম লাগে। প্রথমটি হ'ল এইচটিএমএল বৈশিষ্ট্যের নামের সাথে একটি স্ট্রিং, দ্বিতীয়টি আপনি যে বৈশিষ্ট্যের জন্য সেট করতে চান তার মান।

— থিয়াগো সিলভা

7

রি ক্যাপচা বোতামটি কল করার চেষ্টা করার সময় আমারও একই সমস্যা ছিল। কিছু অনুসন্ধানের পরে, এখন নীচের ফাংশনটি প্রায় সমস্ত বিখ্যাত ব্রাউজারগুলিতে (ক্রোম, ফায়ারফক্স, আইই, এজ, ...) ভাল কাজ করে:

function recaptcha(theUrl) {
  $.get(theUrl, function(data, status){});
  $("#captcha-img").attr('src', "");
  setTimeout(function(){
       $("#captcha-img").attr('src', "captcha?"+new Date().getTime());
  }, 0);
 }

'ইউআরএল' নতুন ক্যাপচা চিত্রটি রেন্ডার করতে ব্যবহৃত হয় এবং আপনার ক্ষেত্রে উপেক্ষা করা যেতে পারে। সবচেয়ে গুরুত্বপূর্ণ পয়েন্টটি হল নতুন ইউআরএল তৈরি করা যা এফএফ এবং আইই চিত্রটি পুনরায় রেন্ডার করতে বাধ্য করে।

— কায়ভান তেহরানী
সূত্র

7

JQuery ব্যবহার করে চিত্রের উত্স পরিবর্তন করুন click()

উপাদান:

    <img class="letstalk btn"  src="images/chatbuble.png" />

কোড:

    $(".letstalk").click(function(){
        var newsrc;
        if($(this).attr("src")=="/images/chatbuble.png")
        {
            newsrc="/images/closechat.png";
            $(this).attr("src", newsrc);
        }
        else
        {
            newsrc="/images/chatbuble.png";
            $(this).attr("src", newsrc);
        }
    });

— অভিজিৎ পূজারি
সূত্র

7

আপনি চিত্রটি একাধিকবার আপডেট করেছেন এবং এটি ক্যাচড হয়ে যায় এবং আপডেট না হয়, শেষে একটি এলোমেলো স্ট্রিং যুক্ত করুন:

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());

— kintsukuroi
সূত্র

1

কমপক্ষে আমার জন্য, শেষে এলোমেলো স্ট্রিং যুক্ত করা খুব গুরুত্বপূর্ণ! ট্যাংকের!

— মার্সেলো

3

আমি আজ একই বিস্ময় প্রকাশ করেছি, আমি এই পথে করেছি:

//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');  
});

— Anyone_ph
সূত্র

3

এটি ভ্যানিলা (বা কেবল খাঁটি) জাভাস্ক্রিপ্টে সম্পন্ন করার একটি গ্যারান্টিযুক্ত উপায়:

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;

— রেমন্ড ওয়াচাগা
সূত্র

1

এটিকে আরও ক্ষুদ্রতর করার জন্য কেবল একটি সংযোজন:

$('#imgId').click(function(){
    $(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});

— Szél Lajos
সূত্র

-1

সিএসএস সহ চিত্রের উত্স পরিবর্তন করার কোনও উপায় নেই।

কেবলমাত্র সম্ভাব্য উপায় জাভাস্ক্রিপ্ট বা জাভাস্ক্রিপ্ট লাইব্রেরি jQuery এর মতো ব্যবহার করা ।

Logic-

চিত্রগুলি একটি ডিভের অভ্যন্তরে রয়েছে এবং সেই চিত্রটি নেই classবা নেই id।

সুতরাং যুক্তিগুলি divচিত্রগুলি যেখানে রয়েছে তার ভিতরে উপাদান নির্বাচন করবে ।

তারপরে লুপের সাথে সমস্ত চিত্রের উপাদান নির্বাচন করুন এবং জাভাস্ক্রিপ্ট / jQuery এর সাথে চিত্রের এসসিআর পরিবর্তন করুন ।

ডেমো আউটপুট সহ উদাহরণ কোড-

$(document).ready(function()
{
    $("button").click(function()
    {
      $("#d1 .c1 a").each(function()
      {
          $(this).children('img').attr('src', 'https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe');
      });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

<button>Change The Images</button>

স্নিপেট প্রসারিত করুন

— আবরার জাহিন
সূত্র