イメージをボタンとして使用する方法は？

Question

FIDDLE

これは画像の背後にあるボタンです。私はそのボタンを削除したい。そして、あなたがページを送信したくない場合は、クリックイベントでのpreventDefault（）にする必要がありますボタン

.buttonup { 
 
    padding: 0px; 
 
    width: 25px; 
 
    cursor: pointer; 
 
    margin-right: 25px; 
 
} 
 

 
.buttondw { 
 
    width: 25px; 
 
    cursor: pointer; 
 
    margin-left: 25px; 
 
} 
 

 
#count { 
 
    display: inline-block; 
 
    border-radius: 0px; 
 
    background-color: #ff9933; 
 
    border: none; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    font-size: 18px; 
 
    padding: 5px; 
 
    width: 50px; 
 
    margin-top: 0px; 
 
}

<center> 
 
    <button class="buttonup" id="plus" style="vertical-align:middle"><span><img src="http://i.imgur.com/jWPUjR9.png"> </span> </button> <span id="count">0</span> 
 
    <button class="buttondw" id="minus" style="vertical-align:middle"><span><img src="http://i.imgur.com/Vu6tuf9.png"> </span> </button> 
 
</center>

Answer 1

使用入力タイプ=「画像」

として画像を使用しますそれは

.buttonup { 
 
    padding: 0px; 
 
    width: 25px; 
 
    cursor: pointer; 
 
    margin-right: 25px; 
 
} 
 

 
.buttondw { 
 
    width: 25px; 
 
    cursor: pointer; 
 
    margin-left: 25px; 
 
} 
 

 
#count { 
 
    display: inline-block; 
 
    border-radius: 0px; 
 
    background-color: #ff9933; 
 
    border: none; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    font-size: 18px; 
 
    padding: 5px; 
 
    width: 50px; 
 
    margin-top: 0px; 
 
}

<center> 
 
    <input type="image" class="buttonup" id="plus" style="vertical-align:middle" src="http://i.imgur.com/jWPUjR9.png" /> <span id="count">0</span> 
 
    <input type="image" class="buttondw" id="minus" style="vertical-align:middle" src="http://i.imgur.com/Vu6tuf9.png" /> 
 
</center>

であり、またはフォーム

Answer 2

変更いくつかのCSSを

.buttonup { 
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0; 
    border: 0 none; 
    cursor: pointer; 
    padding: 0; 
    width: 45px; 
} 


.buttondw { 
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0; 
    border: 0 none; 
    cursor: pointer; 
    padding: 0; 
    width: 45px; 
} 

https://fiddle.jshell.net/g6Lhurae/25/

Answer 3

これを試してみてください：

.buttonup { 
    padding: 0px; 
    text-align: center; 
    width: 50px; 
    cursor: pointer; 
    margin-right: 10px; 
    border:none; 
    background:none; 
} 


.buttondw { 
    width: 50px; 
    text-align: center; 
    cursor: pointer; 
    margin-left: 5px; 
    border:none; 
    background:none; 
} 

Answer 4

あなたが実際に非常に近い、ジュスト背景の追加：なしとの国境：あなたのクラスでなし：

を

.buttonup { 
    padding: 0px; 
    width: 25px; 
    cursor: pointer; 
    margin-right: 25px; 
    background:none; 
    border:none; 
} 

Answer 5

tip：donあなたのhtmlにcenterタグを使用しないでください。これは非推奨であり、html5ではサポートされていません。 （これは疑問ではないが、指摘すべきだと思う）。

だから、あなたは、「背景画像（URLでのdivを作ることができます

var counter = 0, // Try change this what ever you want 
 
    votePlus = counter + 1, 
 
    voteMinus = counter - 1; 
 

 
function checkIfUserVoted() { 
 
    return localStorage.getItem("voted"); 
 
} 
 
if (!localStorage.getItem("voted")) { 
 
    localStorage.setItem("voted", counter); 
 
    $("#count").text(counter); 
 
} 
 
$(".buttonup").click(function() { 
 
    var vote = checkIfUserVoted() != votePlus ? votePlus : counter; 
 
    localStorage.setItem("voted", vote); 
 
    $(this).next().text(vote); 
 
}); 
 
$(".buttondw").on('click', function() { 
 
    var vote = checkIfUserVoted() != voteMinus ? voteMinus : counter; 
 
    localStorage.setItem("voted", vote); 
 
    $(this).prev().text(vote); 
 
});

#buttons{margin-left: 35%; margin-right:35%;} 
 
.buttonup { 
 
    padding: 0px; 
 
    width: 25px; 
 
    cursor: pointer; 
 
    margin-right: 25px; 
 
} 
 
.buttondw { 
 
    width: 25px; 
 
    cursor: pointer; 
 
    margin-left: 25px; 
 
} 
 

 
#count { 
 
    display: inline-block; 
 
    border-radius: 0px; 
 
    background-color: #ff9933; 
 
    border: none; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    font-size: 18px; 
 
    padding: 5px; 
 
    width: 50px; 
 
    margin-top: 0px; 
 
} 
 

 

 
.buttondw { 
 
    width: 25px; 
 
    cursor: pointer; 
 
    margin-left: 25px; 
 
} 
 

 

 

 

 

 

 

 

 
#count { 
 
display: inline-block; 
 
    border-radius: 0px; 
 
    background-color: #ff9933; 
 
    border: none; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    font-size: 18px; 
 
    padding: 5px; 
 
    width: 50px; 
 
    margin-top: 0px; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="buttons"> 
 
<input type="image" class="buttonup" id="plus" style="vertical-align:middle" src="http://i.imgur.com/jWPUjR9.png" /> <span id="count">0</span> 
 
    <input type="image" class="buttondw" id="minus" style="vertical-align:middle" src="http://i.imgur.com/Vu6tuf9.png" /> 
 
     
 
</div>