Doubt about my javascript linked with html

Question

Doubt about my javascript linked with html

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Good morning everyone,

I'm trying to make a menu which when clicking the "label" label changes the src of the image to another one by way of "check", I explain: My intention is that when I click the icon illuminates me, and when clicking the icon again, I get more grayish (I have these icons in images the two versions) and I only get it to light up but it does not return to the previous state.

function Cambio(){
    var id = document.getElementById().getAttribute('id');
    
    
    switch(id){
    case id == "imgJuegos":
    
    if (document.getElementById('imgJuegos').src == 'img/juegos.png'){
    document.getElementById('imgJuegos').src ='img/bjuegos.png';
    		}
    
    if (document.getElementById('imgJuegos').src == 'img/bjuegos.png'){
    document.getElementById('imgJuegos').src ='img/juegos.png';
    		}
    }

<label class="label-checkbox item-content obicus" style="margin-left:25%;" onclick="Cambio();">
<input type="checkbox" name="ks-radio" value="Books" >
<div class="item-media">
          <img style="height:24px; width:24px;" id="imgDj" src="img/bdj.png" >
        </div>

<div class="item-inner">
<div class="item-title"></div>
</div>
</label>

javascript jquery html5 html css

asked by J. Gone 12.09.2017 в 12:03

source

2 answers

Click on control within iframe with Jquery or JavaScript Spring Security Logout does not work

score 0 · Answer 1

Well, there I make you an effect with a div, you have comments on what I'm doing in the same code so that you understand it, since I see that you like the effects, using only Javacript

/* Imágenes */
var imagenes = {
  imagen1: "https://vignette3.wikia.nocookie.net/universosteven/images/4/4b/Circular_Quartz_Fusion_Gem-0.png/revision/latest?cb=20160815020913&path-prefix=es",
  imagen2: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwg3PByXSW9HXmU8u8wwt_uNS5gYsuvuOvXrnyta8OqGo39N7O"
};
/* Elementos necesarios */

/* Div */ var div = document.getElementById("cambiame");
/* Elemento IMG */ var mg = document.getElementById("imgg");

/* Evento al pasar mouse encima */
div.addEventListener("mouseover",cambiar); /* Al pasar el mouse por encima ejecuta la función cambiar */
div.addEventListener("mouseleave",original) /* Al sacar el mouse de encima ejecuta la función original */
function cambiar(){
  mg.src = imagenes.imagen1;
  mg.style.boxShadow = "0px 0px 40px 6px yellow"; // Color
  mg.style.transform = "scale(1.2)"; // Efecto agrandar
  mg.style.transition = "all 2s"; // Cuanto demorará en agrandar
}
function original(){
  mg.src = imagenes.imagen2; // Esta imagén es la original y al sacar el mouse de encima del div, vuelve el fondo a esta imágen.
  mg.style.boxShadow = "0px 0px 0px 0px dimgray"; // Saco color
  mg.style.transform = "scale(1)"; // Volver tamaño original
  mg.style.transition = "all 2s"; // Cuanto demorará en volver al tamaño
}

#cambiame{
  width:300px;
  height:300px;
  border-radius:150px;
  position:absolute;
  top:20%;
  left:20%;
  background-color:dimgray;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="cambiame">
    <img width="100%" height="100%" style="border-radius:150px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwg3PByXSW9HXmU8u8wwt_uNS5gYsuvuOvXrnyta8OqGo39N7O" id="imgg"/>
  </div>
</body>
</html>

score 0 · Answer 2

Play with the classes. In my case if yes, change to no and I will modify the src. If it is not change to yes and the same, I modify the src.

Remember to delete the class before adding another, or you will have both.

$("#imagen").click(function(){
    $(this).toggleClass( "no" );
    $(".si").attr("src","http://www.i2clipart.com/cliparts/9/3/a/f/clipart-green-tick-93af.png"); 
    $(".no").attr("src","http://www.i2clipart.com/cliparts/8/9/e/0/clipart-red-cross-89e0.png");    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://www.i2clipart.com/cliparts/9/3/a/f/clipart-green-tick-93af.png" id="imagen" class="si">