JQuery का उपयोग करके रोलओवर पर छवि स्रोत बदलें

Question

मेरे पास कुछ चित्र और उनकी रोलओवर छवियां हैं। JQuery का उपयोग करते हुए, मैं onlousemove / onmouseout इवेंट होने पर रोलओवर छवि दिखाना / छिपाना चाहता हूं। मेरे सभी छवि नाम समान पैटर्न का अनुसरण करते हैं, जैसे:

मूल छवि: Image.gif

रोलओवर छवि: Imageover.gif

मैं क्रमशः onmouseover और onmouseout इवेंट में छवि स्रोत के "ओवर" भाग को सम्मिलित करना और निकालना चाहता हूं ।

मैं इसे jQuery का उपयोग कैसे कर सकता हूं?

Comments

मैंने एक छोटा सा लिखा है कि कैसे शुरुआती लोगों के लिए उदाहरण, जावास्क्रिप्ट के साथ छवि बदलें (या jQuery) । JQuery का उपयोग किए बिना भी एक उदाहरण है।

— गोथिक

माउसओवर dotnetspeaks.com/DisplayArticle.aspx?ID=89

— सुमित

बस मैं जो ढूंढ रहा हूं। प्रश्न पोस्ट करने के लिए धन्यवाद!

— शमूएल मेड्स

मुझे इस तरह की समस्या है ( मेरा प्रश्न )। इस प्रश्न का उत्तर बहुत अच्छा है लेकिन IE9 में हर बार जब आप बटन पर जाते हैं, तो छवि के लिए अतिरिक्त अनुरोध होता है और यह बहुत बुरा होता है। क्या किसी शरीर के पास बेहतर उत्तर है?

— इमान

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);
        });
});

उन लोगों के लिए जो url छवि स्रोतों का उपयोग करते हैं:

$(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 एक पूर्ण यूआरएल के साथ है। इसमें (जैसे www.example.com)

— कीरन एंड्रयूज

यदि आप www.over.com जैसे डोमेन का उपयोग करते हैं या overURI में कहीं और हैं तो भी यह काम नहीं करता है ।

— बेंजामिन मन्स

क्या मैं .replace ("over.gif", ".gif") के साथ अंतिम .replace को संपादित करने का सुझाव दूंगा;

— नाथन कोप

इसे पोस्ट करने के लिए धन्यवाद। मुझे आशा है कि आपको इस बात से कोई आपत्ति नहीं है कि मैंने इसे अपने ब्लॉग पर डाला है। मेरा ब्लॉग एक "नोटबुक" की तरह है और जब मैं कुछ भूल जाता हूं तो यह मेरी "जाने-वाली बात" है।

— वेनबर्ट

यह ".match (/। / ^\\.thing+/)" विधि और Regex के साथ उपयोग करना आवश्यक नहीं है। ".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

हाँ, लेकिन IMAGE तत्वों पर ऐसा करना थोड़ा कठिन है :) इसके अलावा, CSS का मतलब प्रस्तुति से सामग्री का अलग होना है। यदि आप ऐसा करते हैं, तो आप उन चीजों में शामिल हो जाते हैं;) आपके पास एक बड़ी साइट के लिए यह नहीं हो सकता है, है ना?

— इओनुic स्टैसिकु

मैं आपके साथ सीएसएस के बारे में सहमत हूं, लेकिन ऐसा लगता है कि प्रश्न लेखक एक सामान्य समाधान चाहता था जो एक साथ कई छवियों पर लागू होता है।

— जारोड डिक्सन

यह समाधान सबसे बेहतर विकल्प है, जब तक कि आप कुछ प्रभाव नहीं डाल रहे हैं। मैं ठीक यही बात सोच रहा था +1

— Angel.King.47

यह सबसे अच्छा उपाय है। नई छवि (नेटवर्क अनुरोध) के लिए प्रतीक्षा करने से बचने के लिए, किसी एक को दिखाने / छिपाने के लिए पृष्ठभूमि-स्थिति के साथ एक ही छवि का उपयोग करें।

— खरौद

@ एक प्रकार की छवि को स्थानांतरित करना एक अच्छा समाधान है, लेकिन यह सबसे अच्छा है या नहीं यह छवि के आकार पर निर्भर करता है। उदाहरण के लिए, धीमे इंटरनेट पर, एक विशाल फ़ाइल में दो 1920px चौड़ी छवियों को डाउनलोड करने में अस्वीकार्य रूप से लंबा समय लगेगा। आइकनों और छोटी छवियों के लिए हालांकि यह ठीक काम करता है।

— DACrosby

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 तैयार "$ (फ़ंक्शन () {});"

— मिशा

वास्तव में यह तब ट्रिगर होता है जब पेज अभी भी लोड हो रहा होता है, और जब आपका माउस कर्सर वास्तव में चयनकर्ता के ऊपर होता है तो वह url को बदल देता है और फिर प्रभाव उलटा होता है

— माइक

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

ध्यान रखें कि इस तरह जाने का मतलब यह होगा कि उपयोगकर्ता को पहले होवर पर एक ठहराव दिखाई देगा, जबकि ब्राउज़र को छवि मिलेगी।

— टायसन

@ टायसन को ट्रेन में देर से नफरत करने के लिए नफरत है, लेकिन आप या तो जावास्क्रिप्ट या सीएसएस के

— cbr

Chrome 37 पर काम नहीं करता है और न ही। $ (यह) .attr ("src", src) ठीक काम करता है।

— Le Droid

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 दोह, होवर इवेंट हेल्पर के बारे में भूल गया! और छवियों को एक वर्ग को जोड़ने के बारे में अच्छा सुझाव - वास्तव में एक सबसे अच्छा अभ्यास :) है

— जारोड डिक्सन

यह बेहतर समाधान है क्योंकि यह पुरानी छवि स्रोत को कैश करता है।

— त्रिशंकु

नकारात्मक हिस्सा है, अगर छवि पृष्ठ के निचले भाग में है और 10-20 छवियां हैं तो लेआउट अजीब हो जाता है।

— त्रिशंकु

Answer 7

मैं एक über एक लाइनर की उम्मीद कर रहा था:

$("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निर्देशांक अपने स्प्राइट से छोड़ दिया ऊपरी कोने होगा।

लेकिन अगर आप अजाक्स के साथ कुछ फोटो एल्बम या ऐसा कुछ विकसित कर रहे हैं, तो जावास्क्रिप्ट (या कोई भी ढांचा) सबसे अच्छा है।

मज़े करो!

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

जबकि कुछ समय पहले एक समाधान की तलाश में, मुझे नीचे एक समान स्क्रिप्ट मिली, जो कि कुछ समय के बाद मेरे लिए काम कर गई।

यह दो छवियों को संभालता है, जो लगभग हमेशा "बंद" करने के लिए डिफ़ॉल्ट होता है, जहां माउस छवि से बाहर है (छवि-example_off.jpg), और कभी-कभी "ऑन", जहां माउस को हॉवर करने के लिए, आवश्यक वैकल्पिक छवि ( चित्र-example_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

मुझे लगता है कि उपरोक्त फ़ंक्शन डोम के भीतर सभी छवियों के लिए निष्पादित करेगा क्योंकि यह वर्तमान में कोडित है। आगे के संदर्भ की आपूर्ति करने से यह विशेष img तत्वों के प्रभाव पर ध्यान केंद्रित करेगा।

— क्रिस्टोफर राउत

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

मैंने निम्नलिखित कोड जैसा कुछ बनाया है :)

यह केवल तभी काम करता है, जब आपके पास _hover नाम की दूसरी फ़ाइल हो, उदाहरण के लिए, 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

रिचर्ड आयोट्टे के कोड से अनुकूलित - उल / ली सूची में एक img को लक्षित करने के लिए (यहां रैपर div वर्ग के माध्यम से पाया गया), कुछ इस तरह से:

$('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') }
);