#javascript #jquery #html
#javascript #jquery #HTML
Вопрос:
У меня есть веб-страница, на которой мне нужно создать кнопку, которая будет переключать отображаемое изображение, изображение представляет собой схему здания, поэтому мне понадобится кнопка для выбора между уровнями, уровнем 1, 2 и т. Д…
Кроме того, мне нужна кнопка, которая будет переключать другое изображение относительно текущего изображения, отображаемого на странице, это изображение будет переключать некоторые дополнительные детали внутри изображения, но кнопка должна только ссылаться на другой файл изображения, чтобы не было драмы.
Любая помощь будет оценена, поскольку я безуспешно следовал нескольким идеям.
Я думаю, что javascript будет проще для этого проекта.
Еще раз спасибо.
Комментарии:
1. «кроме того, мне нужна кнопка, которая будет переключать другое изображение относительно текущего изображения, отображаемого на странице, это изображение будет переключать некоторые дополнительные детали внутри изображения, но кнопка должна ссылаться только на другой файл изображения» Можете ли вы указать
html,css,javascriptчто вы пытались решить проблему в вопросе?2. Вы правы — Javascript, безусловно, был бы правильным выбором, но вопрос слишком широкий
3. я следил за несколькими идеями здесь — что вы пробовали? безуспешно — что произошло и как это не то, что вы хотите?
4. Я, честно говоря, не могу сказать по вашему описанию, что именно вам нужно. Кнопка прокручивает уровни, как карусель? Дополнительные детали? Вы хотя бы нарисовали простую картинку того, как вы хотите, чтобы этот пользовательский интерфейс выглядел и работал? Возьмите что-нибудь вроде Balsamiq, набросайте свою идею, откройте js fiddle и попытайтесь запустить somethign.
5. я немного нарисую что-нибудь для вас, но в основном подумайте об изображении на странице с переключателем под ним, который при нажатии выбирает другой источник изображения. Я смог изменить изображение щелчком мыши, но не с помощью внешней кнопки
Ответ №1:
Я думаю, что самый простой способ для новичка — использовать этот метод:
Например, у вас есть папка с изображениями. И у вас есть страница с одним изображением, которое вы хотите переключить, и кнопка, которая будет переключать его.
Это не функциональный пример, но он может дать вам представление:
HTML:
<img src="img/img01.jpg">
<button id="toggler"></button>
JS:
var button = document.querySelector('#toggler');
button.onclick = function(){
var img = document.querySelector('img');
img.src = "new img url"
}
Теперь, jQuery может быть более простым способом для вас сделать это, но он не сильно отличается от этого примера.
Комментарии:
1. Спасибо за помощь jsfiddle.net/0s2nuLhc/4 это то, что у меня есть до сих пор, я знаю, что это очень грубо, есть ли способ объединить функции вместе?
2. @RobertLee Как вы хотите вложить их? Какого эффекта вы хотите добиться? Вы можете сделать все это всего лишь 1 кнопкой и 1 функцией. Я предоставлю больше информации, когда вернусь.
3. мне нужно иметь отдельную кнопку для каждого отдельного изображения, если для каждой кнопки и img src требуется новая функция, я доволен этим. Хотя, переходя к моей следующей части, мне каким-то образом нужно иметь возможность переключать отображение другого изображения, связанного с тем, какое изображение в данный момент отображается на странице, т.е. У каждого отображаемого изображения есть другое изображение, которое идет с ним, это новое изображение займет место на одномэто было на экране. Извините, если это запутанный вопрос, мои знания обо всем этом очень минимальны
4. Понятно, хорошо, я предоставлю codepen / jsfiddle после обеда
5. Обновление это то, что у меня есть до сих пор jsfiddle.net/0s2nuLhc/23 хотя моя функция «кнопка 4» не работает, предполагается, что эта функция изменяет изображение относительно другого на странице