CODEWITHSUNDEEP
javascripthtmlcssbutton
isk27
isk27

Reputation: 359

I want buttons that shows certain types of images on html

I want to create a portfolio, but I'm having troubles with the buttons to show the images..

I don't know why it doesn't have the bottom line, and I want to set height of the boxes.

This is my code

    function showImg()
{
var obj=document.getElementById('Picture1');
obj.className = 'show';
}
.button{
  padding: 15px;
  padding-bottom: 40px;
  width: 40%;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
}

.button .show{display:block;}
.button .hide{display:none;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="button">
       
        <img id="all" src="Picture1.jpg" class="hide flex-item"/>
        <input type="button" onclick = "showImg()" value= "ALL">
  
        <img id="diseño" src="Picture1.jpg" class="hide flex-item">
        <input type="button" onclick = "showImg()" value= "DESIGN">
  
        <img id="web" src="Picture1.jpg" class="hide flex-item">
        <input type="button" onclick = "showImg()" value= "WEB">
   
        <img id="media" src="Picture1.jpg" class="hide flex-item">
        <input type="button" onclick = "showImg()" value= "MEDIA"> 
             
    </div>

Upvotes: 0

Views: 66

Answers (2)

ab29007
ab29007

Reputation: 7766

Try this. Now it works perfect. but it uses some jquery. let me know if you are not using it and not feeling good about jquery and I'll write the code in javascript.

$(document).ready(function(){
  
  $('input:button').click(function(){
    if($('img').hasClass("show")){
     $('img').removeClass("show","hide").addClass("hide");
     }
   var  parentGet =$(this).attr("value");
    parentGet = "img#"+parentGet.toLowerCase(); $(parentGet).addClass("show").removeClass("hide");
  });
});
.button{
  padding: 15px;
  padding-bottom: 40px;
  width: 40%;
  position:relative;
  margin: auto;
/*   display: flex; */
/*   flex-direction: row; */
  justify-content: center;
/*     display: -webkit-box; */
/*     display: -moz-box; */
/*     display: -ms-flexbox; */
/*     display: -webkit-flex; */
}
.button img{
  width:300px;
  position:absolute;
  top:50px;
}

.button .show{display:block;}
.button .hide{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
       
        <img id="all" src="https://i.ytimg.com/vi/vbm4-AyA86o/hqdefault.jpg" class="hide flex-item"/>
        <input type="button" value= "ALL">
  
        <img id="design" src="http://res.cloudinary.com/cargaze/image/upload/v1479932866/KTM-RC390-2016_ssv5c8.jpg" class="hide flex-item">
        <input type="button" value= "DESIGN">
  
        <img id="web" src="https://media.zigcdn.com/media/content/2016/Feb/bike-of-the-year-pulsar-rs200-m_720x540.jpg" class="hide flex-item">
        <input type="button" value= "WEB">
   
        <img id="media" src="https://media.zigcdn.com/media/content/2015/Dec/new-bike-2016-pic-image-photo-hero-hx250r-30122015-m1_720x540.jpg" class="hide flex-item">
        <input type="button" value= "MEDIA"> 
             
    </div>

Upvotes: 0

Benneb10
Benneb10

Reputation: 1489

You aren't calling the correct id before you change the classname. I suggest the following!

function showImg(imageID) {
   if(document.getElementById(imageID).className !== "show"){
      document.getElementById(imageID).className = "show"
   } else {
      document.getElementById(imageID).className = "hide"
    }
}

And call them like this

<img id="all" src="Picture1.jpg" class="hide flex-item"/>
<input type="button" onclick = "showImg('all')" value= "ALL">

Also unless your inputs are in a form I think this is best practice.

<button type="button" onclick = "showImg('all')" value= "ALL">

The result would look like this:

function showImg(imageID) {
   if(document.getElementById(imageID).className !== "show"){
      document.getElementById(imageID).className = "show"
   } else {
      document.getElementById(imageID).className = "hide"
    }
}
.button{
  padding: 15px;
  padding-bottom: 40px;
  width: 40%;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
}

.button .show{display:block;}
.button .hide{display:none;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="button">
       
        <img id="all" src="Picture1.jpg" class="hide flex-item"/>
        <input type="button" onclick = "showImg('all')" value= "ALL">
  
        <img id="diseño" src="Picture1.jpg" class="hide flex-item">
        <input type="button" onclick = "showImg('diseño')" value= "DESIGN">
  
        <img id="web" src="Picture1.jpg" class="hide flex-item">
        <input type="button" onclick = "showImg('web')" value= "WEB">
   
        <img id="media" src="Picture1.jpg" class="hide flex-item">
        <input type="button" onclick = "showImg('media')" value= "MEDIA"> 
</div>

Upvotes: 1

Related Questions