Changing image src on button click

JavaScript
1

hi.

i have a website like:this

i want to change the sources of images,which stays on the white panel,at every click of the grey buttons at the bottom.i did this with switch case but it does this only one click.another clicks they don’t.i want to identify only one image tag and change the source according to button.i mean only the xxx part will change according to index comes from button:imajlar/ISLERGORSELLER/xxx/xxx-bilgiler.png

i don’t know can i explain my problem.how can i do this?

2

Hi there,

I’m afraid I didn’t quite get what you want to do.
You have a slider and when you click on the grey buttons at the bottom, the image changes.
This appears to be working fine.

What is it apart from that that you want to happen?

3

i want to do that on islerimiz page,when i every click on grey buttons on bottom,the article appearing on the blurred panel on left side will be change according to its releated picture.

i mean:


<div class="islerimiz">
    	<img id="icerikPic1" src="imajlar/ISLERGORSELLER/1/1-bilgiler.png" alt="islerimizTan&#305;m"/>
    </div>

i want to change src of this img tag when i click on:


<ul class="ei-slider-thumbs">
                        <li class="ei-slider-element">Current</li>
                        <li><a href="#" >Slide 1</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel1.gif" alt="thumb01" /></li>
                        <li><a href="#" >Slide 2</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel2.gif" alt="thumb02" /></li>
                        <li><a href="#" >Slide 3</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel3.gif" alt="thumb03" /></li>
                        <li><a href="#" >Slide 4</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel4.gif" alt="thumb04" /></li>
                        <li><a href="#" >Slide 5</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel5.gif" alt="thumb05" /></li>
                        <li><a href="#" >Slide 6</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel6.gif" alt="thumb06" /></li>
                        <li><a href="#">Slide 7</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel7.gif" alt="thumb07" /></li>
                        <li><a href="#">Slide 8</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel8.gif" alt="thumb08" /></li>
                        <li><a href="#">Slide 9</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel9.gif" alt="thumb09" /></li>
                        <li><a href="#">Slide 10</a><img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel10.gif" alt="thumb10" /></li>
                    </ul>

every a tags of this list items.and the src of the img inside islerimiz div change according to its src.for example if the page was 1st picture and user clicks 4th picture link,the src of img tag inside of div will be:imajlar/ISLERGORSELLER/4/4-bilgiler.png

then while picture seen on the picture was 5th picture and then when user click 10th picture,the src of img tag inside div tag will be: imajlar/ISLERGORSELLER/10/10-bilgiler.png

thats the problem i want to solve.

4

Hi there,

Sorry for the delayed reply, I was on vacation.

Anyway, it seems that you have got your problem solved now.

I did have one suggestion, namely that it might be a better idea to store the names of the images to swap out in the blurred panel on the corresponding button, as a data attribute, for example.

<li data-panel-image="10-bilgiler.png">
  <a href="#">Slide 10</a>
  <img src="imajlar/ISLERGORSELLER/islergorsellerkucuk/isler_gorsel10.gif" alt="thumb10"/>
</li>

This will provide for more flexibility in the future.

5

yes.somebody helped me to solve this:)
i did something to solve but i used right things on wrong places:)
i will keep in mind your suggestion.
danke schon.