I have some images saved in an array of objects and I want them to be the same size at the time of presenting them

Question

I have some images saved in an array of objects and I want them to be the same size at the time of presenting them

Navigation

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

2

I have my script like this:

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="";
}

and my html is like this:

<!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>

What it does is that when I choose the select and click on the add button, it looks for the image and sends it to the div, but I need all the images to be the same size. I also have a CSS but I do not know if this is wrong to the html.

.clase{
    width: 500px;
    height: 500px;
    border-radius:8000px;
    border-color: black;
}

javascript html

asked by user97805 24.08.2018 в 00:49

source

2 answers

0

First, the image variable is an object, but if all are shown, it is because you have not put the class of css to the images.

answered by 24.08.2018 в 00:55

Passing variable from html form to nodejs Vary the color of a range

score 2 · Accepted Answer

Ok a couple of changes, instead of having the IMG tag inside the array, we have only the source, when selecting one we create the image with the corresponding src and add it to the container.

In the css: #contenedor img { modifies all the IMGs that are added to the container.

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>