CODEWITHSUNDEEP
javascripthtmlcss
Phil
Phil

Reputation: 65

HTML/JS Replace image on navbar click

I would like to replace an image at every click on the nav bar items.

Basically, I'm trying to get the same navbar behaviour as on that website : http://jjhale.com/

This is what I've done so far :

The HTML file :

<html lang="en">
    <head>
        <meta charset="utf-8" />       
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
        <link rel="stylesheet" type="text/css" href="StyleSheet.css" />
        <script src="scripts/jquery-1.11.3.min.js"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
        <!--JS Scripts-->
        <script src="scripts/onClick.js"></script>        

        <title>Title</title>
    </head>
    <body>
        <div id="page-container">
            <div id="header">
                <h1><a id="name" href="Link_1.html">Test</a></h1>
            </div>
            <div id="slides-zone">
                <img id="image" src="images/1.jpg" alt="1" />
            </div>
            <nav class="navbar navbar-inverse">
                <div class="container-fluid">
                    <ul class="nav navbar-nav">
                        <li class="selected"><a href="Link_1.html" onclick="testFunction();">Link 1</a></li>
                        <li><a href="Link_2.html">Link 2</a></li> 
                    </ul>
                </div>
            </nav>        
        </div>

    </body>
</html>

And my script that is supposed to replace images when any nav item is clicked :

var testFunction = function () {

    var element = document.getElementById('slides-zone');
    var img_to_replace = document.getElementById('image');

    var new_img = document.createElement("img");
    new_img.setAttribute('src', 'images/2.jpeg');
    new_img.setAttribute('alt', 'image_2');
    new_img.setAttribute('id', 'image')
    element.replaceChild(new_img, img_to_replace);

    return true;
}

I would like to have a solution/any info with Javascript only if possible, I prefer not using any framework.

Thanks in advance

Upvotes: 0

Views: 979

Answers (2)

Rachel Gallen
Rachel Gallen

Reputation: 28563

Here's my attempt

body {
  background-color: #000;
}
img {
  width: 800px;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
}
#slides-zone {
  width: 800px;
  height: 400px;
  overflow: hidden;
}
<script>
  function pictureChange() {
    document.getElementById("theImage").src = "http://www.musicmatters.ie/images/volunteer2.jpg";
  }

  function pictureChange2() {
    document.getElementById("theImage").src = "http://www.musicmatters.ie/images/bara4.jpg";
  }
</script>

<body>
  <div id="page-container">
    <div id="header">
      <h1><a id="name" href="#">Test</a></h1>
    </div>
    <div id="slides-zone">
      <img id="theImage" src="http://www.musicmatters.ie/images/bara2.jpg" />
      <img id="theImage" src="http://www.musicmatters.ie/images/bara4.jpg" />
    </div>
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <ul class="nav navbar-nav">
          <li class="selected" onclick="pictureChange();"><a href="#">Link 1</a>
          </li>
          <li onclick="pictureChange2();"><a href="#">Link 2</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>

</body>

EDIT: A few lines of jquery would be able to make you toggle the images easily

      $(function(){
  $(".img-swap").live('click', function() {
    if ($(this).attr("class") == "img-swap") {
      this.src = this.src.replace("_off","_on");
    } else {
      this.src = this.src.replace("_on","_off");
    }
    $(this).toggleClass("on");
  });
});

and just name your files xyz_off.jpg and xyz_on.jpg etc...

Upvotes: 2

WhiteHat
WhiteHat

Reputation: 61222

Using onclick on an anchor tag is a little tricky. Try changing to this...

<a href="#" onclick="testFunction();">Link 1</a>

and the JavaScript to...

return false;

instead of

return true;

Upvotes: 2

Related Questions