मैं jquery का उपयोग कर किसी अन्य छवि पर दाईं ओर कोने में एक छवि को ओवरले करना चाहता हूं।Jquery छवि ओवरले?
असल में मैं दूसरी छवि को दाईं ओर कोने में दूसरी छवि पर दिखाना चाहता हूं जब उपयोगकर्ता का माउस छवि से ऊपर हो जाता है और फिर जब वे उस पर होवर करते हैं तो गायब हो जाते हैं। मैं इसे Jquery के साथ कैसे प्राप्त करूं?
@ सेनाड काफी सही है, आपको इसके लिए jQuery की आवश्यकता नहीं है। हालांकि, यदि आपके पास एक और जटिल स्थिति है और समान कार्यक्षमता की तलाश है, तो कोशिश करें:
उन्हें एक तत्व में लपेटें। position:absolute; top:0; left:0; और शैली ऊंचाई और चौड़ाई के लिए position:relative युक्त तत्व ओवरले छवि सेट सेट के रूप में आप की तरह ... तो मंडराना घटना को संभालने के लिए jQuery का उपयोग करें ... HTML:
<div>
<img id="main" src="myimg" />
<img id="overlay" src="myimg"
/></div>
सीएसएस:
div {
position:relative;
}
#main {
width:256px;
div {
position:relative;
}
#main {
width:256px;
height:256px;
}
#overlay {
position:absolute;
height:100px;
width:100px;
top:0;
left:0;
}
कोड:
$(document).ready(function() {
$("#main").mouseenter(function() {
$("#overlay").show();
});
$("#main").mouseleave(function() {
$("#overlay").hide();
});
});
एक काम उदाहरण देखें: http://jsfiddle.net/jsney/10/
आप उस के लिए jQuery की जरूरत नहीं है, आप सीएसएस उस के लिए उदाहरण
<a href="#" class="my-overlay">My Overlay</a>
सीएसएस
a.my-overlay {
background: url('/images/first-image.jpg') no-repeat;
width: 100px;/*width: of image*/;
height: 100px;/*height of image*/;
display: block;
text-indent: -1000px;
overflow: hidden;
}
a.my-overlay:HOVER {background: url('/images/second-image.jpg') no-repeat; }
के लिए उपयोग कर सकते हैं, यह बहुत आसान समाधान और सभी के लिए स्वीकार्य है।
जबकि मैं आपसे सहमत हूं कि जहां संभव हो, शुद्ध सीएसएस का उपयोग करना बेहतर है, यह ओपी के सवाल का जवाब नहीं देता है। शायद वह अभी भी जानना चाहता है कि वह jQuery के साथ ऐसा कैसे करेगा। – Sparky
क्या 'hover' छद्म-तत्व' में ऊपरी-कक्षा का कोई कारण है? (वास्तव में एक प्रश्न, आलोचना नहीं - हालांकि मैं * * व्यक्तिगत रूप से एचटीएमएल/सीएसएस में कम-मामला पसंद करता हूं।) –
मैं हमेशा अपरकेस का उपयोग कर रहा हूं, इसे स्क्रॉल करते समय फ़ाइल में ढूंढना आसान है ... –
मान लीजिए कि आपकी पहली छवि एक div के अंदर लपेटी गई है। div 3/slideToggle div पर शैली और मंडराना लोड img (अगर यह पहले नहीं किया गया है) पर अपनी पसंद 2/के एक वर्ग:
1/एक "कोई नहीं प्रदर्शन" के साथ एक और div जोड़ें जिसमें दूसरी छवि और वॉयला शामिल है!
$('div .firstImage').hover(function(){
$('.secondImage').slideToggle();
});
बेशक, आपको दूसरी स्थिति वाली div में उचित स्थिति शैली सेट करने की आवश्यकता है।
हम इसे "jquery.ImageOverlay.js" प्लगइन का उपयोग करके भी प्राप्त कर सकते हैं।
यहां इसके लिए उदाहरण है।
ASPX कोड:
<!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 runat="server">
<title></title>
<link rel="stylesheet" media="screen" type="text/css" href="Styles/ImageOrverlay.css" />
<script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.metadata.js"></script>
<script type="text/javascript" src="Scripts/jquery.ImageOverlay.js"></script>
</head>
<body>
<form id="form1" runat="server">
<h1>
jQuery Image Overlay</h1>
<fieldset>
<legend><b>Without any options : </b></legend>
<ul id="firstGallery" class="image-overlay">
<li><a href="http://www.yahoo.com">
<img alt="Palm Tree" src="Images/palmtree.jpg" />
<div class="caption">
<h3>
Write a Title Here</h3>
<p>
Put a Caption Here</p>
</div>
</a></li>
<li><a href="http://www.google.com">
<img alt="Iguana" src="Images/iguana.jpg" />
<div class="caption">
<h3>
Another Title</h3>
<p>
click for more info</p>
</div>
</a></li>
<li><a href="http://www.google.com">
<img alt="Ceynote" src="Images/ceynote.jpg" />
<div class="caption">
<h3>
Just a Title Here</h3>
</div>
</a></li>
</ul>
</fieldset>
<br />
<br />
<fieldset>
<legend><b>With options set (border_color, overlay_origin, overlay_color, and overlay_text_color,
overlay_speed, overlay_speed_out) : </b></legend>
<ul id="secondGallery" class="image-overlay">
<li><a href="http://www.mozilla.com/">
<img alt="firefox" src="Images/firefox-512-200x200.png" />
<div class="caption">
<h3>
Get Firefox</h3>
</div>
</a></li>
<li><a href="http://www.mozilla.com/">
<img alt="jungle" src="Images/jungle.jpg" />
<div class="caption">
<h3>
Tall Overlay</h3>
<p>
The overlay height is based upon the content it contains</p>
</div>
</a></li>
</ul>
</fieldset>
<br />
<br />
<fieldset>
<legend><b>Advanced Usage, utilizing the <a href="http://plugins.jquery.com/project/metadata">
metadata plugin</a> : </b></legend>
<ul id="thirdGallery" class="image-overlay { overlay_speed: 'slow' }">
<li><a class="{ animate: false, overlay_origin: 'top' }" href="http://www.balupton.com/sandbox/jquery_lightbox_bal/demo/">
<img alt="bamboo" src="Images/bamboo.jpg" />
<div class="caption">
<h3>
Connect to a Lightbox</h3>
<p>
overlay origin is overridden, not animated</p>
</div>
</a></li>
<li><a class="{ overlay_speed: 'fast', overlay_speed_out: 'slow' }" href="http://www.mozilla.com">
<img alt="Ships" src="Images/josh-ships.jpg" />
<div class="caption">
<h3>
'Ships' by Josh Neal</h3>
<p>
different in/out speeds</p>
</div>
</a></li>
<li><a class="{ border_color: 'green', overlay_color: '#ccffcc', overlay_text_color: 'green', overlay_speed: 'fast', always_show_overlay: true }"
href="http://www.mozilla.com/">
<img alt="cypress" src="Images/cypress.jpg" />
<div class="caption">
<h3>
Digg This!</h3>
<p>
colors, overlay speed overridden, overlay always open</p>
</div>
</a></li>
</ul>
</fieldset>
<script type="text/javascript">
// JavaScript for the Image Overlay galleries.
$("#firstGallery").ImageOverlay();
$("#secondGallery").ImageOverlay({ border_color: "#FF8000", overlay_color: "#610B38", overlay_origin: "top", overlay_text_color: "#FF8000", overlay_speed: 'fast', overlay_speed_out: 'slow' });
$("#thirdGallery").ImageOverlay();
</script>
</form>
</body>
</html>
================================== ===========================================
सीएसएस:
.image-overlay { list-style: none; text-align: left; }
.image-overlay li { display: inline; }
.image-overlay a:link, .image-overlay a:visited, .image-overlay a:hover, .image-overlay a:active { text-decoration: none; }
.image-overlay a:link img, .image-overlay a:visited img, .image-overlay a:hover img, .image-overlay a:active img { border: none; }
.image-overlay a
{
margin: 9px;
float: left;
background: #fff;
border: solid 2px;
overflow: hidden;
position: relative;
}
.image-overlay img
{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.image-overlay .caption
{
float: left;
position: absolute;
background-color: #000;
width: 100%;
cursor: pointer;
/* The way to change overlay opacity is the follow properties. Opacity is a tricky issue due to
longtime IE abuse of it, so opacity is not offically supported - use at your own risk.
To play it safe, disable overlay opacity in IE. */
/* For Firefox/Opera/Safari/Chrome */
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.image-overlay .caption h1, .image-overlay .caption h2, .image-overlay .caption h3,
.image-overlay .caption h4, .image-overlay .caption h5, .image-overlay .caption h6
{
margin: 10px 0 10px 2px;
font-size: 20px;
font-weight: bold;
padding: 0 0 0 5px;
}
.image-overlay p
{
text-indent: 0;
margin: 10px;
font-size: 1em;
}
डाउनलोड: विज़ यह .js फ़ाइलों और छवियों फ़ाइलों को डाउनलोड करने और कई तरीकों से कार्यान्वयन का लाइव उदाहरण डाउनलोड करने के लिए यह लिंक है।
http://jayeshsorathia.blogspot.com/2012/12/image-overlay-using-jquery-plugin-with-asp-net.html
यहाँ एक आसान तरीका ऊपर थॉमस के कोड का पालन मैंने किया है। मेरे मामले में मैं एक छवि पर एक ओवरले (मूल रूप से एक बड़े प्लस साइन के साथ एक ग्रेड आउट बॉक्स) रखना चाहता था जो दिखाता है कि यह क्लिक करने योग्य है और थंबनेल को लाइटबॉक्स में बढ़ाएगा। मुझे ऐसा करने की ज़रूरत है, इसलिए कक्षाओं का उपयोग नहीं कर रहा हूं।
मेरी छवि और ओवरले छवि समान आयाम हैं। । होवर फ़ंक्शन शो के बावजूद ओवरले को छुपाएं।
मैं लाइटबॉक्स सामान नहीं दिखा रहा हूं इसलिए यह इस मुद्दे के लिए स्पष्ट है।
ध्यान दें कि a.hoverTrigger .overlay img को भी लपेटता है। यदि आप ऐसा नहीं करते हैं तो आपको डरावना झटकेदार प्रभाव मिलेगा।
मार्कअप:
<div class="merchImg">
<a href="#" class="hoverTrigger"><img src="_img/_new-store/item.png" /></a>
<a href="#" class="hoverTrigger"><img class="overlay hide" src="_img/_new-store/overlay.png" /></a>
</div>
सीएसएस:
.merchImg {
position: relative;
}
.merchImg .overlay {
position: absolute;
top:0;
left:0;
}
jQuery:
$(".hoverTrigger").mouseenter(function() {
$(this).parent().find('a .overlay').show();
});
$(".hoverTrigger").mouseleave(function() {
$(this).parent().find('a .overlay').hide();
});
क्या मार्कअप का उपयोग? –