According to the button 1 image is shown

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP


According to the button 1 image is shown



Well, as the title says I want an image to be shown, the issue is that I have several buttons and each one has to show a different image, I have a function that when clicked shows the image that corresponds to each button, the theme is that I need the previous image to be hidden



and I also need some advice or a guide to do a doubleclick function, keep the id and it is shown in a text



here I leave html, css and the small function that I did .. clearly everything can be improved but I'm
I'm using javascript, but I also believe that there is a way by jquery



html


<!DOCTYPE html>









/.general {display: none;}/


<body>
<div class="full-screen">
<div class="general">
<div class="contain1">

<button class="boxsmall" id="bate">
<div class="icon">
<img src="img/melee/Bate.png">
</div>
</button>

<button class="boxsmall" id="botella">
<div class="icon" >
<img src="img/melee/Botella.png">
</div>
</button>

<button class="boxsmall" id="cuchillo">
<div class="icon">
<img src="img/melee/Cuchillo.png">
</div>
</button>

<button class="boxsmall" id="machete">
<div class="icon">
<img src="img/melee/Machete.png">
</div>
</button>

<button class="boxsmall" id="punoAmericano">
<div class="icon">
<img src="img/melee/PunoAmericano.png">
</div>
</button>
<button class="boxsmall" id="boxsmall">
<div class="icon">
<img src="img/melee/Martillo.png">
</div>
</button>
<button class="boxsmall" id="boxsmall">
<div class="icon">
<img src="img/melee/Navaja.png">
</div>
</button>
<button class="boxsmall" id="boxsmall">
<div class="icon">
<img src="img/melee/Palanca.png">
</div>
</button>
<button class="boxsmall" id="boxsmall">
<div class="icon">
<img src="img/melee/PaloGolf.png">
</div>
</button>
<button class="boxsmall" id="boxsmall">
<div class="icon">
<img src="img/melee/Punal.png">
</div>
</button>


</div>

<div class="contain2">

<button class="boxsmall" id="pistol" onclick="showimage('statsPistol')">
<div class="icon-p">
<img src="img/pistolas/Pistol-icon.png">
</div>
<div id="statsPistol">
</div>
</button>

<button class="boxsmall" id="pistol_mk2" onclick="showimage('statsPistolmk2')">
<div class="icon-p">
<img src="img/pistolas/Pistol-mk2-icon.png">
</div>
<div id="statsPistolmk2">
</div>
</button>

<button class="boxsmall" id="combatpistol">
<div class="icon-p">
<img src="img/pistolas/Combat-pistol-icon.png">
</div>
</button>

<button class="boxsmall" id="appistol">
<div class="icon-p">
<img src="img/pistolas/Appistol-icon.png">
</div>
</button>

<button class="boxsmall" id="pistol50">
<div class="icon-p">
<img src="img/pistolas/Pistol.50-icon.png">
</div>
</button>

<button class="boxsmall" id="snspistol">
<div class="icon-p">
<img src="img/pistolas/Sns-pistol-icon.png">
</div>
</button>

<button class="boxsmall" id="snspistol_mk2">
<div class="icon-p">
<img src="img/pistolas/Sns-pistol-mk2-icon.png">
</div>
</button>

<button class="boxsmall" id="heavypistol">
<div class="icon-p">
<img src="img/pistolas/Heavy-pistol-icon.png">
</div>
</button>

<button class="boxsmall" id="vintagepistol">
<div class="icon-p">
<img src="img/pistolas/Vintage-pistol-icon.png">
</div>
</button>

<button class="boxsmall" id="marksmanpistol">
<div class="icon-p">
<img src="img/pistolas/164px-Marksman-pistol-icon.png">
</div>
</button>

<button class="boxsmall" id="revolver">
<div class="icon-p">
<img src="img/pistolas/Heavy-revolver-icon.png">
</div>
</button>

<button class="boxsmall" id="revolver_mk2">
<div class="icon-p">
<img src="img/pistolas/Heavy-revolver-mk2-icon.png">
</div>
</button>

<button class="boxsmall" id="doubleaction">
<div class="icon-p">
<img src="img/pistolas/Double-action-revolver-icon.png">
</div>
</button>

</div>
<button class="styletext" id="comprar">Comprar</button>
<button class="styletext" id="salir">Salir</button>
</div>
</div>
</body>





js



function showimage(id) {
var element = document.getElementById(id);


if (element.classList) {
element.classList.toggle(id);
} else {
var classes = element.className.split(" ");
var i = classes.indexOf(id);

if (i >= 0)
classes.splice(i, 1);
else
classes.push(id);
element.className = classes.join(" ");
}



}



css


html {
overflow: ;
}

.background{
filter: blur(5px);
-webkit-filter: blur(5px);
width: 100%;
height: 100%
}

@font-face {
font-family: 'avenir';
src: url(../fonts/Avenir Next Heavy.otf)
}

@font-face {
font-family: 'Avenir Next LT Pro Heavy Condensed Italic';
font-style: normal;
font-weight: normal;
src: url(../fonts/AvenirNextLTPro-HeavyCnIt.woff) format('woff');
}

.general{
background-image: url(../img/miSlJSc.png);
position : absolute ;
top: 0%;
left: -1%;
width : 1584px;
height : 900px;
}

.contain1{
background: rgba(0,0,0,0.0);
position: absolute;
left: 100px;
top: 258px;
width: 1048px;
height: 254px
}

.contain2{
background: rgba(0,0,0,0.0);
position: absolute;
left: 100px;
top: 526px;
width: 1048px;
height: 254px;
}

button{
background : #005F38;
background : rgba(0, 95, 56, 1);
border-style : Solid;
border-color : #112302;
border-color : rgba(17, 35, 2, 1);
border-width : 1px;
position : absolute ;
left : 439px;
top : 822px;
width : 359px;
height : 60px;
border-radius : 7px;
-moz-border-radius : 7px;
-webkit-border-radius : 7px
}
#comprar {
left: 1185px
}
.styletext
{
font-family : Avenir Next LT Pro Heavy Condensed Italic;
font-size : 40px;
color : #FCFCFC;
color : rgb(252, 252, 252);
}
.boxsmall{
background : #000000;
background : rgba(0, 0, 0, 0.3);
position : relative;
top: -14px;
left: 0px;
width : 117px;
height : 120px;
margin-left: 10px;
margin-top: 14px;
border-width : 0px;
-moz-border-radius : 0px;
-webkit-border-radius : 0px
}
.boxbig{
background : rgba(0, 0, 0, 0.3);
position : relative;
left : 0%;
top : -5%;
width : 249px;
height : 120px;
margin-left: 10px;
margin-top: 14px;
border-width : 0px;
-moz-border-radius : 0px;
-webkit-border-radius : 0px
}

.boxsellect
{
background : #000000;
background : rgba(0, 0, 0, 1);
opacity : 0.65;
position : absolute ;
left : 898px;
top : 526px;
width : 249px;
height : 120px
}
.icon *{
position: relative;
top: 0px;
left: -15px;
width: 135px;
height: 33px;
transform: rotate(315deg)
}

#botella .icon *{
width: 130px;
height: 35px
}

#punoAmericano .icon *{
width: 70px;
height: 35px;
left: 0px
}
.icon-p *{
left: -10px;
width: 92px;
height: 72px;

}

#pistol_mk2 .icon-p {
transform: scale(1.0,1.0);
left: -20px;
}





.statsPistol{
width: 100%;
padding: 70px 105px;
background-image: url(../img/pistolas/Stats_pistola.png);
position: absolute;
top: -270px;
left: 1090px

}

.statsPistolmk2{
width: 100%;
padding: 70px 105px;
background-image: url(../img/pistolas/Stats_PistolMKII.png);
position: absolute;
top: -270px;
left: 1090px
}









By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

Makefile test if variable is not empty

Will Oldham

Visual Studio Code: How to configure includePath for better IntelliSense results