2

tengo mi script asi:

var imagenes={"leon":'<img src="imagenes/leon.gif" width="200" height="200"/>',"burro":'<img src="imagenes/burro.gif"/>',
              "ballena":'<img src="imagenes/ballena.gif"/>',"gato":'<img src="imagenes/gato.gif"/>',
              "elefante":'<img src="imagenes/elefante.gif"/>',"pato":'<img src="imagenes/pato.gif"/>',
              "hiena":'<img src="imagenes/hiena.gif"/>',"grillo":'<img src="imagenes/grillo.gif"/>',
              "pajaro":'<img src="imagenes/pajaro.gif"/>',"cabra":'<img src="imagenes/cabra.gif"/>',
              "jaguar":'<img src="imagenes/jaguar.gif"/>',"mono":'<img src="imagenes/mono.gif"/>',
              "oso":'<img src="imagenes/oso.gif"/>',"caballo":'<img src="imagenes/caballo.gif"/>',
              "sapo":'<img src="imagenes/sapo.gif"/>',"perro":'<img src="imagenes/perro.gif"/>',
              "vaca":'<img src="imagenes/vaca.gif"/>'}

function agregar(){

    var nueva=document.getElementById("opcion").value;
    div=document.getElementById("impresion");
    for(i in imagenes){
        if(nueva==i)
        div.innerHTML+=imagenes[i]+" ";
    }}


function borrar(){
    div.innerHTML="";
}

y mi html esta asi:

<!DOCTYPE html>
<html>
<head>
    <title>ANIMALES</title>
    <link rel="stylesheet" type="text/css" href="animales.css">
    <script type="text/javascript" src="js/animales.js"></script>

</head>
<body>
<select id="opcion">
   <option value="" disabled selected>--ELIGE UNA OPCION--</option>
   <option value="leon">LEON</option> 
   <option value="elefante">ELEFANTE</option> 
   <option value="grillo">GRILLO</option>
   <option value="cabra">CABRA</option> 
   <option value="gato">GATO</option> 
   <option value="caballo">CABALLO</option> 
   <option value="mono">MONO</option> 
   <option value="jaguar">JAGUAR</option> 
   <option value="pajaro">PAJARO</option>
   <option value="oso">OSO</option> 
   <option value="pato">PATO</option> 
   <option value="perro">PERRO</option>
   <option value="sapo">SAPO</option> 
   <option value="vaca">VACA</option> 
   <option value="burro">BURRO</option>
   <option value="hiena">HIENA</option> 
   <option value="ballena">BALLENA</option> 
</select>
<button onclick="agregar()">AGREGAR</button>
<button onclick="borrar()">BORRAR</button><br><br>
<div id="clase">
    <div id="impresion"></div>
</div>
</body>
</html>

Lo que hace es que al momento de elegir del select y dar al botón de agregar me busca la imagen y la envía al div pero necesito que todas las imagenes sean del mismo tamaño tengo un css también pero no se si este mal enlazado al html.

.clase{
    width: 500px;
    height: 500px;
    border-radius:8000px;
    border-color: black;
}
7
  • si es un id="nombreDeID" en el html, en el css se "enlaza" con #nombreDeID. si es una clase onda class="nombreDeClase" se usa .nombreDeClase Commented el 23 ago. 2018 a las 22:55
  • ya hice eso amigo pero no me funciono me sigo poniendo las imagenes del tamaño que estan normal mente
    – Pepejsc
    Commented el 23 ago. 2018 a las 23:00
  • cual es la idea? reemplazar la imagen dentro del círculo? o ir sumandolas? el id/clase "clase" se está aplicando sobre el contenedor (el div) la imagen no resulta afectada Commented el 23 ago. 2018 a las 23:03
  • si amigo lo q deseo hacer es a ese div que seria un contenedor agregar cada imagen que tenga del select y cada imagen debe tomar el mismo tamaño , como podria hacer eso
    – Pepejsc
    Commented el 23 ago. 2018 a las 23:08
  • tengo este mensaje GET file:///C:/Users/E2/Desktop/proyecto/animales.css 0 ()
    – Pepejsc
    Commented el 23 ago. 2018 a las 23:10

2 respuestas 2

3

Ok un par de cambios, en vez de tener el tag IMG dentro del array, tenemos solo el source, al seleccionar una creamos la imagen con el src correspondiente y la agregamos al contenedor.

En el css: #contenedor img { modifica todos los IMG que se agregan al contenedor.

var imagenes = {
  "leon": 'imagenes/leon.gif',
  "burro": 'imagenes/burro.gif',
  "ballena": 'imagenes/ballena.gif',
  "gato": 'imagenes/gato.gif',
  "elefante": 'imagenes/elefante.gif',
  "pato": 'imagenes/pato.gif',
  "hiena": 'imagenes/hiena.gif',
  "grillo": 'imagenes/grillo.gif',
  "pajaro": 'imagenes/pajaro.gif',
  "cabra": 'imagenes/cabra.gif',
  "jaguar": 'imagenes/jaguar.gif',
  "mono": 'imagenes/mono.gif',
  "oso": 'imagenes/oso.gif',
  "caballo": 'imagenes/caballo.gif',
  "sapo": 'imagenes/sapo.gif',
  "perro": 'imagenes/perro.gif',
  "vaca": 'imagenes/vaca.gif"/>'
}

function agregar() {
  var seleccion = document.getElementById("opcion").value;
  var imagen = document.createElement('img');

  //imagen.src = imagenes[seleccion];
  // descomentar la linea anterior, comentar la siguiente (es para que se vea el demo)
  imagen.src = "https://picsum.photos/500/?random&dblrand=" + seleccion;
  document.getElementById("impresion").appendChild(imagen);
}


function borrar() {
  document.getElementById("impresion").innerHTML = "";
}
#contenedor img {
  width: 100px;
  height: 100px;
  border-radius: 8000px;
  border: 1px solid black;
  overflow: hidden;
  margin: 10px;
}
<!DOCTYPE html>
<html>

<head>
  <title>ANIMALES</title>
  <link rel="stylesheet" type="text/css" href="animales.css">
  <script type="text/javascript" src="js/animales.js"></script>

</head>

<body>
  <select id="opcion">
    <option value="" disabled selected>--ELIGE UNA OPCION--</option>
    <option value="leon">LEON</option>
    <option value="elefante">ELEFANTE</option>
    <option value="grillo">GRILLO</option>
    <option value="cabra">CABRA</option>
    <option value="gato">GATO</option>
    <option value="caballo">CABALLO</option>
    <option value="mono">MONO</option>
    <option value="jaguar">JAGUAR</option>
    <option value="pajaro">PAJARO</option>
    <option value="oso">OSO</option>
    <option value="pato">PATO</option>
    <option value="perro">PERRO</option>
    <option value="sapo">SAPO</option>
    <option value="vaca">VACA</option>
    <option value="burro">BURRO</option>
    <option value="hiena">HIENA</option>
    <option value="ballena">BALLENA</option>
  </select>
  <button onclick="agregar()">AGREGAR</button>
  <button onclick="borrar()">BORRAR</button><br><br>
  <div id="contenedor">
    <div id="impresion"></div>
  </div>
</body>

</html>

2
  • eso exacatamente es lo que deseaba amigomil gracias en serio muchisimas gracias por la ayuda
    – Pepejsc
    Commented el 23 ago. 2018 a las 23:31
  • Excelente... +1
    – alanfcm
    Commented el 24 ago. 2018 a las 0:13
0

Primero la variable imágenes es un objeto pero si se muestran todas es porque, no le has puesto la clase de css a las imágenes.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.