সিএসএস ব্যবহার করে কীভাবে একটি ইনপুট বোতাম চিত্র পরিবর্তন করা যায়?

Question

সুতরাং, আমি একটি চিত্র ব্যবহার করে একটি ইনপুট বোতাম তৈরি করতে পারি

<INPUT type="image" src="/images/Btn.PNG" value="">

তবে, সিএসএস ব্যবহার করে আমি একই আচরণ পেতে পারি না। উদাহরণস্বরূপ, আমি চেষ্টা করেছি

<INPUT type="image" class="myButton" value="">

যেখানে "মাই বাটন" সিএসএস ফাইলে হিসাবে সংজ্ঞায়িত করা হয়েছে

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

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

আমি ফায়ারফক্স ৩.০.৩ ব্যবহার করছি যদি এতে কোনও পার্থক্য আসে।

Answer 1

আপনি যদি সিএসএস ব্যবহার করে বোতামটি স্টাইল করতে চান তবে এটিকে = "চিত্র" টাইপের পরিবর্তে টাইপ = "জমা দিন" বোতামটি তৈরি করুন। প্রকার = "চিত্র" একটি এসআরসি আশা করে, যা আপনি সিএসএসে সেট করতে পারবেন না।

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

Comments

ধন্যবাদ। চিত্রের পরিবর্তে "জমা দিন" ব্যবহার করে চিত্রটি লোড হয়ে গেছে।

— বাল্টিমার্ক

সাফারি 3 এবং তারপরে আপনি চাইলে স্টাইলের বোতামগুলিকে মঞ্জুরি দিন। এবং আরও সামঞ্জস্যপূর্ণ হতে তার পরিবর্তে <বাটন> ব্যবহার করুন।

— চোখের পলকহীনতা

আবার আরও সামঞ্জস্যপূর্ণ হতে হবে </ বাটন> আপনাকে অন্যান্য সামঞ্জস্যতার সমস্যাগুলি কিনতে পারে।

— eglasius

ছেলেরা, নীচে এসআই ওয়েব ডিজাইন দ্বারা উত্তর চেক করুন। যদি উত্তরগুলি আরও ভাল হয় তবে দয়া করে ভোট দিন।

— ডিভাল

Answer 2

আপনি <button>ট্যাগ ব্যবহার করতে পারেন । জমা দেওয়ার জন্য, কেবল যুক্ত করুনtype="submit" । তারপরে একটি পটভূমি চিত্র ব্যবহার করুন যখন আপনি বাটনটি কোনও গ্রাফিক হিসাবে উপস্থিত হতে চান।

তাই ভালো:

<button type="submit" style="border: 0; background: transparent">
    <img src="/images/Btn.PNG" width="90" height="50" alt="submit" />
</button>

আরও তথ্য: http://htmldog.com/references/htmltags/button/

Comments

কেবল মনে রাখবেন যে আইই (5,6,7, এবং 8 (অ-মানক মোডে) বোতামটির

— .inner HTML টি

তবে <বোতামের ইনফ চিত্রের সীমানাটি coveredেকে দেওয়া হয়েছে।

— বিজে প্যাটেল

@ সানলাইফ, অ্যাডিটিন পোস্টিংয়ে দিমিত্রি বেশিরভাগ ওয়েবসারদের পোস্ট করা ডেটা গ্রহণ না করার কারণ, কারণ এটি ইনজেকশন আক্রমণের মতো গন্ধযুক্ত

— কোহেন

Answer 3

এইচটিএমএল

<div class="myButton"><INPUT type="submit" name="" value=""></div>

সিএসএস

div.myButton input {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

এটি কোথাও, এমনকি সাফারিতেও কাজ করবে।

Comments

এটি সেরা উত্তর। ধন্যবাদ

— বায়রন হিটলক

Answer 4

জমা বোতামের জন্য সিএসএস চিত্র প্রতিস্থাপন সম্পর্কে এই নিবন্ধ সহায়তা করতে পারে।

"এই পদ্ধতিটি ব্যবহার করে আপনি স্টাইল শীটগুলি সক্রিয় থাকাকালীন একটি ক্লিকযোগ্য চিত্র পাবেন এবং স্টাইল শীটগুলি বন্ধ থাকাকালীন একটি স্ট্যান্ডার্ড বোতাম The ইনপুটটি ব্যবহার করে

And

সিএসএস কোড:

#replacement-1 {
  width: 100px;
  height: 55px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}

#replacement-2 {
  width: 100px;
  height: 55px;
  padding: 55px 0 0;
  margin: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  overflow: hidden;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
  height: 0px;
}

Comments

এই পদ্ধতির সমস্যাটি হ'ল, যদি ক্লায়েন্ট তাদের ব্রাউজারে চিত্রগুলি অক্ষম করে তবে তারা কোনও বোতামই দেখতে পাবে না!

— স্কট

Answer 5

এখানে একটি সহজ সমাধান কিন্তু অতিরিক্ত পার্শ্ববর্তী ডিভ ছাড়া:

<input type="submit" value="Submit">

সিএসএস একটি প্রাথমিক চিত্র প্রতিস্থাপন কৌশল ব্যবহার করে। বোনাস পয়েন্টগুলির জন্য, এটি চিত্রের স্প্রিট ব্যবহার করে দেখায়:

<style>
    input[type="submit"] {
        border: 0;
        background: url('sprite.png') no-repeat -40px left;
        text-indent: -9999em;
        line-height:3000;
        width: 50px;
        height: 20px;
    }
</style>

সূত্র: http://work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/

Comments

সিএসএস নির্বাচক (টাইপ = "সাবমিট করুন") এবং

— স্প্রেটিসের

আমি সেই সাইটটি নিয়ন্ত্রণ করি না। ভাল জিনিস আমি আমার উত্তরে সমাধানটি রেখেছি।

— ফিলোয়ে

লিঙ্কটির সর্বশেষ সংরক্ষিত সংস্করণ: web.archive.org/web/2014040202065651/http://work.arounds.org/…

— বার্নহার্ড ওয়াগনার

Answer 6

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

>#divbutton
{
    position:relative;
    top:-64px;
    left:210px;
    background: transparent url("../../images/login_go.png") no-repeat;
    line-height:3000;
    width:33px;
    height:32px;
    border:none;
    cursor:pointer;
}

Answer 7

আপনি আপনার ট্যাগে লক্ষ্য হিসাবে ফাঁকা.gif (1px স্বচ্ছ চিত্র) ব্যবহার করতে পারেন

<input type="image" src="img/blank.gif" class="button"> 

এবং তারপর CSS এ স্টাইলের পটভূমি:

.button {border:0;background:transparent url("../img/button.png") no-repeat 0 0;}
.button:hover {background:transparent url("../img/button-hover.png") no-repeat 0 0;}

Answer 8

পূর্ববর্তী উত্তরের উপর একটি প্রকরণ। আমি দেখতে পেয়েছি যে অস্বচ্ছতা সেট করা দরকার, অবশ্যই এটি আই 6 এবং এ কাজ করবে। আইই 8-তে লাইন-উচ্চতা সমাধানে একটি সমস্যা ছিল যেখানে বোতামটি সাড়া দেয় না। এবং এটি দিয়ে আপনি পাশাপাশি একটি হাত কার্সার পাবেন!

<div id="myButton">
  <input id="myInputButton" type="submit" name="" value="">
</div>

#myButton {
 background: url("form_send_button.gif") no-repeat;
 width: 62px;
 height: 24px;
 }

#myInputButton { 
 background: url("form_send_button.gif") no-repeat;
 opacity: 0;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 width: 67px;
 height: 26px;
 cursor: pointer;
 cursor: hand;
}

Answer 9

আমি মনে করি নিম্নলিখিতটি সর্বোত্তম সমাধান:

CSS:

.edit-button {
    background-image: url(edit.png);
    background-size: 100%;
    background-repeat:no-repeat;
    width: 24px;
    height: 24px;
}

এইচটিএমএল:

<input class="edit-button" type="image" src="transparent.png" />

Answer 10

জেএস ছাড়াই এবং ছবি ছাড়াই আমার সমাধানটি হ'ল:

* এইচটিএমএল:

<input type=Submit class=continue_shopping_2 
name=Register title="Confirm Your Data!" 
value="confirm your data">

* সিএসএস:

.continue_shopping_2:hover{
background-color:#FF9933;
text-decoration:none;
color:#FFFFFF;}


.continue_shopping_2{
padding:0 0 3px 0;
cursor:pointer;
background-color:#EC5500;
display:block;
text-align:center;
margin-top:8px;
width:174px;
height:21px;
border-radius:5px;
border-width:1px;
border-style:solid;
border-color:#919191;
font-family:Verdana;
font-size:13px;
font-style:normal;
line-height:normal;
font-weight:bold;
color:#FFFFFF;}

Comments

আপনার ওয়েবসাইটে এলোমেলো লিঙ্কগুলি এইভাবে পোস্ট করা উপযুক্ত নয়। আমি এর কোনও 'উদাহরণ' দেখতে পাচ্ছি না। যদি আপনি উদাহরণস্বরূপ উদাহরণ দেখাতে চান তবে দয়া করে এমন একটি তৈরি করুন যা নিজে থেকে একটি উদাহরণ হিসাবে কাজ করে - পুরো, লাইভ সাইটের প্রসঙ্গে নয়।

— অ্যান্ড্রু বারবার

এটি সঠিক ... সত্যটি হ'ল সরাসরি পৃষ্ঠাটি অ্যাক্সেস করা সম্ভব নয় ... কেবল কার্টে 1 টি আইটেম যুক্ত করা এবং চেকআউটে যাওয়া going

— জন

Answer 11

সম্ভবত আপনি জাভাস্ক্রিপ্টে একটি .js ফাইলও আমদানি করতে পারেন এবং চিত্র প্রতিস্থাপন করতে পারেন।

Comments

এটি গুরুত্ব সহকারে এটি করা।

— রিড রিচার্ডস

Answer 12

ধরে নেওয়া যাক আপনি ইনপুট ধরণ বা এসসিআর এমনকি পরিবর্তন করতে পারবেন না। আপনার সাথে কেবল খেলতে সিএসএস রয়েছে।

আপনি যে উচ্চতাটি চান তা যদি জানেন এবং তার পরিবর্তে আপনি যে পটভূমি চিত্রটি ব্যবহার করতে চান তা url থাকে তবে আপনি ভাগ্যবান।

উচ্চতাটি শূন্যে সেট করুন এবং আপনি যে উচ্চতা চান সেটি প্যাডিং-টপ করুন। এটি আপনার সিএসএস ব্যাকগ্রাউন্ড-চিত্রটি দেখানোর জন্য আপনাকে পুরোপুরি পরিষ্কার জায়গা দেবে, মূল চিত্রটি দৃষ্টির বাইরে রাখবে।

ক্রোমে কাজ করে। আইই তে কাজ করে কিনা ধারণা নেই। কদাচিৎ কিছু বুদ্ধিমান কাজ করে, তাই সম্ভবত না।

#daft {
  height: 0;
  padding-top: 100px;
  width: 100px;
  background-image: url(clever.jpg);
}

<input type="image" src="daft.jpg" id="daft">