Question

I’m currently creating some kind of slideshow.. It’s just a floorplan, so it shouldnt be neat looking. I’m using link numbers to specify floors. When clicked on one of the links, the corresponding floor image will be shown.

Below the code I currently have.. but the src of the image doesn’t change on click.
What am I doing wrong?

Thanks!

        <div id="bovengedeelte">
        <img src="image1.png" id="plattegrond" width="300" height="300" alt="plattegrond" />
        </div>

        <div id="ondergedeelte">
        <script type="text/javascript">
        $("a.floor0").click(function(event){
          $("img.plattegrond").attr("src","floor0.png");
        });
            $("a.floor1").click(function(event){
          $("img.plattegrond").attr("src","floor1.png");
        });     
            $("a.floor2").click(function(event){
          $("img.plattegrond").attr("src","floor2.png");
        });     
        $("a.floor3").click(function(event){
          $("img.plattegrond").attr("src","floor3.png");
        });         
        $("a.floor4").click(function(event){
          $("img.plattegrond").attr("src","floor4.png");
        });         
        $("a.floor5").click(function(event){
          $("img.plattegrond").attr("src","floor5.png");
        });         </script>
        <p>Kies een verdieping</p>
        <a id="floor0" href="#">0</a><a id="floor1" href="#">1</a><a id="floor2" href="#">2</a><a id="floor3" href="#">3</a><a id="floor4" href="#">4</a><a id="floor5" href="#">5</a>
        </div>

**to everyone: It’s still not working after all your solutions. Thanks already! Can someone check the whole code and see what i’m doing wrong? :s

http://prototyping.iscs.nl/

**

Answer 1

All you need is this:

Fiddle demo

    <div id="bovengedeelte">
          <img src="image1.png" id="plattegrond" width="300" height="300" alt="plattegrond" />
    </div>

    <div id="ondergedeelte">

        <p>Kies een verdieping</p>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>

    </div>

jQ:

$(function(){ // document ready shorthand

    $('#ondergedeelte a').click(function( e ){
         e.preventDefault();
         var newImgUrl = 'floor'+ $(this).text() +'.png' ;
         $('#plattegrond').attr('src', newImgUrl );
    });

});