Se trata de un programa en JavaScript que deberá hacer funcionar un visor de imágenes hecho en HTML, como el que aparece en la imagen de ejemplo, donde hay un recuadro grande en el que se mostrará la imagen cliqueada de las miniaturas, la aparición de la imagen deberá ser progresiva, usando la propiedad de transparencia.

El programa estará contenido en la carpeta ‘Visor’ y las imágenes serán 5, las cuales deberán llamarse ‘autos1.jpg’, ‘autos2.jpg’, ‘autos3.jpg’, ‘autos4.jpg’ y ‘autos5.jpg’, estas deberán estar en la carpeta ‘img’, que a su vez estará en la carpeta ‘Visor’.

El reto consiste en completar el código JavaScript, para que el visor funcione.

El archivo deberá llamarse ‘visor.html’ y contendrá el siguiente código:

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Visor de Imagenes..</title>

</head>

<style>

                #Marco{

                               margin: auto;

                               width: 500px;

                               height: 450px;

                               background: rgb(80, 60, 63);

                }

                #Marco #titulo{

                               width: 100%;

                               height: 27px;

                               padding-top:10px;

                               font-family: ‘Courier New’, Courier, monospace;

                               font-size:14px;

                               text-align:left;

                               color:#fff;

                               background: #000;

                }

                .hor{

                               width:100%;

                               min-height: 10px;

                               height: auto;

                               background: #000;

                }

                .d5{

                               width:19.6%;

                               min-height: 40px;

                               height: auto;

                               float: left;

                               background: maroon;

                               border: 1px solid limegreen;

                }

                .vista{

                               width: 100%;

                               height: 400px;

                               background: mediumpurple;

                }

                .imgfor{

                               height:40px;

                               width:99%;

                }

</style>

<script>

                function mostrar(id_min){

                               /*

                En este espacio deberá construirse la función con el código que hará funcionar el visor, tal          como lo pide el requerimiento.

                */

                }

</script>

<body>

    <div id=”Marco”>

        <div id=”titulo”>

            Visor de Imgégenes..

        </div>

        <div class=”hor”>

            <img src=”” id=”picture” class=”vista” />

        </div>

        <div class=”hor”>

        </div>

        <!– Inicio de Imagenes en Miniaturas–>

        <div class=”hor”>

            <div class=”d5″>

                <img src=”img/autos1.jpg” class=”imgfor” id=”uno” onclick=”mostrar(this.id);” />

            </div>

            <div class=”d5″>

                <img src=”img/autos2.jpg” class=”imgfor”  id=”dos” onclick=”mostrar(this.id);” />

            </div>

            <div class=”d5″>

                <img src=”img/autos3.jpg” class=”imgfor” id=”tres” onclick=”mostrar(this.id);” />

            </div>

            <div class=”d5″>

                <img src=”img/autos4.jpg” class=”imgfor” id=”cuatro” onclick=”mostrar(this.id);” />

            </div>

            <div class=”d5″>

                <img src=”img/autos5.jpg” class=”imgfor” id=”cinco” onclick=”mostrar(this.id);” />

            </div>                                               

        </div>

        <!–Fin de Imagenes en Miniaturas–>

    </div>

</body>

</html>

4 1 vote
Article Rating
Subscribe
Notify of
guest
7 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Javier Eduardo Gonzalez Gomez
Javier Eduardo Gonzalez Gomez
2 months ago

<!DOCTYPE html>
<html lang=<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Visor de Imagenes..</title>
<style>
    #Marco{
        margin: auto;
        width: 500px;
        height: 450px;
        background: rgb(80, 60, 63);
    }
    #Marco #titulo{
        width: 100%;
        height: 27px;
        padding-top:10px;
        font-family: ‘Courier New’, Courier, monospace;
        font-size:14px;
        text-align:left;
        color:#fff;
        background: #000;
    }
    .hor{
        width:100%;
        min-height: 10px;
        height: auto;
        background: #000;
    }
    .d5{
        width:19.6%;
        min-height: 40px;
        height: auto;
        float: left;
        background: maroon;
        border: 1px solid limegreen;
    }
    .vista{
        width: 100%;
        height: 400px;
        background: mediumpurple;
    }
    .imgfor{
        height:40px;
        width:99%;
    }
</style>

<script>

img ='';
i=0;
sw=0;
validado = 0;
function mostrar(id_min){
    sw=0;
    if(validado!=0){
        clearInterval(ap);
    }
    validado = 1;    
    img = document.getElementById(id_min).src;
    document.getElementById('picture').style.opacity = 100;
    ap = setInterval(presentacion,25);
}
function presentacion(){
    if(i==100){
        sw=1;
        document.getElementById('picture').src = img;
    }
    if(i==0){
        sw=0;
    }
    if(sw==0){
        i++;
        document.getElementById('picture').style.opacity = (100 - i) / 100;
    }
    else{
        i--;
        document.getElementById('picture').style.opacity = (100 - i) /100;
        if(i==0){
            clearInterval(ap);
        }
    }
}

</script>
</head>
<body>
    <div id=”Marco”>
        <div id=”titulo”>
            Visor de Imgégenes..
        </div>
        <div class=”hor”>
            <img src=”” id=”picture”” class=”vista”/>
        </div>
        <div class=”hor”>
        </div>
        <!– Inicio de Imagenes en Miniaturas–>
        <div class=”hor”>
            <div class=”d5″>
                <img src=”img/descarga (1).jfif”  class=”imgfor” id=”uno” onclick=”mostrar(this.id);” />
            </div>
            <div class=”d5″>
                <img src=”img/descarga (2).jfif” class=”imgfor”  id=”dos” onclick=”mostrar(this.id);” />
            </div>
            <div class=”d5″>
                <img src=”img/Sin título-6.jpg” class=”imgfor” id=”tres” onclick=”mostrar(this.id);” />
            </div>
            <div class=”d5″>

                <img src=”img/descarga (4).jfif” class=”imgfor” id=”cuatro” onclick=”mostrar(this.id);” />
            </div>
            <div class=”d5″>
                <img src=”img/images (2).jfif” class=”imgfor” id=”cinco” onclick=”mostrar(this.id);” />
            </div>                                               
        </div>
        <!–Fin de Imagenes en Miniaturas–>
    </div>
</body>
</html>”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Visor de Imagenes..</title>
<style>
    #Marco{
        margin: auto;
        width: 500px;
        height: 450px;
        background: rgb(80, 60, 63);
    }
    #Marco #titulo{
        width: 100%;
        height: 27px;
        padding-top:10px;
        font-family: ‘Courier New’, Courier, monospace;
        font-size:14px;
        text-align:left;
        color:#fff;
        background: #000;
    }
    .hor{
        width:100%;
        min-height: 10px;
        height: auto;
        background: #000;
    }
    .d5{
        width:19.6%;
        min-height: 40px;
        height: auto;
        float: left;
        background: maroon;
        border: 1px solid limegreen;
    }
    .vista{
        width: 100%;
        height: 400px;
        background: mediumpurple;
    }
    .imgfor{
        height:40px;
        width:99%;
    }
</style>

<script>

img =”;
i=0;
sw=0;
validado = 0;
function mostrar(id_min){
    sw=0;
    if(validado!=0){
        clearInterval(ap);
    }
    validado = 1;    
    img = document.getElementById(id_min).src;
    document.getElementById(‘picture’).style.opacity = 100;
    ap = setInterval(presentacion,25);
}
function presentacion(){
    if(i==100){
        sw=1;
        document.getElementById(‘picture’).src = img;
    }
    if(i==0){
        sw=0;
    }
    if(sw==0){
        i++;
        document.getElementById(‘picture’).style.opacity = (100 – i) / 100;
    }
    else{
        i–;
        document.getElementById(‘picture’).style.opacity = (100 – i) /100;
        if(i==0){
            clearInterval(ap);
        }
    }
}

</script>
</head>
<body>
    <div id=”Marco”>
        <div id=”titulo”>
            Visor de Imgégenes..
        </div>
        <div class=”hor”>
            <img src=”” id=”picture”” class=”vista”/>
        </div>
        <div class=”hor”>
        </div>
        <!– Inicio de Imagenes en Miniaturas–>
        <div class=”hor”>
            <div class=”d5″>
                <img src=”img/autos1.jpg”  class=”imgfor” id=”uno” onclick=”mostrar(this.id);” />
            </div>
            <div class=”d5″>
                <img src=”img/autos2.jpg” class=”imgfor”  id=”dos” onclick=”mostrar(this.id);” />
            </div>
            <div class=”d5″>
                <img src=”img/autos3.jpg” class=”imgfor” id=”tres” onclick=”mostrar(this.id);” />
            </div>
            <div class=”d5″>

                <img src=”img/autos4.jpg” class=”imgfor” id=”cuatro” onclick=”mostrar(this.id);” />
            </div>
            <div class=”d5″>
                <img src=”img/autos5.jpg” class=”imgfor” id=”cinco” onclick=”mostrar(this.id);” />
            </div>                                               
        </div>
        <!–Fin de Imagenes en Miniaturas–>
    </div>
</body>
</html>

Buenas tardes el marco negro en el script fue una posible solución que le di al ejercicio

Last edited 2 months ago by Javier Eduardo Gonzalez Gomez
Sebastian Calero
Sebastian Calero
2 months ago

Hola, Esta es mi respuesta con la solución a la parte que faltaba en script.

<!DOCTYPE html>
<html lang=”en”>
<head>
  <meta charset=”UTF-8″>
  <meta name=”viewport”
content=”width=device-width, initial-scale=1.0″>
  <title>Visor de Imagenes..</title>
<style>
        #Marco{
                margin:
auto;
                width:
500px;
                height:
450px;
                background:
rgb(80, 60, 63);
        }
        #Marco
#titulo{
                width:
100%;
                height:
27px;
                padding-top:10px;
                font-family:
‘Courier New’, Courier, monospace;
                font-size:14px;
                text-align:left;
                color:#fff;
                background:
#000;
        }
        .hor{
                width:100%;
                min-height:
10px;
                height:
auto;
                background:
#000;
        }
        .d5{
                width:19.6%;
                min-height:
40px;
                height:
auto;
                float:
left;
                background:
maroon;
                border:
1px solid limegreen;
        }
        .vista{
                width:
100%;
                height:
400px;
                background:
mediumpurple;
        }
        .imgfor{
                height:40px;
                width:99%;
        }
</style>
<script>
img
= ” “;
i
= 0;
sw=0;
validado
= 0;
function
mostrar(id_min){
  sw=0;
  if(validado!=0){
    clearInterval(ap);
  }
  validado
= 1;
  img
= document.getElementById(id_min).src;
  document.getElementById(“picture”).style.opacity
= 1;
  ap
= setInterval(presentacion,25);
}
function
presentacion(){
  if(i==100){
    sw=1;
    document.getElementById(“picture”).src
= img;

  }
  if(i==0){
    sw=0;
  }
  if(sw==0){
    i++;
    document.getElementById(“picture”).style.opacity
= (100 – i)/100;
  }else{
    i–;
    document.getElementById(“picture”).style.opacity
= (100 – i)/100;
    if(i==0){
      clearInterval(ap);
    }
  }
}
</script>
</head>
<body>
  <div id=”Marco”>
    <div id=”titulo”>
      Visor
de Imgégenes..
    </div>
    <div class=”hor”>
      <img
src=”” id=”picture” class=”vista” />
    </div>
    <div class=”hor”>
    </div>
    <div class=”hor”>
      <div
class=”d5″>
        <img
src=”img/autos1.jpg” class=”imgfor” id=”uno”
onclick=”mostrar(this.id);” />
      </div>
      <div
class=”d5″>
        <img
src=”img/autos2.jpg” class=”imgfor” id=”dos”
onclick=”mostrar(this.id);”/>
      </div>
      <div
class=”d5″>
        <img
src=”img/autos3.jpg” class=”imgfor” id=”tres”
onclick=”mostrar(this.id);” />
      </div>

      <div
class=”d5″>
        <img
src=”img/autos4.jpg” class=”imgfor” id=”cuatro”
onclick=”mostrar(this.id);” />
      </div>
      <div
class=”d5″>
        <img
src=”img/autos5.jpg” class=”imgfor” id=”cinco”
onclick=”mostrar(this.id);”/>
      </div>                        
    </div>
  </div>
</body>
</html>

cristian David hernandez Parga
cristian David hernandez Parga
2 months ago

Mi solución al error es:

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Visor de Imagenes..</title>
    <style>
        body{
            backgroundrgb(3597168);
        }
        #Marco{

                       marginauto;
                       margin-top90px;
                       text-aligncenter;
                       font-family‘Segoe UI’Tahoma, Geneva, Verdanasans-serif;
                       font-size19px;
                       colorwhite;
                       border-radius:0px 24px 0px 41px;
                       width500px;

                       height450px;

                       backgroundrgb(806063);

        }

        #Marco #titulo{

                       width100%;

                       height27px;

                       padding-top:10px;

                       font-family: ‘Courier New’, Couriermonospace;

                       font-size:14px;

                       text-align:left;

                       color:#fff;

                       background#000;

        }

        .hor{

                       width:100%;

                       min-height10px;

                       heightauto;

                       background#000;

        }

        .d5{

                       width:19.6%;

                       min-height40px;

                       heightauto;

                       floatleft;

                       backgroundrgb(255252252);

                       border1px solid limegreen;

        }

        .vista{

                       width100%;

                       height400px;

                       backgroundrgb(255255255);

        }

        .imgfor{

                       height:40px;

                       width:99%;

        }

</style>

<script>

img=“”;
i=0;
sw=0;
validado=0;

function mostrar(id_min){
    sw=0;
    if(validado!=0){
        clearInterval(ap);
    }
    validado=1;
    img = document.getElementById(id_min).src;
    document.getElementById(“picture”).style.opacity = 1;
    ap = setInterval(presentacion,26);
}

function presentacion(){
    if(i==100){
        sw = 1;
        document.getElementById(“picture”).src = img;
    }
    if(i==0){
        sw = 0;
    }
    if(sw==0){
        i++;
        document.getElementById(“picture”).style.opacity = (100 – i) / 100;
    }
    else{
        i–;
        document.getElementById(“picture”).style.opacity = (100 – i) / 100;
        if(i==0){
            clearInterval(ap);
        }
    }
}

</script>
</head>

<body>

    <div id=“Marco”>

        <div id=”titulo”>

            Visor de Imgégenes..

        </div>

        <div class=“hor”>

            <img src=“” id=“picture” class=“vista”> </img>

        </div>

        <div class=“hor”>

        </div>

        <!– Inicio de Imagenes en Miniaturas–>

        <div class=“hor”>

            <div class=“d5”>

                <img src=“img/car1.jpg” class=“imgfor” id=“uno” onclick=mostrar(this.id);” />

            </div>

            <div class=“d5”>

                <img src=“img/car2.jpg” class=“imgfor” id=“dos” onclick=mostrar(this.id);” />

            </div>

            <div class=“d5”>

                <img src=“img/car3.jpg” class=“imgfor” id=“tres” onclick=mostrar(this.id);” />

            </div>

            <div class=“d5”>

                <img src=“img/car4.jpg” class=“imgfor” id=“cuatro” onclick=mostrar(this.id);” />

            </div>

            <div class=“d5”>

                <img src=“img/car5.jpg” class=“imgfor” id=“cinco” onclick=mostrar(this.id);” />

            </div>                                               

        </div>

        <!–Fin de Imagenes en Miniaturas–>

    </div>

</body>

</html>

leidy catherin paez
leidy catherin paez
2 months ago

Buenas tardes mi Solucion al programa es:
<!DOCTYPE html>
<html lang=“en”>
<head>
    <meta charset=“UTF-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
    <title>Visor de imagenes</title>
<style>

#Marco{

    marginauto;

    width500px;

    height450px;

    backgroundrgb(806063);

}

#Marco #titulo{

    width100%;

    height27px;

    padding-top:10px;

    font-family: ‘Courier New’, Couriermonospace;

    font-size:14px;

    text-align:left;

    color:#fff;

    background#000;

}

.hor{

    width:100%;

    min-height10px;

    heightauto;

    background#000;

}

.d5{

    width:19.6%;

    min-height40px;

    heightauto;

    floatleft;

    backgroundmaroon;

    border1px solid limegreen;

}

.vista{

    width100%;

    height400px;

    backgroundmediumpurple;

}

.imgfor{

    height:40px;

    width:99%;

}
</style>

<script>

img =“”;
i=0;
sw=0;
validado0;
function mostrar(id_min){ 
    sw=0;
    if(validado!=0){
        clearInterval(ap);
    }
     validado=1;
    imgdocument.getElementById(id_min).src;
    document.getElementById(“picture”).style.opacity = 1;
    //document.getElementById(“picture”).style =”width:50%;height:50%;”;
    ap = setInterval(presentacion,25);
}
function presentacion(){
if(i==100){
    sw=1;
    document.getElementById(“picture”).src = img;
   
}
if(i==0){
    sw=0;
}
if (sw==0){
    i++;
    document.getElementById(“picture”).style.opacity =(100 – i) / 100;
}   
else {
    i–;
    document.getElementById(“picture”).style.opacity=(100 – i) / 100;
     if(i==0){
         clearInterval(ap);
     }

}

}
</script>

<body>

    <div id=“Marco”>
    <div id=“titulo”>
  VISOR DE IMAGENES..
        </div>
<div class=“hor”>
<img src=“” id=“picture” class=“vista” />

        </div>

        <div class=“hor”>

        </div>

        <!– Inicio de Imagenes en Miniaturas–>

        <div class=“hor”>
            <div class=“d5”>

                <img src=“img/auto1.jpg” class=“imgfor” id=“uno”onclick=mostrar(this.id);” />

            </div>

            <div class=“d5”>

                <img src=“img/auto2.jpg” class=“imgfor”   id=“dos” onclick=mostrar(this.id);” />

            </div>

            <div class=“d5”>

                <img src=“img/auto3.jpg” class=“imgfor”  id=“tres” onclick=mostrar(this.id);”/>

            </div>

            <div class=“d5”>

                <img src=“img/auto4.jpg” class=“imgfor”  id=“cuatro” onclick=mostrar(this.id);” />

            </div>

            <div class=“d5”>

                <img src=“img/auto5.jpg” class=“imgfor” id=“cinco” onclick=mostrar(this.id);” />

            </div>                                               

        </div>

        <!–- Fin de Imagenes en Miniaturas–->

    </div>
</body>
</html>

Cristian Camilo Orozco Cortes

Esta es mi respuesta

<!DOCTYPE html>
<html lang=<!DOCTYPE html>
<html lang=”en”>
<head>
  <meta charset=”UTF-8″>
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  <title>Visor de Imagenes..</title>
<style>
  #Marco{
    margin: auto;
    width: 500px;
    height: 450px;
    background: rgb(80, 60, 63);
  }
  #Marco #titulo{
    width: 100%;
    height: 27px;
    padding-top:10px;
    font-family: ‘Courier New’, Courier, monospace;
    font-size:14px;
    text-align:left;
    color:#fff;
    background: #000;
  }
  .hor{
    width:100%;
    min-height: 10px;
    height: auto;
    background: #000;
  }
  .d5{
    width:19.6%;
    min-height: 40px;
    height: auto;
    float: left;
    background: maroon;
    border: 1px solid limegreen;
  }
  .vista{
    width: 100%;
    height: 400px;
    background: mediumpurple;
  }
  .imgfor{
    height:40px;
    width:99%;
    float:center;
  }
</style>

<script>

img =”;
i=0;
sw=0;
validado = 0;
function mostrar(id_min){
  sw=0;
  if(validado!=0){
    clearInterval(ap);
  }
  validado = 1;   
  img = document.getElementById(id_min).src;
  document.getElementById(‘picture’).style.opacity = 100;
  ap = setInterval(presentacion,25);
}
function presentacion(){
  if(i==100){
    sw=1;
    document.getElementById(‘picture’).src = img;
  }
  if(i==0){
    sw=0;
  }
  if(sw==0){
    i++;
    document.getElementById(‘picture’).style.opacity = (100 – i) / 100;
  }
  else{
    i–;
    document.getElementById(‘picture’).style.opacity = (100 – i) /100;
    if(i==0){
      clearInterval(ap);
    }
  }
}
</script>
</head>

<body>

  <div id=”Marco”>

    <div id=”titulo”>

      Visor de Imgégenes..

    </div>

    <div class=”hor”>

      <img src=”” id=”picture” class=”vista” />

    </div>

    <div class=”hor”>

    </div>

    <!– Inicio de Imagenes en Miniaturas–>

    <div class=”hor”>

      <div class=”d5″>

        <img src=”https://i.ytimg.com/vi/wLoRiTk-awo/maxresdefault.jpg” class=”imgfor” id=”uno” onclick=”mostrar(this.id);”” />

      </div>

      <div class=”d5″>

        <img src=”https://i.pinimg.com/736x/80/69/ce/8069ce2e415776cabe5334b0b8b742c3.jpg” class=”imgfor” id=”dos” onclick=”mostrar(this.id);” />

      </div>

      <div class=”d5″>

        <img src=”https://images7.memedroid.com/images/UPLOADED693/5ba03f624218c.jpeg” class=”imgfor” id=”tres” onclick=”mostrar(this.id);” />

      </div>

      <div class=”d5″>

        <img src=”https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTlKzD_mtDJSq8y9xOnrt8ZdPxQXWqmiEqcw&usqp=CAU” class=”imgfor” id=”cuatro” onclick=”mostrar(this.id);” />

      </div>

      <div class=”d5″>

        <img src=”https://i.ytimg.com/vi/wLoRiTk-awo/maxresdefault.jpg” class=”imgfor” id=”cinco” onclick=”mostrar(this.id);” />

      </div>                        

    </div>

    <!–Fin de Imagenes en Miniaturas–>

  </div>

</body>

</html>

Last edited 2 months ago by Cristian Camilo Orozco Cortes
Diego ortega
Diego ortega
2 months ago

Hola, esta es mi solución
<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Visor de Imagenes..</title>

</head>
<style>

    #Marco{

                   margin: auto;

                   width: 500px;

                   height: 450px;

                   background: rgb(806063);

    }

    #Marco #titulo{

                   width: 100%;

                   height: 27px;

                   padding-top:10px;

                   font-family: ‘Courier New’, Courier, monospace;

                   font-size:14px;

                   text-align:left;

                   color:#fff;

                   background: #000;

    }

    .hor{

                   width:100%;

                   min-height: 10px;

                   height: auto;

                   background: #000;

    }

    .d5{

                   width:19.6%;

                   min-height: 40px;

                   height: auto;

                   float: left;

                   background: maroon;

                   border: 1px solid limegreen;

    }

    .vista{

                   width: 100%;

                   height: 400px;

                   background: mediumpurple;

    }

    .imgfor{

                   height:40px;

                   width:99%;

    }
</style>

<script>
/*funcion*/
img=””; 
u=0;
sw=0;
val=0;
function mostrar(id_min){
    sw=0;
    if(val!==0){
        clearInterval(uu);
    }
    val=1;

    img=document.getElementById(id_min).src;
    document.getElementById(‘picture‘).style.transparency=1;
    uu=setInterval(pre,20);
}
function pre(){
    if(u==100){
        sw=1;
        document.getElementById(‘picture‘).src=img;
    }
    if(u==0){
        sw=0;
    }
    if(sw==0){
        u++;
        document.getElementById(‘picture‘).style.opacity=(100u)/100;
    }else{
         u–;
         document.getElementById(‘picture‘).style.opacity=(100u)/100;
         if(u==0){
            clearInterval(uu);
         }
    }
}

    

</script>

<body>

    <div id=”Marco“>

        <div id=”titulo“>

            Visor de Imgégenes..

        </div>

        <div class=”hor“>

            <img src=”” id=”picture” class=”vista” />

        </div>

        <div class=”hor“>

        </div>

        <!– Inicio de Imagenes en Miniaturas–>

        <div class=”hor“>

            <div class=”d5“>

                <img src=”img/autos1.png” class=”imgfor” id=”uno” onclick=”mostrar(this.id);” />

            </div>

            <div class=”d5“>

                <img src=”img/autos2.jpg” class=”imgfor”  id=”dos”  onclick=”mostrar(this.id);“/>

            </div>

            <div class=”d5“>

                <img src=”img/autos3.jpg” class=”imgfor” id=”tres” onclick=”mostrar(this.id);” />

            </div>

            <div class=”d5“>

                <img src=”img/autos4.jpg” class=”imgfor” id=”cuatro” onclick=”mostrar(this.id);” />

            </div>

            <div class=”d5“>

                <img src=”img/autos5.jpg” class=”imgfor” id=”cinco” onclick=”mostrar(this.id);” />

            </div>                                               

        </div>

        

    </div>

</body>

</html>

CESAR PEREZ
CESAR PEREZ
2 months ago

<!DOCTYPE html>

<html lang=”en”>

<head>

  <meta charset=”UTF-8″>

  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

  <title>Visor de Imagenes..</title>

<style>

        #Marco{

                margin: auto;

                width: 500px;

                height: 450px;

                background: rgb(80, 60, 63);

        }

        #Marco #titulo{

                width: 100%;

                height: 27px;

                padding-top:10px;

                font-family: ‘Courier New’, Courier, monospace;

                font-size:14px;

                text-align:left;

                color:#fff;

                background: #000;

        }

        .hor{

                width:100%;

                min-height: 10px;

                height: auto;

                background: #000;

        }

        .d5{

                width:19.6%;

                min-height: 40px;

                height: auto;

                float: left;

                background: maroon;

                border: 1px solid limegreen;

        }

        .vista{

                width: 100%;

                height: 400px;

                background: mediumpurple;

        }

        .imgfor{

                height:40px;

                width:99%;

        }

</style>

<script>
     
        img=””;
        i=0;
        sw=0;
        validado=0;
        function mostrar(id_min){
         sw=0;
         if(validado!=0){
          clearInterval(ap);
         }
         validado = 1;
         img = document.getElementById(id_min).src;
         document.getElementById(‘picture’).style.opacity = 1;
         ap = setInterval(presentacion,25);
        }
        function presentacion(){
         if(i==100){
          sw=1;
          document.getElementById(‘picture’).src = img;
         }
         if(i==0){
          sw=0;
         }
         if(sw==0){
          i++;
          document.getElementById(‘picture’).style.opacity = (100 – i )/ 100;
         }else{
          i–;
          document.getElementById(‘picture’).style.opacity = (100 – i )/ 100;
          if(i==0){
           clearInterval(ap);
          }
         }
        }

</script>
</head>
<body>

  <div id=”Marco”>

    <div id=”titulo”>

      Visor de Imgégenes..

    </div>

    <div class=”hor”>

      <img src=”” id=”picture” class=”vista” />

    </div>

    <div class=”hor”>

    </div>

    <!– Inicio de Imagenes en Miniaturas–>

    <div class=”hor”>

      <div class=”d5″>

        <img src=”img/autos1.jpg” class=”imgfor” id=”uno” onclick=”mostrar(this.id);” />

      </div>

      <div class=”d5″>

        <img src=”img/autos2.jpg” class=”imgfor” id=”dos” onclick=”mostrar(this.id);” />

      </div>

      <div class=”d5″>

        <img src=”img/autos3.jpg” class=”imgfor” id=”tres” onclick=”mostrar(this.id);” />

      </div>

      <div class=”d5″>

        <img src=”img/autos4.jpg” class=”imgfor” id=”cuatro” onclick=”mostrar(this.id);” />

      </div>

      <div class=”d5″>

        <img src=”img/autos5.jpg” class=”imgfor” id=”cinco” onclick=”mostrar(this.id);” />

      </div>                        

    </div>

    <!–Fin de Imagenes en Miniaturas–>

  </div>

</body>

</html>

Comentarios recientes

7
0
Would love your thoughts, please comment.x
()
x