CSS: img पर छवि src बदलें: होवर

Question

मुझे <img>स्रोत URL को बदलने की आवश्यकता है hover।

मैंने यह कोशिश की है, लेकिन काम नहीं करेगा:

एचटीएमएल

<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>

सीएसएस

#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

jsFiddle

किसी भी सहायता की सराहना की जाएगी।

अपडेट करें:

यह केवल Webkit / Google Chrome के लिए काम करता है।

Comments

contentकेवल साथ काम करता है :beforeया :afterतो यह काम नहीं कर रहा है। divएक पृष्ठभूमि छवि के साथ उपयोग क्यों नहीं करते हैं और उस पृष्ठभूमि छवि को कैसे बदलते हैं?

— putvande

मैं उपयोग नहीं करना चाहता DIV।

— कामरेड

मुझे विश्वास नहीं है कि आप केवल सीएसएस के साथ स्रोत विशेषता को बदल सकते हैं। jQuery या सामान्य जावास्क्रिप्ट उस सरल को करने के लिए अच्छे उम्मीदवार हैं .... और मैं @putvande के साथ सहमत हूं, content:केवल :before:after

— sulfureous

खैर ... आप imgटैग की पृष्ठभूमि छवि सेट कर सकते हैं और बस srcअपनी छवि से निकाल सकते हैं। हालांकि यह थोड़ा अजीब है, यह काम करेगा। @HamedKamrava: आप केवल एक छवि का उपयोग कर सकते हैं या आप कुछ और उपयोग कर सकते हैं?

— putvande

यह केवल CSS2 के लिए काम नहीं करता है। CSS3 में अपने समाधान पूरी तरह से काम करना चाहिए, क्योंकि कोई जरूरत नहीं है वहाँ :beforeया :afterउपयोग करने के लिए छद्म कक्षाएं content:url(...)। अपडेट: यह केवल वेबकिट / गूगल क्रोम के लिए काम करता है।

— टिमो

Answer 1

केवल html और css के साथ, यह छवि के src को बदलने के लिए पॉसिबल नहीं है। यदि आप img टैग को div टैग से प्रतिस्थापित करते हैं, तो आप उस छवि को बदलने में सक्षम हो सकते हैं जिसे पृष्ठभूमि के रूप में सेट किया गया है

div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

और अगर आपको लगता है कि आप कुछ जावास्क्रिप्ट कोड का उपयोग कर सकते हैं तो आपको नीचे दिए गए img टैग के src को बदलने में सक्षम होना चाहिए

function hover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />

Comments

इसके अलावा, यदि आप CSS विकल्प का उपयोग करते हैं, तो यदि आप छवि को 'झिलमिलाहट' के रूप में नहीं देखना चाहते हैं, जबकि इसे हॉवर पर लोड करने की आवश्यकता है, तो आप इसे अपने पेज पर कहीं छिपाकर लोड कर सकते हैं:<img src="..." style="visibility: hidden" />

— स्टीवन ज्यूरिस

Answer 2

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

<a href="#">
<img src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png" 
onmouseover="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png'"
onmouseout="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png'"
border="0" alt=""/></a>

डेमो

http://jsfiddle.net/ssuryar/wcmHu/429/

Comments

इस उदाहरण में, हर बार जब आप ओवर-आउट होवर करते हैं, तो दो चित्र नेटवर्क पर लोड होते हैं (हालांकि, पहले प्रयास के बाद कैश किया जाना चाहिए)। और यह अपेक्षित व्यवहार है। कभी-कभी पृष्ठ पर छवि तत्व होना महत्वपूर्ण होता है, उदाहरण के लिए एक्सेसिबिलिटी आवश्यकताओं के लिए, लेकिन फिर सीएसएस के साथ दो छवि तत्वों को दिखाना / छिपाना बेहतर होता है। अधिकांश मामलों में JS के साथ छवि के src विशेषता को बदलना एक बुरा विचार है, यदि आप कर सकते हैं तो पृष्ठभूमि-छवि का उपयोग करने का प्रयास करें।

— अलेक्जेंडर बुरकेविच

Answer 3

मुझे एक समान समस्या थी लेकिन मेरे समाधान में दो चित्र थे, एक छिपा हुआ (प्रदर्शन: कोई नहीं) और एक दृश्य। आसपास की अवधि में होवर पर, मूल छवि प्रदर्शित करने के लिए बदल जाती है: कोई नहीं और प्रदर्शित करने के लिए अन्य छवि: ब्लॉक। (अपनी परिस्थितियों के आधार पर 'इनलाइन' का उपयोग कर सकते हैं)

यह उदाहरण छवियों के बजाय दो स्पैन टैग का उपयोग करता है ताकि आप इसे यहां चलाते समय परिणाम देख सकें। दुर्भाग्य से उपयोग करने के लिए मेरे पास कोई ऑनलाइन छवि स्रोत नहीं थे।

#onhover {
  display: none;
}
#surround:hover span[id="initial"] {
  display: none;
}
#surround:hover span[id="onhover"] {
  display: block;
}

<span id="surround">
    <span id="initial">original</span>
    <span id="onhover">replacement</span>
</span>

Comments

FYI करें, आप कह सकते हैं span#initialके स्थान परspan[id="initial"]

— एडम Katz

Answer 4

क्या तुम कर सकते हो सेटिंग से एक छोटा सा धोखा है widthऔर height0 के लिए वास्तविक छवि छिपाने के लिए और आप क्या चाहते हैं क्या करने के लिए कुछ सीएसएस लागू करने के लिए:

#aks {
    width:0px;
    height:0px;
    background:url('http://dummyimage.com/100x100/000/fff');
    padding:50px;
}

#aks:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

और पैडिंग imgटैग को वह आकार बनाता है जिसे आप चाहते हैं (आपकी वास्तविक छवि का आधा आकार)।

बेला

Comments

आप एक DIV का उपयोग करके ऐसा क्यों करेंगे?

— gdbj

Answer 5

यहाँ शुद्ध CSS का उपयोग करते हुए एक वैकल्पिक तरीका है। यह विचार एचटीएमएल मार्कअप में दोनों छवियों को शामिल करना है और इन पर प्रदर्शित या छिपा हुआ है: होवर

एचटीएमएल

<a>
   <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png" /> 
   <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png" />
</a>

सीएसएस

a img:last-child {
  display: none;  
}
a:hover img:last-child {
  display: block;  
}
a:hover img:first-child {
  display: none;  
}

jsfiddle: https://jsfiddle.net/m4v1onyL/

ध्यान दें कि उपयोग की गई छवियां उचित प्रदर्शन के लिए समान आयामों की हैं। इसके अलावा, ये छवियां फ़ाइल आकार काफी छोटी हैं, इसलिए कई को लोड करना इस मामले में कोई समस्या नहीं है, लेकिन हो सकता है कि आप बड़े आकार की छवियों के टॉगल प्रदर्शन को देख रहे हों।

Comments

@putvande दृष्टिकोण समान हो सकता है लेकिन यह एक पूर्ण और सरलीकृत कामकाजी उदाहरण है जो CSS चयनकर्ताओं का बेहतर उपयोग करता है

— jcruz

Answer 6

शब्दार्थ के बारे में, मुझे अब तक दिए गए किसी भी समाधान को पसंद नहीं है। इसलिए, मैं व्यक्तिगत रूप से निम्नलिखित समाधान का उपयोग करता हूं:

.img-wrapper {
  display: inline-block;
  background-image: url(https://www.w3schools.com/w3images/fjords.jpg);
}

.img-wrapper > img {
  vertical-align: top;
}

.img-wrapper > img:hover {
  opacity: 0;
}

<div class="img-wrapper">
  <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="image" />
</div>

यह एक सीएसएस केवल अच्छा ब्राउज़र संगतता के साथ समाधान है। यह एक छवि आवरण का उपयोग करता है जिसमें एक पृष्ठभूमि होती है जो शुरू में छवि द्वारा ही छिपाई जाती है। होवर पर, छवि अस्पष्टता के माध्यम से छिपी हुई है, इसलिए पृष्ठभूमि छवि दिखाई देती है। इस तरह, एक खाली आवरण नहीं है, लेकिन मार्कअप कोड में एक वास्तविक छवि है।

Answer 7

मेरे पास एक और उपाय है। यदि कोई भी AngularJs का उपयोग करता है: http://jsfiddle.net/ec9gn/30/

<div ng-controller='ctrl'>
    <img ng-mouseover="img='eb00eb'"  ng-mouseleave="img='000'"
         ng-src='http://dummyimage.com/100x100/{{img}}/fff' />
</div>

जावास्क्रिप्ट:

function ctrl($scope){
    $scope.img= '000';
}

कोई सीएसएस ^ ^।

Comments

यदि ओपी जावास्क्रिप्ट नहीं चाहता है, तो शायद ही यह संभव है कि जेएस फ्रेमवर्क का उपयोग कर समाधान प्रासंगिक हो?

— शरद

इससे भी बेहतर (अगर किसी को भी इसके लिए कोणीय का उपयोग करने का मन नहीं है): jsfiddle.net/ec9gn/420 (एनजी-इनिट और पूरी तरह से हटाए गए नियंत्रक को जोड़ा गया)।

— राहुल देसाई

Answer 8

मुझे भी ऐसी ही समस्या थी - मैं चित्र को बदलना चाहता हूँ: होवर लेकिन बूटस्ट्रैप के अनुकूली डिज़ाइन की कमी के कारण BACKGRUND-IMAGE का उपयोग नहीं कर सकता।

यदि आप मुझे पसंद करते हैं, तो आप केवल चित्र को बदलना चाहते हैं: होवर (लेकिन निश्चित छवि टैग के लिए SRC को बदलने के लिए जोर नहीं देते हैं) आप ऐसा कुछ कर सकते हैं - यह CSS-only समाधान है।

HTML:

<li>
  <img src="/picts/doctors/SmallGray/Zharkova_smallgrey.jpg">
  <img class="hoverPhoto" src="/picts/doctors/Small/Zharkova_small.jpg">
</li>

सीएसएस:

li { position: relative; overflow: hidden; }
li img.hoverPhoto {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
}
li.hover img { /* it's optional - for nicer transition effect */
  opacity: 0;
  -web-kit-transition:  opacity 1s ease;
  -moz-transition:  opacity 1s ease;li 
  -o-transition:    opacity 1s ease;
  transition:   opacity 1s ease;
}
li.hover img.hoverPhoto { opacity: 1; }

यदि आप IE7- संगत कोड चाहते हैं तो आप छिपा सकते हैं / दिखा सकते हैं: अस्पष्टता द्वारा स्थिति के अनुसार छवि।

Answer 9

चूँकि आप srcCSS के साथ नहीं बदल सकते हैं : यदि jQuery आपके लिए एक विकल्प है, तो इस फिडेल को देखें।

डेमो

$('#aks').hover(
    function(){
      $(this).attr('src','http://dummyimage.com/100x100/eb00eb/fff')
    },
    function(){
      $(this).attr('src','http://dummyimage.com/100x100/000/fff')
    }
)

यह मूल रूप से .hover()विधि का उपयोग कर रहा है ... इसे काम करने के लिए दो कार्य लगते हैं। जब आप होवर में प्रवेश करते हैं और जब आप इससे बाहर निकलते हैं।

हम .attrविशेषता को बदलने के लिए (विशेषता के लिए संक्षिप्त) का उपयोग कर रहे हैं src।

यह ध्यान देने योग्य है कि आपको यह काम करने के लिए फिडेल की तरह jQuery लाइब्रेरी की आवश्यकता है।

Answer 10

बेला

AshisKumar के जवाब से सहमत,
नीचे jQuery कार्यक्षमता का उपयोग करके माउस पर छवि url बदलने का एक तरीका है:

$(function() {
  $("img")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
        $(this).attr("src", url1); //URL @the time of mouse over on image
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("over", "");
        $(this).attr("src", url2); //default URL
    });
 });

Comments

@ नवीन और डिव से अलग कैसे प्रयोग aकरते हैं display:block? विषय स्टार्टर srcके imgमाध्यम से cssऔर कुछ नहीं चलना की विशेषता को बदलना चाहता था ।

— Cthulhu

Answer 11

व्यक्तिगत रूप से, मैं जावास्क्रिप्ट / jQuery समाधानों में से एक के साथ जाऊंगा। न केवल यह आपके एचटीएमएल शब्दार्थ रखता है (यानी, एक छवि को एक img तत्व के रूप में दिखाया गया है, क्योंकि यह मार्कअप में सामान्य रूप से src छवि है), लेकिन यदि आप JS / jQuery समाधान का उपयोग करते हैं तो आप JS / का भी उपयोग कर पाएंगे jQuery अपनी होवर छवि को प्रीलोड करने के लिए ।

होवर छवि को प्रीलोड करने का अर्थ यह होगा कि उपयोगकर्ता द्वारा मूल छवि पर हॉवर करने पर कोई डाउनलोड विलंब नहीं होगा, जिसके परिणामस्वरूप आपकी साइट बहुत अधिक पेशेवर व्यवहार करती है।

इसका मतलब है कि आपके पास जेएस पर निर्भरता है, लेकिन जेएस सक्षम नहीं होने वाले छोटे अल्पसंख्यक शायद बहुत उपद्रव करने वाले नहीं हैं - और बाकी सभी को एक बेहतर अनुभव मिलेगा ... और आपका कोड भी अच्छा होगा!

Answer 12

आप imgटैग की srcविशेषता का उपयोग करके नहीं बदल सकते CSS। जावास्क्रिप्ट onmouseover() इवेंट हैंडलर का उपयोग संभव ।

HTML:

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover='hover()'/>

जावास्क्रिप्ट:

function hover() {
  document.getElementById("my-img").src = "http://dummyimage.com/100x100/eb00eb/fff";
}

Comments

यह फ़ंक्शन काम करता है, लेकिन जब उपयोगकर्ता अपने माउस को छवि से दूर ले जाता है, तो छवि मूल छवि में वापस नहीं बदलती है। क्या आप उस कोड को लिखने में मदद कर सकते हैं? धन्यवाद

Answer 13

आप सीएसएस का उपयोग करके img src नहीं बदल सकते। यद्यपि आप निम्नलिखित शुद्ध सीएसएस समाधान का उपयोग कर सकते हैं। HTML:

<div id="asks"></div>

सीएसएस:

#asks {
  width: 100px;
  height: 100px;
  background-image: url('http://dummyimage.com/100x100/0000/fff');
}

#asks:hover {
  background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}

या, यदि आप एक पृष्ठभूमि छवि के साथ एक div का उपयोग नहीं करना चाहते हैं, तो आप एक जावास्क्रिप्ट / jQuery समाधान का उपयोग कर सकते हैं। एचटीएमएल:

<img id="asks" src="http://dummyimage.com/100x100/000/fff" />

jQuery:

$('#asks')
  .mouseenter(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/eb00eb/fff');})
  .mouseleave(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/000/fff');});

Answer 14

इसके लिए आप नीचे दिए गए कोड का उपयोग कर सकते हैं

1) html

<div id = "aks">

</div>

2) सी.एस.एस.

#aks
    {
        width:100px;
height:100px;    

        background-image:url('http://dummyimage.com/100x100/000/fff');}

#aks:hover {
    background-image:url('http://dummyimage.com/100x100/eb00eb/fff');

}

Answer 15

पुराने ब्राउज़रों पर, :hoverकेवल <a>तत्वों पर काम किया । तो अगर आप कुछ करना चाहते हैं इस तरह काम करने के लिए इसे पाने के लिए।

<style>
a#aks
{
    width:100px;
    height:100px;
    display:block;
}

a#aks:link
{
  background-image: url('http://dummyimage.com/100x100/000/fff');
}

a#aks:hover
{
  background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}
</style>

<a href="#" id="aks"></a>

Answer 16

निम्न कोड क्रोम और फ़ायरफ़ॉक्स दोनों पर काम करता है

<a href="#"><img src="me-more-smile.jpg" onmouseover="this.src='me-thinking-about-a-date.jpg'" onmouseout="this.src='me-more-smile.jpg'" border="0" alt=""/></a>

Answer 17

एक शुद्ध सीएसएस समाधान का उपयोग करता है। दृश्य छवि को img टैग में रखें, दूसरी छवि को पृष्ठभूमि में css में रखें, फिर चित्र को होवर पर छिपाएँ।

.buttons{
width:90%;
margin-left:5%;
margin-right:5%;
margin-top:2%;
}
.buttons ul{}   
.buttons ul li{
display:inline-block;
width:22%;
margin:1%;
position:relative;
}
.buttons ul li a p{
position:absolute;
top:40%;
text-align:center;
}   
.but1{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but1 a:hover img{
visibility:hidden;
}   
.but2{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but2 a:hover img{
visibility:hidden;
}   
.but3{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but3 a:hover img{
visibility:hidden;
}   
.but4{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}   
.but4 a:hover img{
visibility:hidden;
}           

<div class='buttons'>
<ul>
<li class='but1'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Blog</p></a></li>
<li class='but2'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /> <p>Herrero</p></a></li>
<li class='but3'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Loftin</p></a></li>
<li class='but4'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Contact</p></a></li>
</ul>
</div>

Answer 18

srcछवि के लिए बदलने का सबसे अच्छा तरीका है:

<img src='willbehidden.png' style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

लाइव डेमो देखें: http://www.audenaerde.org/csstricks.html#imagereplacecss

का आनंद लें!

Answer 19

इस कोड का प्रयास करें।

   .card {

            width: 200px;

            height: 195px;

            position: relative;

            display: inline-block;

        }

        .card .img-top {

            display: none;

            position: absolute;

            top: 0;

            left: 0;
           
            z-index: 99;
width:200px;
        }

        .card:hover .img-top {

            display: inline;

        }

 <!DOCTYPE html>

    <html lang="en">

    <head>

    <title>Image Change on Hover with CSS</title>

 
    </head>

    <body>

        <div class="card">

            <img src="http://www.dhresource.com/200x200s/f2-albu-g5-M00-EC-97-rBVaJFkAobCAHD9XAADvz9DDocA266.jpg/diy-wall-stickers-home-decor-nature-colorful.jpg" alt="Card Back" style="width:200px">

            <img src="https://s-media-cache-ak0.pinimg.com/236x/31/17/98/3117987a0be0a7d8976869aabf54d2d7.jpg" class="img-top" alt="Card Front">

        </div>

    </body>

    </html>

Answer 20

केवल HTML और CSS का उपयोग करने का एक और सरल तरीका है!

बस अपने <img>टैग को div की तरह लपेटें :

<div class="image-wrapper">
    <img src="http://dummyimage.com/100x100/000/fff">
</div>

फिर, अपनी CSS फ़ाइल में img छिपाएं और रैपिंग डिव तत्व के लिए बैकग्राउंड इमेज सेट करें:

.image-wrapper:hover {
    background-image: url(http://dummyimage.com/100x100/eb00eb/fff);
    background-size: contain;
    background-repeat: no-repeat;
}

.image-wrapper:hover img {
    display: none;
}

Et voilà!