еще один вопрос про кнопки и события
начал изучать js, придумываю себе разные задания, возник вопрос:
как лучше организовать такую задумку? имеется набор картинок, которые подвязаны к определенной комбинации клавиш. нажимаем кнопку, или комбинацию кнопок, и получаем изображение. а как реализвать такой принцып: 1.нажимаем кнопку 1 картинка меняется на img1 2.нажимаем кнопку 2 картинка меняется на img2 3.нажимаем кнопку 1 картинка меняется на img3 4.нажимаем кнопку 78 картинка меняется на img4 итд то есть функцию с onclick не получится назначить каждой кнопке. проверять по id изображения какое сейчас, и какая кнопка нажата менять его? или создать массив с последовательностью кнопок, и как то отслеживать нажатия, но как тода быть с комбинациями кнопок? |
Цитата:
Цитата:
Цитата:
|
это пример если на странице имеется 1 картинка
<input type="button" value="button1" onclick="NextImg();"> <input type="button" value="button2" onclick="NextImg();"> <input type="button" value="button3" onclick="NextImg();"> <input type="button" value="button4" onclick="NextImg();">
var img_num = 1;
function NextImg(){
document.getElementsByTagName('img')[0].src = "../images/img"+img_num+".png";
img_num++;
}
|
по поводу картинок, можно создать массив, или просто переменные.
кнопки: <input type="button" id="1" value="1" > изображение получаем одно. то есть имея определенные комбинации кнопок выводить изображения. грубо говоря есть 5 изображений. 10 кнопок как хочу выводить: 1кнопка-изображение 2 3кнопка-изображение 3 4кнопка-изображение 2 55кнопка-изображение 1 3кнопка-изображение4 76кнопка-изображение 5 4кнопка-изображение 2 как такое можно реализовать? |
Цитата:
.... <input type="button" id="4" value="button4" onclick="NextImg(this);"> ....
var img_arr = [1,2,3,2,1,4,5,2];
function NextImg(el){
id = el.id;
if(img_arr[id] !== undefined){
document.getElementsByTagName('img')[0].src = "../images/img"+img_arr[id]+".png";
}
}
|
Ребята, вопрос не по сабжу, но тоже про кнопки.
Возникла проблема с кнопкой, а именно: после вызова функции js, нужной кнопке "Уже в корзине" присваивается стиль display:inline; хотя css правилом в классе .button-css-blue определено block, переопределение стиля вызывает проблемы с правильным отображением кнопки "Уже в корзине". Для наглядности код: <p class="buy-block-button"><a href="#" class="button-css-green" onclick="return false">Купить!</a></p> <p class="buy-block-button"><a href="#" class="button-css-blue">Уже в корзине</a></p>
.buy-block-button .button-css-blue{
display:none;
margin:5px 0 0 0;
font-size:.78em;
font-weight:bold;
}
$(function(){
$(".buy-block-button .button-css-green").on("click", function(){
$(".buy-block-button .button-css-green").hide();
$(".buy-block-button .button-css-blue").show();
});
});
Скрипт js работает в связке с библиотекой jquery 1.8.3. Попробовал переопределить стиль через html: <p class="buy-block-button"><a href="#" class="button-css-blue" style="display:none;">Уже в корзине</a></p> A в css удалил правило display:none; Но все равно после вызова функции js кнопка съезжает в сторону, хотя уже и выглядит как блочный элемент. Подскажите, пожалуйста, где тут проблема? |
Цитата:
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
var o={
1: 2,
3: 3,
4: 2,
55: 1,
3: 4,
76: 5,
4: 2
}
var a=[
'изображение 1',
'изображение 2',
'изображение 3',
'изображение 4',
'изображение 5',
];
function go(Id) {
alert(a[o[Id]-1]);
};
</script>
</head>
<body>
<input type="button" id='3' value="Test 3" onclick="go(this.id);" />
<input type="button" id='55' value="Test 55" onclick="go(this.id);" />
</body>
</html>
|
Цитата:
Цитата:
Perumov, пример нормальный сделай... |
ksa,
.buy-block-button .button-css-blue - это переопределение правил для конкретного вложенного блока, в основном правиле я указывал block, не посчитал нужным выкладывать все css правила (они не влияли на проблему). Но я уже разобрался в проблеме, спасибо. В этом правиле margin:5px 0 0 0; я добавил левый отрицательный отступ на то расстояние, на которое съезжала кнопка после вызова функции js и все стало красиво. Все равно спасибо! Отдельное спасибо за минус в карму)) |
Цитата:
|
В прошлом посте я не правильно выразился, это было не переопределение правил, а назначение новых для конкретного случая (в правилах .button-css-blue нет внешних отступов), поэтому в css не было конфликтов. Конфликт создавала библиотека jquery, поэтому после задания отрицательного отступа все сало красиво...
Кнопочка замечательно меняется, осталось только подумать как на это событие еще повесить модальное окно... |
Цитата:
55-два раза нажать на кнопку 5 а выводить изображения я хочу в <img src="изображение.jpg" id="img"> |
Цитата:
|
Цитата:
как я понимаю последовательность изображений можно поместить в массив, только вот как их вызывать из него, если не использовать комбинации (к примеру: нажать 7 и 6 и изображение меняется), то более менее понятно, а так...:( |
f0rzik,
Делают либо кнопку смены слкдующий/предыдущий по кругу, бывают добавляют строчку микро массив кружков/квадратов, нажатие на которые открывает изо, выделяя открытый кружок/квадрат цветом ********* |
а есть возможность передать одной переменной два значениея id (document.getElementById('5') и document.getElementById('5')) а потом их использовать?
и создать массив с изображениями в нужном для вывода порядке, и выводить их если условие совпадает? |
| Часовой пояс GMT +3, время: 16:27. |