JQuery ব্যবহার করে রোলওভারে চিত্রের উত্সটি পরিবর্তন করুন

Question

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

মূল চিত্র: Image.gif

রোলওভার চিত্র: Imageover.gif

আমি যথাক্রমে onmouseover এবং onmouseout ইভেন্টে চিত্র উত্সের "ওভার" অংশটি সন্নিবেশ এবং অপসারণ করতে চাই ।

কীভাবে আমি jQuery ব্যবহার করে এটি করতে পারি?

Comments

আমি প্রাথমিকভাবে জাভাস্ক্রিপ্ট (বা jQuery) এর সাথে চিত্র পরিবর্তন করুন , উদাহরণস্বরূপ একটি ছোট্ট কীভাবে লিখেছি । JQuery ব্যবহার না করে একটি উদাহরণও রয়েছে।

— গোথী

মাউসওভার dotnetspeaks.com/DisplayArticle.aspx?ID=89

— সুমিত

আমি যা খুঁজছি প্রশ্ন পোস্ট করার জন্য ধন্যবাদ!

— স্যামুয়েল মেডডোস

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

— ইমান

Answer 1

প্রস্তুত প্রস্তুত করতে:

$(function() {
    $("img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("over.gif", ".gif");
            $(this).attr("src", src);
        });
});

যারা ইউআরএল চিত্র উত্স ব্যবহার করে তাদের জন্য:

$(function() {
        $("img")
            .mouseover(function() {
               var src = $(this).attr("src");
               var regex = /_normal.svg/gi;
               src = this.src.replace(regex,'_rollover.svg');
               $(this).attr("src", src);

            })
            .mouseout(function() {
               var src = $(this).attr("src");
               var regex = /_rollover.svg/gi;
               src = this.src.replace(regex,'_normal.svg');
               $(this).attr("src", src);

            });
    });

Comments

Src একটি এর সাথে একটি পরম url হলে এটি কাজ করে না। এটিতে (www.example.com এর মতো)

— কায়রান অ্যান্ড্রুজ

আপনি www.over.com এর মতো কোনও ডোমেন ব্যবহার করেন বা overইউআরআই-তে অন্য কোথাও থাকলে এটিও কাজ করে না ।

— বেনিয়ামিন মানস

আমি কি .replice ("over.gif", ".gif") এর সাথে চূড়ান্ত .রেপস সম্পাদনা করার পরামর্শ দিতে পারি;

— নাথান কোপ

এই পোস্ট করার জন্য ধন্যবাদ। আমি আশা করি আপনি এটি মনে করবেন না যে আমি এটি আমার ব্লগে রেখেছি। আমার ব্লগটি একটি "নোটবুক" এর মতো এবং যখন আমি কোনও কিছু ভুলে যাই তবে এটি আমার "যেতে-যেতে" "

— wenbert

"। ম্যাচ (/ ^\^\^\.৪++)" পদ্ধতি এবং রেইগেক্স সহ এটি ব্যবহার করা প্রয়োজন নয়। ".Replace ("। GIF "," over.gif ") কাজ করার জন্য এটি জন্য যথেষ্ট।

— Navigatron

Answer 2

আমি জানি আপনি jQuery ব্যবহার সম্পর্কে জিজ্ঞাসা করছেন, তবে আপনি জাভাস্ক্রিপ্ট সিএসএস ব্যবহার বন্ধ করে দেওয়া ব্রাউজারগুলিতে একই প্রভাব অর্জন করতে পারেন:

#element {
    width: 100px; /* width of image */
    height: 200px; /* height of image */
    background-image: url(/path/to/image.jpg);
}

#element:hover {
    background-image: url(/path/to/other_image.jpg);
}

এখানে একটি দীর্ঘ বিবরণ আছে

আরও ভাল, তবে, স্প্রাইট ব্যবহার করা: সিম্পল-সিএসএস-ইমেজ-রোলওভার

Comments

হ্যাঁ, তবে চিত্রের উপাদানগুলিতে এটি করা কিছুটা শক্ত :) এটির পাশাপাশি, সিএসএস বলতে উপস্থাপনা থেকে সামগ্রী আলাদা করা বোঝায়। আপনি যদি এটি করেন তবে আপনি things জিনিসগুলিতে যোগদান করুন;) আপনার কোনও বড় সাইটের জন্য এটি থাকতে পারে না, তাই না?

— আয়নু স্টাইকু

আমি সিএসএস নিয়ে আপনার সাথে একমত, তবে মনে হয় প্রশ্ন লেখক এমন একটি জেনেরিক সমাধান চেয়েছিলেন যা একসাথে একাধিক চিত্রের জন্য প্রযোজ্য।

— জারোদ ডিকসন

আপনি কিছু প্রভাব না নিলে এই সমাধানটি সবচেয়ে পছন্দনীয় বিকল্প। আমি ঠিক একই জিনিসটি ভাবছিলাম +1

— অ্যাঞ্জেল.কিং .47

এটি সেরা সমাধান। নতুন চিত্রটির অপেক্ষায় এড়াতে (নেটওয়ার্কের অনুরোধ) একটি একক চিত্র.জপিজি ব্যবহার করুন এবং ভালটি দেখানোর / আড়াল করতে ব্যাকগ্রাউন্ড-পজিশনের সাথে খেলুন।

— খেরাউদ

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

— ড্যাক্রসবি

Answer 3

আপনার যদি একাধিক চিত্র থাকে এবং আপনার এমন কিছু জেনেরিক প্রয়োজন যা নামকরণের কনভেনশনের উপর নির্ভর করে না।

এইচটিএমএল

<img data-other-src="big-zebra.jpg" src="small-cat.jpg">
<img data-other-src="huge-elephant.jpg" src="white-mouse.jpg">
<img data-other-src="friendly-bear.jpg" src="penguin.jpg">

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

$('img').bind('mouseenter mouseleave', function() {
    $(this).attr({
        src: $(this).attr('data-other-src') 
        , 'data-other-src': $(this).attr('src') 
    })
});

Comments

এটা আমার জন্য এক। জাভাস্ক্রিপ্টটিকে কার্যকর করার জন্য কোনও ফাংশনের ভিতরে রেখে মনে রাখবেন যখন DOM প্রস্তুত হলে "function (ফাংশন () {});"

— Mischa

আসলে পৃষ্ঠাটি এখনও লোড হওয়ার সময় এটি ট্রিগার করে এবং যখন আপনার মাউস কার্সারটি নির্বাচকটির উপরে আসলে এটি ইউআরএল প্রতিস্থাপন করে তাই প্রভাবটি উল্টে যায়

— মাইক

Answer 4

    /* Teaser image swap function */
    $('img.swap').hover(function () {
        this.src = '/images/signup_big_hover.png';
    }, function () {
        this.src = '/images/signup_big.png';
    });

Comments

মনে রাখবেন যে এই পথে যাওয়ার অর্থ এই হবে যে ব্রাউজারটি ছবিটি নেওয়ার সময় ব্যবহারকারী প্রথম হোভারটিতে একটি বিরতি দেখতে পাবে।

— টাইসন

@ টাইসন হেটে দেরিতে ট্রেনটিতে যেতে চাইছেন, তবে আপনি জাভাস্ক্রিপ্ট বা সিএসএসের

— সিবিআর

ক্রোম 37 তেও কাজ করে না। $ (এটি) .attr ("src", src) ভাল কাজ করে।

— লে ড্রয়েড

Answer 5

একটি জেনেরিক সমাধান যা আপনাকে "এই চিত্র" এবং "সেই চিত্র" সীমাবদ্ধ করে না কেবলমাত্র HTML কোডটিতে 'অনমাউসওভার' এবং 'অনমাউসআউট' ট্যাগ যুক্ত করতে পারে।

এইচটিএমএল

<img src="img1.jpg" onmouseover="swap('img2.jpg')" onmouseout="swap('img1.jpg')" />

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

function swap(newImg){
  this.src = newImg;
}

---

আপনার সেটআপের উপর নির্ভর করে, সম্ভবত এর মতো আরও কিছু ভাল কাজ করতে পারে (এবং কম HTML পরিবর্তন প্রয়োজন)।

এইচটিএমএল

<img src="img1.jpg" id="ref1" />
<img src="img3.jpg" id="ref2" />
<img src="img5.jpg" id="ref3" />

জাভাস্ক্রিপ্ট / jQuery

// Declare Arrays
  imgList = new Array();
  imgList["ref1"] = new Array();
  imgList["ref2"] = new Array();
  imgList["ref3"] = new Array();

//Set values for each mouse state
  imgList["ref1"]["out"] = "img1.jpg";
  imgList["ref1"]["over"] = "img2.jpg";
  imgList["ref2"]["out"] = "img3.jpg";
  imgList["ref2"]["over"] = "img4.jpg";
  imgList["ref3"]["out"] = "img5.jpg";
  imgList["ref3"]["over"] = "img6.jpg";

//Add the swapping functions
  $("img").mouseover(function(){
    $(this).attr("src", imgList[ $(this).attr("id") ]["over"]);
  }

  $("img").mouseout(function(){
    $(this).attr("src", imgList[ $(this).attr("id") ]["out"]);
  }

Answer 6

$('img.over').each(function(){
    var t=$(this);
    var src1= t.attr('src'); // initial src
    var newSrc = src1.substring(0, src1.lastIndexOf('.'));; // let's get file name without extension
    t.hover(function(){
        $(this).attr('src', newSrc+ '-over.' + /[^.]+$/.exec(src1)); //last part is for extension   
    }, function(){
        $(this).attr('src', newSrc + '.' + /[^.]+$/.exec(src1)); //removing '-over' from the name
    });
});

আপনি প্রথম লাইন থেকে চিত্রের শ্রেণি পরিবর্তন করতে চাইতে পারেন। আপনার যদি আরও চিত্রের শ্রেণি প্রয়োজন হয় (বা ভিন্ন পথ) আপনি ব্যবহার করতে পারেন

$('img.over, #container img, img.anotherOver').each(function(){

ইত্যাদি।

এটি কাজ করা উচিত, আমি এটি পরীক্ষা করিনি :)

Comments

+1 দোহ, হোভার ইভেন্ট সাহায্যকারীর কথা ভুলে গেছেন! এবং চিত্রগুলিতে ক্লাস যুক্ত করার বিষয়ে চমৎকার পরামর্শ - সত্যই একটি সেরা অনুশীলন :)

— জারোদ ডিকসন

এটি অনেক বেশি ভাল সমাধান কারণ এটি পুরানো চিত্রের উত্সকে ক্যাশে করে।

— trante

নেতিবাচক অংশটি হ'ল, যদি চিত্রটি পৃষ্ঠার নীচে থাকে এবং 10-20 চিত্র থাকে তবে বিন্যাসটি অদ্ভুত হয়ে যায়।

— ট্রান্ট করুন

Answer 7

আমি আশা করি একটি ওয়ান ওয়ানারারের মতো:

$("img.screenshot").attr("src", $(this).replace("foo", "bar"));

Answer 8

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

.buttonClass {
    width: 25px;
    height: 25px;
    background: url(Sprite.gif) -40px -500px;
}
.buttonClass:hover {
    width: 25px;
    height: 25px;
    background: url(Sprite.gif) -40px -525px;
}

0px 0pxস্থানাঙ্ক আপনার sprites থেকে বাম উপরের কোণে থাকবে।

তবে আপনি যদি অ্যাজাক্স বা এর মতো কিছু নিয়ে কোনও ফটো অ্যালবাম বিকাশ করছেন তবে জাভাস্ক্রিপ্ট (বা কোনও ফ্রেমওয়ার্ক) সেরা।

আনন্দ কর!

Answer 9

$('img').mouseover(function(){
  var newSrc = $(this).attr("src").replace("image.gif", "imageover.gif");
  $(this).attr("src", newSrc); 
});
$('img').mouseout(function(){
  var newSrc = $(this).attr("src").replace("imageover.gif", "image.gif");
  $(this).attr("src", newSrc); 
});

Answer 10

কিছুক্ষণ আগে সমাধানের সন্ধান করার সময়, আমি নীচের মতো একটি অনুরূপ স্ক্রিপ্ট পেয়েছি, যা কিছু টুইট করার পরে আমি আমার জন্য কাজ করেছি।

এটি দুটি চিত্র পরিচালনা করে, যা প্রায়শই "বন্ধ" হয়ে ডিফল্ট হয়, যেখানে মাউসটি চিত্রের বাইরে থাকে (চিত্র-উদাহরণ_off.jpg), এবং মাঝেমধ্যে "চালু" হয়, যেখানে মাউস আড়াল হওয়ার জন্য প্রয়োজনীয় বিকল্প চিত্র ( চিত্র-উদাহরণ_on.jpg) প্রদর্শিত হয়।

<script type="text/javascript">        
    $(document).ready(function() {        
        $("img", this).hover(swapImageIn, swapImageOut);

        function swapImageIn(e) {
            this.src = this.src.replace("_off", "_on");
        }
        function swapImageOut (e) {
            this.src = this.src.replace("_on", "_off");
        }
    });
</script>

Comments

আমি বুঝতে পারি যে উপরের ফাংশনটি ডমের মধ্যে থাকা সমস্ত চিত্রের জন্য বর্তমানে কোডড হিসাবে কার্যকর করা হবে। আরও প্রসঙ্গ সরবরাহ করা এটি নির্দিষ্ট ইম্জ উপাদানগুলিতে প্রভাবকে ফোকাস করে তুলবে।

— ক্রিস্টোফার রাউট

Answer 11

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery</title>
<script src="jquery.js" type="text/javascript"> </script>
<style type="text/css">
    #box{
        width: 68px;
        height: 27px;
        background: url(images/home1.gif);
        cursor: pointer;
    }
</style>

<script type="text/javascript">

$(function(){

    $('#box').hover( function(){
        $('#box').css('background', 'url(images/home2.gif)');

    });
    $('#box').mouseout( function(){
        $('#box').css('background', 'url(images/home1.gif)');

    });

});
</script>
</head>

<body>
<div id="box" onclick="location.href='index.php';"></div>
</body>
</html>

Answer 12

আমি নিম্নলিখিত কোডের মতো কিছু তৈরি করেছি :)

এটি কেবলমাত্র তখনই কাজ করে, যখন আপনার সাথে_হোভার নামে একটি দ্বিতীয় ফাইল থাকে, উদাহরণস্বরূপ, facebook.pngএবংfacebook_hover.png

$('#social').find('a').hover(function() {
    var target = $(this).find('img').attr('src');
    //console.log(target);
    var newTarg = target.replace('.png', '_hover.png');
    $(this).find('img').attr("src", newTarg);
}, function() {
    var target = $(this).find('img').attr('src');
    var newTarg = target.replace('_hover.png', '.png');
    $(this).find('img').attr("src", newTarg);
});

Answer 13

<img src="img1.jpg" data-swap="img2.jpg"/>



img = {

 init: function() {
  $('img').on('mouseover', img.swap);
  $('img').on('mouseover', img.swap);
 }, 

 swap: function() {
  var tmp = $(this).data('swap');
  $(this).attr('data-swap', $(this).attr('src'));
  $(this).attr('str', tmp);
 }
}

img.init();

Answer 14

রিচার্ড অায়োটের কোড থেকে অভিযোজিত - একটি উল / লি তালিকার একটি ইমগ টার্গেট করতে (এখানে র্যাপার ডিভ ক্লাসের মাধ্যমে পাওয়া যায়), এরকম কিছু:

$('div.navlist li').bind('mouseenter mouseleave', function() {    
    $(this).find('img').attr({ src: $(this).find('img').attr('data-alt-src'), 
    'data-alt-src':$(this).find('img').attr('src') }
);