माउसओवर पर एक छवि को अंधेरा कैसे करें?

मेरे समस्या ..माउसओवर पर एक छवि को अंधेरा कैसे करें?

मैं छवियों (हाइपरलिंक अंदर) की एक संख्या है, और मैं एक माउसओवर पर काला कर (यानी उच्च अस्पष्टता या कुछ और के साथ एक काला नकाब लागू), और उसके बाद सामान्य करने के लिए वापस जाना चाहता हूँ माउसआउट पर लेकिन मैं इसे करने का सबसे अच्छा तरीका नहीं समझ सकता।

मैं कोशिश की है ..

Jquery रंग चेतन और कुछ जावास्क्रिप्ट संदर्भ।
जावास्क्रिप्ट के साथ छवि की अस्पष्टता सेट करना।

मैं नहीं करना चाहता ..

छवि शुरुआत 80% पर अस्पष्टता तो माउसओवर पर 100% करने के लिए जाना (इतना आसान है)।
2 छवियों (एक प्रकाश & एक अंधेरे) के बीच स्वैप करने के लिए, भूल गया उल्लेख इस खेद ..

दोहराना के लिए ..

मैं छवि में चाहते हैं (एक हाइपरलिंक inslide) अंधेरा करने के लिए माउसओवर पर और फिर माउसआउट पर अपना अंधकार खो दें।

विचार?

अद्यतन:

इस सुझाव से मेरी प्रगति है। आईई 8 में ठीक दिखता है, लेकिन एफएफ 3

<html> 
    <body> 
     <a href="http://www.google.com" style="background-color:black; opacity:1;filter:alpha(opacity=100)"> 
      <img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200" 
      style="opacity:1;filter:alpha(opacity=100)" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" 
      onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" /> 
     </a> 
    </body> 
</html>

विचारों में नहीं?

- ली

उत्तर

मैं इस के साथ जा रहा हूँ

<html> 
    <head> 
     <style type="text/css"> 

     .outerLink 
     { 
      background-color:black; 
      display:block; 
      opacity:1; 
      filter:alpha(opacity=100); 
      width:200px; 
     } 

     img.darkableImage 
     { 
      opacity:1; 
      filter:alpha(opacity=100); 
     } 
</style> 
    </head> 

    <body> 
     <a href="http://www.google.com" class="outerLink"> 
      <img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200" 
      class="darkableImage" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" 
      onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" /> 
     </a> 
    </body> 
</html>

स्रोत

2009-11-17 Lee Englestone

वहाँ 2 अलग छवियों, एक प्रकाश और एक अंधेरे के लिए एक विकल्प है? – MalphasWats

डोररी माल्फ़, मैं अपने प्रश्न में उल्लेख करना भूल गया था कि मैं इसे इस तरह से नहीं करना चाहता था, हालांकि –

चीयर्स हालांकि यह हो सकता है कि अगर आपने "कोशिश की, काम नहीं किया" (9_9 आपको नहीं लगता कि आप कर सकते हैं आपने जो कुछ भी किया है और क्या हुआ है, इसके बारे में अधिक जानकारी प्रदान करें?) परिदृश्य काम नहीं करते हैं, अगर वे आपके लिंक और छवि तत्वों को उनके डिफ़ॉल्ट 'डिस्प्ले: इनलाइन' के बजाय सीएसएस' डिस्प्ले: ब्लॉक 'पर सेट करते हैं तो वे काम करेंगे। डिफ़ॉल्ट सेटिंग इनलाइन तत्वों की रेखा-ऊंचाई पर प्रश्न के कुछ प्रभावों को प्रतिबंधित कर सकती है। – eyelidlessness

या, एरिक्केलन के विचार के समान, ए टैग ब्लैक की पृष्ठभूमि बनाएं, और माउसओवर पर इमेज सेमिट्रैस्पेरेंट बनाएं। इस तरह आपको अतिरिक्त divs बनाना नहीं होगा।

CSS Only Fiddle (केवल आधुनिक ब्राउज़रों में काम करेंगे)
JavaScript based Fiddle ([शायद] सभी आम ब्राउज़रों में काम करेंगे)

सीएसएस आधारित समाधान के लिए स्रोत:

a.darken { 
    display: inline-block; 
    background: black; 
    padding: 0; 
} 

a.darken img { 
    display: block; 

    -webkit-transition: all 0.5s linear; 
     -moz-transition: all 0.5s linear; 
     -ms-transition: all 0.5s linear; 
     -o-transition: all 0.5s linear; 
      transition: all 0.5s linear; 
} 

a.darken:hover img { 
    opacity: 0.7; 

}

और छवि:

<a href="http://google.com" class="darken"> 
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200"> 
</a>

स्रोत

2009-11-17 09:39:59 fresskoma

कोशिश की, यह काम नहीं किया। –

+24

यह निश्चित रूप से काम करता है। "काम नहीं किया" एक बहुत उपयोगी समस्या विवरण नहीं है, इसलिए कृपया कुछ और विशिष्ट के साथ आओ या कोई भी आपकी मदद करने में सक्षम नहीं होगा। – fresskoma

क्षमा करें x3ro (और सभी), मैं भविष्य में और अधिक वर्णनात्मक होने की कोशिश करूंगा ;-) –

की चोटी पर एक काले रंग की अर्द्धपारदर्शी, div रखो (IE8 & एफएफ में काम करने लगता है) यह।

स्रोत

2009-11-17 09:37:46 erikkallen

कोशिश की, यह काम नहीं किया। यदि आप इसे इस तरह से काम करते हैं, तो कृपया मुझे बताएं। –

आप इसे पारदर्शी कैसे बनाते हैं? सही क्रॉस-ब्राउज़र प्राप्त करने के लिए इसे कुछ ट्वीविंग की आवश्यकता है (जो jQuery आपके लिए करेगा)। – erikkallen

काले पीएनजी बनाएं 50% पारदर्शिता कहें। माउसओवर पर इसे ओवरले करें।

स्रोत

2009-11-17 09:38:50 bitbonk

कैसे इस बारे में ...

<style type="text/css"> 
    div.frame { background-color: #000; } 
    img.pic:hover { 
     opacity: .6; 
     filter:alpha(opacity=60); 
    } 
</style> 

<div class="frame"> 
    <img class="pic" src="path/to/image" /> 
</div>

स्रोत

2009-11-17 09:55:05

धन्यवाद ईई यह एफएफ में ठीक काम करता है लेकिन आईई 8 नहीं। कोई विचार? –

इसे Jquery के साथ करें, आपको एक समाधान मिलेगा जो लगभग हर ब्राउज़र में क्रॉस ब्राउज़र का काम करता है। '$ ('# id_of_div')। सीएसएस ('अस्पष्टता', 6);' –

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

outerLink { 
    overflow: hidden; 
    position: relative; 
} 

outerLink:hover:after { 
    background: #000; 
    content: ""; 
    display: block; 
    height: 100%; 
    left: 0; 
    opacity: 0.5; 
    position: absolute; 
    top: 0; 
    width: 100%; 
}

स्रोत

2010-12-13 00:00:12

छवि को 100% उज्ज्वल बनाएं ताकि यह स्पष्ट हो। और फिर इंप होवर पर इसे जो भी चमक आप चाहते हैं उसे कम करें।

img { 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 

 
img:hover { 
 
    -webkit-filter: brightness(70%); 
 
    filter: brightness(70%); 
 
}

<img src="http://dummyimage.com/300x150/ebebeb/000.jpg">

कि यह क्या करेंगे, आशा है कि मदद करता है

स्रोत

2015-04-13 23:06:15

आपको संक्रमण को 'img {}' में ले जाना चाहिए, फिर आपको 'फ़िल्टर: चमक (100%)' जोड़ने की आवश्यकता नहीं है। – poxip

माउसओवर पर एक छवि को अंधेरा कैसे करें?

उत्तर

संबंधित मुद्दे