Замените управляемую javascript кнопку с изображением

Question

Я использую javascript для управления кнопкой для 3d-карусели и пытаюсь использовать изображение вместо кнопки. Мой HTML выглядит следующим образом:

<button id="previous" data-increment="-1" >Previous</button> 
    <button id="next" data-increment="1">Next</button> 

Я попытался очевидным, добавив IMG тег, где «Next» и «Назад», являются:

<button id="previous" data-increment="-1" ><img src="URL" /></button> 

Это сделало изображения появляются, но при нажатии они ничего не делают. Я также попытался изменить его с помощью CSS и изменить стиль кнопок, но одинаковые изображения не появятся для обеих кнопок. Мне нужны отдельные изображения для следующих и предыдущих:

button { 
background-image: url(images/myimage.png); 
background-repeat: no-repeat; 
height: 50px; 
width: 200px; 
border: none; 
} 

button span { 
display: none; 
} 

Любые идеи о том, почему это не работает?

Answer 1

Здесь несколько вещей не так.

1. В ваших кнопках нет элемента span. button span стиль ничего не делает для вас. Если вы хотите скрыть текст, я предлагаю использовать color: transparent;.

2. Для каждой кнопки необходимо применить другое изображение, что означает, что вам нужны разные селекторы.

   кнопка # предыдущий { background-image: url ('prev.jpg'); }

   button # next { background-image: url ('next.jpg'); }

3. Как правило, применение стилей к кнопке не влияет на слушателей, добавленных в js. Что-то должно быть неправильно в вашем js, если кнопки больше не работают. Если вам нужна помощь, отправьте соответствующий код.