According to the button 1 image is shown
Clash Royale CLAN TAG#URR8PPPAccording 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.
