SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question changing image src on button click

    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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <div class="islerimiz">
        	<img id="icerikPic1" src="imajlar/ISLERGORSELLER/1/1-bilgiler.png" alt="islerimizTanım"/>
        </div>

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

    Code:
    <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. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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.

    Code JavaScript:
    <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. #5
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •