смена картинок по onclick

[sable_vrn]

Доброго времени суток. суть вопроса такова. Необходимо сделать категории для картинок в слайдере nivo.

вот предположим, что это кнопки категорий.

<div id=cont_main_menu>

<div class =menu_item_1><center><a href=".html" class="off1" onMouseOver="this.className='on1'" onMouseOut="this.className='off1'">Категория 1</a></center></div>

<div class =menu_item_2><center><a href=".html" class="off1" onMouseOver="this.className='on1'" onMouseOut="this.className='off1'">Категория 2</a></center></div>

<div class =menu_item_3><center><a href="" class="off1" onMouseOver="this.className='on1'" onMouseOut="this.className='off1'">Категория 3</a></center></div>

<div class =menu_item_4><center><a href="" class="off1" onMouseOver="this.className='on1'" onMouseOut="this.className='off1'">Категория 4</a></center></div>

</div>

а здесь задаются картинки в слайдере

<div id="slider">

<img src="images/main/4.jpg" alt="" />

<img src="images/main/3.jpg" alt="" />

<img src="images/main/1.jpg" alt="" />

<img src="images/main/2.jpg" alt="" />

</div>

собственно проблема в том, что не могу все это сделать в заданном языке.

если описать логику, то нужно так:

if radiobutton1:=checked then div id="slider".img src:=<"images/category1/1.jpg" alt="">

<"images/category1/2.jpg" alt="">

.......

<"images/category1/1.jpg" alt="">

if radiobutton2:=checked then div id="slider".img src:=<"images/category2/1.jpg" alt="">

<"images/category2/2.jpg" alt="">

.......

<"images/category2/1.jpg" alt="">

раскопки в гугле наталкивают на размышления о getElementById(), но надо чтоб носом ткнули.

[Great Rash]

Ничего не понятно. Выражайте мысли яснее.

[Быколай]

попробую протелепатить:

надо чтоб при выборе радиокнопке в слайдере менялись картинки?

PS: чистый js вообще не самый простой и короткий путь что-либо сделать.

[sable_vrn]

да, именно. Вы прирожденный телепат.

Необходимо сделать категории для картинок в слайдере nivo.

щелкаем на кнопку, и в слайдере показываются каритнки с 1 по 4.

кликаем на вторую кнопку - показываются картинки с 5 по 8. и т д.

[Быколай]

  On 3/22/2011 at 6:15 PM, sable_vrn said:

Необходимо сделать категории для картинок в слайдере nivo.

щелкаем на кнопку, и в слайдере показываются каритнки с 1 по 4.

кликаем на вторую кнопку - показываются картинки с 5 по 8. и т д.

ну, разбирайтесь с jquery значит, есть просто замечательная книга Бера Бибо и Иегуды Каца "подробное руководство по продвинутому javascript". В принципе, если облададать общими понятиями о структуре html и свойствах css, то держа её под рукой можно классные штуки реализовывать, и вашу задачу решить тоже, там всего несколько строчек кода-то и выйдет.

  Reveal hidden contents

скачать книгу можно тут. http://progbook.ru/ajax/866-bibo-jquery-podrobnoe-rukovodstvo-po-prodvinutomu.html

PS: с nivo незнаком. Так что могут возникнуть какие-то подводные камни и реализация оказаться не такой простой как показалось на первый взгляд. Хотя вряд ли

[sable_vrn]

да уж. спасибо. за полные и развернутые ответы

[Pumych]

Можно засунуть все картинки в один блок по, например, горизонтали, в CSS задать overflow: hidden; а на кнопки забиндить прокрутку по

document.getElementById( "ИД нашего дива" ).scrollLeft = число

если блоки каждой отдельной фотки одинаковые это решит проблему. Сам недавно использовал для скролера в галерее, правда не на одинаковые промежутки. Полагаю существуют и более логичные варианты.

[sable_vrn]

ну попробую еще понятней объяснить суть проблемы.

есть слайдер nivo. в html его картинки задаются через обычный img src. предположим что у меня их 4. и все они лежат в одно <div id="slider">, т.е <img src="1/1.jpg"</img>

<img src="1/2.jpg"</img> и.т.д

ниже этого блока менюшка из ссылок. 1,2,3,4.

вот нужно сделать чтобы: нажимаем на ссылку1. в блоке слайдера меняются пути img src, т.е стнаовится <img src="2/1.jpg"</img>

<img src="2/2.jpg"</img> и.т.д

вот как то так.

[Great Rash]

Что это за запись такая странная?

<img src="1/2.jpg"</img>

Вам нужен готовый код чтоль?

[sable_vrn]

  On 3/23/2011 at 8:10 AM, Great Rash said:

Что это за запись такая странная?

<img src="1/2.jpg"</img>

ну да, закрывашка лишняя.

Вам нужен готовый код чтоль?

если есть готовое решение, то хорошо, а если нет, нужно тыкнуть носом в то, как это сделать.

[Great Rash]

Итак, тыкаю носом:

Нужно написать функцию на JavaScript'е, которая будет менять src у соответствующей картинки в зависимости от переданного в функцию параметра. Что не понятно?

[sable_vrn]

  On 3/23/2011 at 11:21 AM, Great Rash said:

Итак, тыкаю носом:

Нужно написать функцию на JavaScript'е, которая будет менять src у соответствующей картинки в зависимости от переданного в функцию параметра. Что не понятно?

ну спасибо что не на гугл отправили.помогли.

[sable_vrn]

итак, решение уже рядом, но все равно чего-то не хватает. надеюсь поможете.

для начала повторюсь.

Есть слайдер nivo -привожу и его в нем происходит переключение картинок.

<script type="text/javascript">

$(window).load(function() {

$('#slider').nivoSlider({

effect:'random',

slices:15,

animSpeed:500,

pauseTime:1500,

startSlide:1,

directionNav:true,

directionNavHide:false,

controlNav:false,

controlNavThumbs:false,

controlNavThumbsSearch: '.jpg',

controlNavThumbsReplace: '_thumb.jpg',

keyboardNav:true,

pauseOnHover:true,

manualAdvance:false,

captionOpacity:0.8,

beforeChange: function(){},

afterChange: function(){},

slideshowEnd: function(){}

});

});

$("#change_img").click(function(){

var num_img_0 = '<img src="new_image_0.png" />';

var num_img_1 = '<img src="new_image_1.png" />';

var num_img_2 = '<img src="new_image_2.png" />';

var num_img_3 = '<img src="new_image_3.png" />';

if($("#slider").html() == num_img_0){

$("#slider").html(num_img_1);

}

if($("#slider").html() == num_img_1){

$("#slider").html(num_img_2);

}

if($("#slider").html() == num_img_2){

$("#slider").html(num_img_3);

}

if($("#slider").html() == num_img_3){

$("#slider").html(num_img_0);

}

});

</script> <div id="slider">

в html картинки задаются <div class="inner1"><img src="images/main/slide1.jpg" /></div>

<div class="inner2"><img src="images/main/slide2.jpg" /></div>

<div class="inner3"><img src="images/main/slide3.jpg" /></div>

<div class="inner4"><img src="images/main/slide4.jpg" /></div>

</div>

при нажатии на ссылку

<div class =menu_item_1><center><a href="#" class="link1">Классика</a></center></div> четыре картинки в слайде должны замениться на другие.

было решено применить функцию .html

В итоге имеем

<script type="text/javascript">

$(document).ready(function(){

$('a.link1').click(function() {

$('div.inner1')

.html('<img src="images/main/clas1.jpg" />');

$('div.inner2')

.html('<img src="images/main/clas2.jpg" />');

$('div.inner3')

.html('<img src="images/main/clas3.jpg" />');

$('div.inner4')

.html('<img src="images/main/clas4.jpg" />');

return false;

});

});

</script>

в принципе, замена происходит. , но есть недостаток.: перед каждым новым слайдом появляется последняя картинка.

в чем может быть проблема??? вот где посмотреть http://fratelli-art.ru/index_04.html

[Great Rash]

Проблема в том, что вы не знаете яваскрипта и тычетесь как слепой котенок. Вам надо менять не html у дива, а src у картинки.