সিএসএস: img: hover এ চিত্র src পরিবর্তন করুন

Question

আমার <img>সোর্স ইউআরএল চালু করতে হবে hover।

আমি এটি চেষ্টা করেছি কিন্তু কাজ করবে না:

এইচটিএমএল

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

সিএসএস

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

jsFiddle

কোন সাহায্য প্রশংসা করা হবে।

হালনাগাদ:

এটি কেবল ওয়েবকিট / গুগল ক্রোমের জন্যই কাজ করে।

Comments

contentশুধুমাত্র কাজ করে :beforeবা :afterতাই এটি কাজ করে না। divপটভূমি চিত্র সহ একটি কেন ব্যবহার করবেন না এবং সেই পটভূমির চিত্রটি কীভাবে পরিবর্তিত হবে?

— পুটভান্ডে

আমি ব্যবহার করতে চাই না DIV।

— হামেদ কামরাভা

আমি বিশ্বাস করি না যে আপনি কেবল সিএসএসের সাহায্যে উত্স বৈশিষ্ট্যটি পরিবর্তন করতে পারেন। jQuery এর বা স্বাভাবিক জাভাস্ক্রিপ্ট যে সহজ করা ভাল প্রার্থীদের .... এবং আমি @putvande সাথে একমত, content:শুধুমাত্র সঙ্গে কাজ করে :beforeবা:after

— sulfureous

আচ্ছা ... আপনি imgট্যাগটির পটভূমি চিত্রটি সেট করতে পারেন এবং কেবল srcআপনার চিত্র থেকে মুছে ফেলতে পারেন । যদিও এটি কিছুটা অদ্ভুত, তবে এটি কার্যকর হবে। @ হামেদ কামরাভা: আপনি কেবল একটি চিত্র ব্যবহার করতে পারেন বা আপনি অন্য কিছু ব্যবহার করতে পারেন?

— পুটভান্ডে

এটি কেবল CSS2 এর জন্য কাজ করে না। সিএসএস 3 আপনার সমাধান পুরোপুরি কাজ করা উচিত কারণ জন্য কোন প্রয়োজন আছে :beforeবা :afterব্যবহার ছদ্ম শ্রেণীর content:url(...)। আপডেট: এটি কেবল ওয়েবকিট / গুগল ক্রোমের জন্যই কাজ করে।

— টিমো

Answer 1

শুধুমাত্র এইচটিএমএল এবং সিএসএসের সাহায্যে এটি চিত্রের এসআরসি পরিবর্তন করতে পারে না। আপনি যদি ইম ট্যাগটি ডিভ ট্যাগের সাথে প্রতিস্থাপন করেন, তবে আপনি পটভূমির মতো সেট করা চিত্রটি পছন্দ করতে সক্ষম হতে পারেন

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

এবং যদি আপনি ভাবেন যে আপনি কিছু জাভাস্ক্রিপ্ট কোড ব্যবহার করতে পারেন তবে আপনার নীচের মতো img ট্যাগের এসসিআর পরিবর্তন করতে সক্ষম হওয়া উচিত

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

এছাড়াও, আপনি যদি সিএসএস বিকল্পটি ব্যবহার করেন, যদি আপনি ছবিটি <img src="..." style="visibility: hidden" />

— হোভারে

Answer 2

আমি প্যাট্রিক কোস্টজেন্স সম্পর্কিত কিছু পরিবর্তন করেছি mod

<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

এই উদাহরণস্বরূপ, প্রতিবার আপনি বাইরে বেরোনোর ​​পরে, দুটি চিত্র নেটওয়ার্কের উপরে লোড হয় (প্রথম চেষ্টা করার পরেও ক্যাশে হওয়া উচিত)। এবং এটি প্রত্যাশিত আচরণ। কখনও কখনও পৃষ্ঠায় চিত্রের উপাদান থাকা যেমন, অ্যাক্সেসিবিলিটি প্রয়োজনীয়তার জন্য থাকা গুরুত্বপূর্ণ তবে তারপরে CSS সহ দুটি চিত্রের উপাদান দেখানো / আড়াল করা ভাল। বেশিরভাগ ক্ষেত্রে জেএসের সাথে চিত্রের সিআরসি বৈশিষ্ট্যটি পরিবর্তন করা খারাপ ধারণা, আপনি যদি পারেন তবে ব্যাকগ্রাউন্ড-চিত্র ব্যবহার করার চেষ্টা করুন।

— আলেকজান্ডার বুড়াক্যাভিচ

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

এফওয়াইআই, আপনি তার span#initialজায়গায় বলতে পারেনspan[id="initial"]

— অ্যাডাম কাটজ

Answer 4

আপনি যা করতে পারেন তা হ'ল আসল চিত্রটি আড়াল করতে কিছু সেট করে 0 করে কিছু ঠকানো widthএবং heightআপনি যা চান তা করতে কিছু সিএসএস প্রয়োগ করুন:

#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

আপনি একটি ডিআইভি ব্যবহার করে কেন এটি করবেন?

— gdbj

Answer 5

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

এইচটিএমএল

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

জেএসফিডাল: https://jsfiddle.net/m4v1onyL/

নোট করুন যে ব্যবহৃত চিত্রগুলি যথাযথ প্রদর্শনের জন্য একই মাত্রার। এছাড়াও, এই চিত্রগুলির ফাইলের আকারগুলি খুব ছোট তাই একাধিক লোড করা কোনও সমস্যা নয় তবে আপনি যদি বড় আকারের চিত্রগুলির টগল প্রদর্শন করতে চান তবে এটি হতে পারে।

Comments

@ পাইপভান্ডে দৃষ্টিভঙ্গি একই রকম হতে পারে তবে এটি সিএসএস নির্বাচকদের আরও ভাল ব্যবহারের জন্য একটি সম্পূর্ণ এবং সরলিকৃত উদাহরণ

— জ্যাক্রুজ ২

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>

এটি একটি ভাল ব্রাউজারের সামঞ্জস্য সহ এক CSS সমাধান solution এটি এমন একটি চিত্রের মোড়ক ব্যবহার করে যা এর ব্যাকগ্রাউন্ড থাকে যা প্রাথমিকভাবে চিত্রটি নিজেই আড়াল করে। হোভার এ, ছবিটি অস্বচ্ছতার মধ্য দিয়ে লুকানো রয়েছে, তাই পটভূমির চিত্রটি দৃশ্যমান হয়। এইভাবে, কারও কাছে খালি মোড়ক নেই তবে মার্কআপ কোডে একটি সত্য চিত্র রয়েছে।

Answer 7

আমার আরও একটি সমাধান আছে। যদি কেউ অ্যাংুলারজে ব্যবহার করে: 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

আমার একই সমস্যা ছিল - আমি ছবিটি প্রতিস্থাপন করতে চাই: হোভার কিন্তু বুটস্ট্র্যাপের অভিযোজিত ডিজাইনের অভাবে ব্যাকগ্র্যান্ড-চিত্রটি ব্যবহার করতে পারছি না can't

আপনি যদি আমার পছন্দ করেন তবে কেবল ছবিটি পরিবর্তন করতে চান: হোভার (তবে নির্দিষ্ট চিত্রের ট্যাগের জন্য এসআরসি পরিবর্তনের জন্য জোর করবেন না) আপনি এই জাতীয় কিছু করতে পারেন - এটি সিএসএস-কেবলমাত্র সমাধান।

এইচটিএমএল:

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

আপনি যদি আই 7-সামঞ্জস্যপূর্ণ কোড চান তবে আপনি লুকিয়ে রাখতে / প্রদর্শন করতে পারেন: স্বচ্ছ চিত্রটি অস্বচ্ছতার দ্বারা নয় position

Answer 9

যেহেতু আপনি srcসিএসএসের সাহায্যে পরিবর্তন করতে পারবেন না : 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

বেহালা

আশিসকুমারের উত্তরের সাথে একমত,
নীচে 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এবং কিছু walkaround।

— চথুলহু

Answer 11

ব্যক্তিগতভাবে, আমি একটি জাভাস্ক্রিপ্ট / jQuery সমাধান সঙ্গে যেতে হবে। এটি কেবল আপনার এইচটিএমএলকে অর্থাত্পূর্ণ রাখে না (অর্থাত্ কোনও চিত্র একটি ইম্জ উপাদান হিসাবে প্রদর্শিত হয় যা এটির সাধারণ সিআরসি চিত্রটি মার্কআপে সংজ্ঞায়িত করা হয়), তবে আপনি যদি জেএস / জেকিউয়ারি সমাধান ব্যবহার করেন তবে আপনি জেএস / ব্যবহার করতে সক্ষম হবেন আপনার হোভার ইমেজটি প্রিলোড করার জন্য jQuery ।

হোভার চিত্রটি প্রিললোড করার অর্থ হ'ল ব্যবহারকারী যখন মূল চিত্রটি ধরে রাখে তখন কোনও ডাউনলোডের বিলম্ব হবে না যার ফলস্বরূপ আপনার সাইটটি আরও পেশাদারি আচরণ করবে।

এর অর্থ এই নয় যে আপনার জেএসের উপর নির্ভরতা রয়েছে, তবে যে সংখ্যালঘু সংখ্যালঘু জেএস সক্ষম নয় সম্ভবত তারা খুব বেশি চাপ দেবে না - এবং প্রত্যেকেই আরও ভাল অভিজ্ঞতা অর্জন করবে ... এবং আপনার কোডটিও ভাল হবে!

Answer 12

আপনি imgট্যাগের srcবৈশিষ্ট্যটি ব্যবহার করে পরিবর্তন করতে পারবেন না CSS। জাভাস্ক্রিপ্ট onmouseover() ইভেন্ট হ্যান্ডলার ব্যবহার করে সম্ভব ।

এইচটিএমএল:

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

javascript:

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

Comments

এই ফাংশনটি কাজ করে, তবে যখন ব্যবহারকারী তার মাউসটিকে চিত্র থেকে দূরে সরিয়ে দেয়, চিত্রটি মূল চিত্রটিতে ফিরে আসে না। আপনি কি কোড লিখতে সাহায্য করতে পারেন? ধন্যবাদ

Answer 13

আপনি সিএসএস ব্যবহার করে img src পরিবর্তন করতে পারবেন না। আপনি নীচের খাঁটি সিএসএস সমাধানটি ব্যবহার করতে পারেন যদিও can এইচটিএমএল:

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

অথবা, আপনি যদি কোনও পটভূমি চিত্রের সাথে কোনও ডিভি ব্যবহার করতে না চান তবে আপনি একটি জাভাস্ক্রিপ্ট / 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) এইচটিএমএল

<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

এখানে একটি খাঁটি সিএসএস সমাধান। আইএমজি ট্যাগে দৃশ্যমান চিত্রটি রাখুন, দ্বিতীয় চিত্রটিকে সিএসএসে একটি পটভূমি হিসাবে রাখুন, তারপরে চিত্রটি হোভারের উপরে লুকান।

.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/csstrick.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

কেবলমাত্র এইচটিএমএল এবং সিএসএস ব্যবহারের আরও একটি সহজ উপায় আছে! ডিভের মতো

আপনার <img>ট্যাগটি কেবল মোড়ানো :

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

তারপরে, আপনার সিএসএস ফাইলে 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;
}

এট ভয়েইল!