Javascript - mostrar Imagen
Ahora se vera un ejemplo simple de mostrar una imagen usando javascript
<html>
<head>
<title>Imagen</title>
</head>
<body>
<br/>
<script type="text/javascript">
function images(img)
{
document.write("<center><img src='"+img+"'></center>");
}
images("http://i.i.imgur.com/LCCooPG.jpg");
</script>
</body>
</html>
<head>
<title>Imagen</title>
</head>
<body>
<br/>
<script type="text/javascript">
function images(img)
{
document.write("<center><img src='"+img+"'></center>");
}
images("http://i.i.imgur.com/LCCooPG.jpg");
</script>
</body>
</html>
Se hace uso de una function,
la function img es lo que almacena la imagen que se ingresara,
dentro de la fucntion mostramos el resultado, utilizando las etiquetas de html,
y concatenando la variable mostraremos el valor ya asignado a img
que se vera ya ingresada cuando llamemos a la function y en ese momento la variable
img tomara el valor del dato ingresado.
Ahora un ejemplo con un return que es similar
solo que retornamos el valor ue indiquemos en la funcion y queda almacenada,
y lo mostramos por pantalla fuera de la function.
<html>
<head>
<title>Imagen</title>
</head>
<body>
<br/>
<script type="text/javascript">
function images(img)
{
return img;
}
mostrarImagen=images("<center><img src='http://i.i.imgur.com/LCCooPG.jpg'></center>");
document.write(mostrarImagen);
</script>
</body>
</html>
<head>
<title>Imagen</title>
</head>
<body>
<br/>
<script type="text/javascript">
function images(img)
{
return img;
}
mostrarImagen=images("<center><img src='http://i.i.imgur.com/LCCooPG.jpg'></center>");
document.write(mostrarImagen);
</script>
</body>
</html>
Ahora usaremos con una function, un while.
<html>
<head>
<title>Imagen</title>
</head>
<body>
<br/>
<script type="text/javascript">
var img=prompt("Ingrese la Url de la imagen");
while(img=="")
{
img=prompt("Ingrese la Url de la imagen");
}
function images(img)
{
document.write("<center><img src='"+img+"'></center>");
}
images(img);
</script>
</body>
</html>
<head>
<title>Imagen</title>
</head>
<body>
<br/>
<script type="text/javascript">
var img=prompt("Ingrese la Url de la imagen");
while(img=="")
{
img=prompt("Ingrese la Url de la imagen");
}
function images(img)
{
document.write("<center><img src='"+img+"'></center>");
}
images(img);
</script>
</body>
</html>
Aqui lo que hacemos es pedir que se ingrese una imagen,
con el uso de un prompt, despues temos el while que nos indica que no puede estar vacio lo que se pide al ingresar y hasta que se cumpla seguira saliendo el mensaje de que ingrese la url de la imagen.
Despues tenemos la funcion ya definida con la variable img que tomara de valor cuando ingresemos con el prompt y mostramos el resultado al hacer la llamada fuera de la function.
Ahora mostraremos una imagen utilizando un for
<html>
<head>
<title>Imagen</title>
</head>
<body>
<br/>
<script type="text/javascript">
function images(img)
{
for(i=0; i<1; i++)
{
document.write("<center><img src='"+img+"'></center>");
}
}
images("http://i.i.imgur.com/LCCooPG.jpg");
</script>
</body>
</html>
<head>
<title>Imagen</title>
</head>
<body>
<br/>
<script type="text/javascript">
function images(img)
{
for(i=0; i<1; i++)
{
document.write("<center><img src='"+img+"'></center>");
}
}
images("http://i.i.imgur.com/LCCooPG.jpg");
</script>
</body>
</html>
Aqui entre los () ingresamos las condiciones,
se le asigna a i el valor 0 pudiendoce cualquiera que queramos,
pero en la segunda condicion mostramos que i<1 entonces estamos indicando que el valor
sea fijo en 0 asi se mostrara solo una imagene, depediendo de las veces que queramos mostrar.
Y despues el i++ que es para que se incremente, pero en esta ocacion como queremos mostrar solo 1 no cumple funcion, pero es necesaria para que se produzca el for, el resultado es el mismo
Por ultimo hacemos un ejemplo de mostrar multiples imagenes usando un switch
<html>
<head>
<title>Imagen</title>
</head>
<body>
<br/>
<script type="text/javascript">
function images(img)
{
switch(img)
{
case 1:
document.write("<center><img src='http://i.i.imgur.com/LCCooPG.jpg'></center>");
break;
case 2:
document.write("<center><img src='http://i.imgur.com/XM1mD.jpg'></center>");
break;
case 3:
document.write("<center><img src='http://adesivifacebook.com/wp-content/uploads/2013/04/felice-150x150.png'></center>");
break;
case 4:
document.write("<center><img src='http://i.i.imgur.com/knHMw1j.gif'></center>");
break;
default:
document.write("<center><img src='http://i.imgur.com/JIntE.gif'></center>");
break;
}
}
/* Aqui cambiar el numero segun la imagen a mostrar ._. */
images(1);
</script>
</body>
</html>
<head>
<title>Imagen</title>
</head>
<body>
<br/>
<script type="text/javascript">
function images(img)
{
switch(img)
{
case 1:
document.write("<center><img src='http://i.i.imgur.com/LCCooPG.jpg'></center>");
break;
case 2:
document.write("<center><img src='http://i.imgur.com/XM1mD.jpg'></center>");
break;
case 3:
document.write("<center><img src='http://adesivifacebook.com/wp-content/uploads/2013/04/felice-150x150.png'></center>");
break;
case 4:
document.write("<center><img src='http://i.i.imgur.com/knHMw1j.gif'></center>");
break;
default:
document.write("<center><img src='http://i.imgur.com/JIntE.gif'></center>");
break;
}
}
/* Aqui cambiar el numero segun la imagen a mostrar ._. */
images(1);
</script>
</body>
</html>
Lo que hacemos es hacer usode una function para que por medio del switch tome los valores de las imagenes segun sea el caso asignado, la function tomara la informacion que en este caso serian numeros, estos numeros estan indicado en el switch que asigna segun el numero una imagen, y segun el numero que ingresemos en la function mostrara la imagen que esta en el switch segun sea el caso, y terminara cuando encuentre el valor ingresado asi no se repite, si no se encuetra el valor mostrarauna imagen default, dentro de los casos ya mostramos por pantalla con un document.write asi que solo nos queda por hacer la llamada a la function con el valor que estan en el switch.
No hay comentarios:
Publicar un comentario