Hola amigos. He creado una pagina web en un hosting gratuito.
Mi pagina web es muy básica, la abres y hay una imagen.

Ahora se preguntarán cual es la duda.

Pues lo que sucede es que quiero hacer lo siguiente: mi idea es que cualquiera pueda cambiar la imagen que mi pagina web muestra. Que halla un espacio donde uno escriba el URL de la nueva imagen, luego un botón aceptar, y cuando se pulse aceptar se cambie la imagen por la de la URL que escribieron.

Alguien me puede ayudaar?

Esto sería para cambiar tu background cada 3 segundos:

Código Javascript:

Código: Seleccionar todo

//cambiar imagen de fondo por una lista aleatoria.
//Nahuel Jose
$( function(){
    var arrImagenes = [ 'fondo-1.jpg','fondo-1.jpg', 'fondo-2.jpg', 'fondo-3.jpg' ];
    var imagenActual = 'fondo-1.jpg';
    var tiempo = 3000;
    var id_contenedor = 'main-wrap'
    setInterval( function(){
        do{
            var randImage = arrImagenes[Math.ceil(Math.random()*(arrImagenes.length-1))];
        }while( randImage == imagenActual )
        imagenActual = randImage;
        cambiarImagenFondo(imagenActual, id_contenedor);
    }, tiempo)
})
 
function cambiarImagenFondo(nuevaImagen, contenedor){
    var contenedor = $('#' + contenedor);
    //cargar imagen primero
    var tempImagen = new Image();
    $(tempImagen).load( function(){
        contenedor.css('backgroundImage', 'url('+tempImagen.src+')');
    });
    tempImagen.src = 'images/' + nuevaImagen;
}
 
Código HTML:

Código: Seleccionar todo

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script> 
<script type="text/javascript" src="js/cambiar-fondo.js"></script>
La matriz arrImagenes contiene los nombres de las imágenes que quieres.
imagenActual es el nombre de la imagen con que inicias.
tiempo es el tiempo en milisegundos de los intervalos de cambio.
id_contenedor es el id del elemento al que quieres cambiarle el fondo.

Y debes reemplazar la línea:

Código Javascript:

Código: Seleccionar todo

tempImagen.src = 'images/' + nuevaImagen;
Con la ruta al directorio donde se encuentran tus imágenes. En mi caso es images pero si vos tuvieses "fotos" por ejemplo, sería:

Código Javascript:

Código: Seleccionar todo

tempImagen.src = 'fotos/' + nuevaImagen;
Última edición por K7 el 23 Feb 2013, 23:27, editado 1 vez en total.
Malware = 00011B
Lo que tu quieres no es HTML, es PHP, y bien sencillo.

Te recomiendo que busques un poco en google sobre PHP y el Manejo de Bases de Datos.
Ikarus: Backdoor.VBS.SafeLoader
Agnitum: Trojan.VBS.Safebot.A
http://indeseables.github.io/
K7 escribió:Esto sería para cambiar tu background cada 3 segundos:

Código Javascript:

Código: Seleccionar todo

//cambiar imagen de fondo por una lista aleatoria.
//Nahuel Jose
$( function(){
    var arrImagenes = [ 'fondo-1.jpg','fondo-1.jpg', 'fondo-2.jpg', 'fondo-3.jpg' ];
    var imagenActual = 'fondo-1.jpg';
    var tiempo = 3000;
    var id_contenedor = 'main-wrap'
    setInterval( function(){
        do{
            var randImage = arrImagenes[Math.ceil(Math.random()*(arrImagenes.length-1))];
        }while( randImage == imagenActual )
        imagenActual = randImage;
        cambiarImagenFondo(imagenActual, id_contenedor);
    }, tiempo)
})
 
function cambiarImagenFondo(nuevaImagen, contenedor){
    var contenedor = $('#' + contenedor);
    //cargar imagen primero
    var tempImagen = new Image();
    $(tempImagen).load( function(){
        contenedor.css('backgroundImage', 'url('+tempImagen.src+')');
    });
    tempImagen.src = 'images/' + nuevaImagen;
}
 
Código HTML:

Código: Seleccionar todo

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script> 
<script type="text/javascript" src="js/cambiar-fondo.js"></script>
La matriz arrImagenes contiene los nombres de las imágenes que quieres.
imagenActual es el nombre de la imagen con que inicias.
tiempo es el tiempo en milisegundos de los intervalos de cambio.
id_contenedor es el id del elemento al que quieres cambiarle el fondo.

Y debes reemplazar la línea:

Código Javascript:

Código: Seleccionar todo

tempImagen.src = 'images/' + nuevaImagen;
Con la ruta al directorio donde se encuentran tus imágenes. En mi caso es images pero si vos tuvieses "fotos" por ejemplo, sería:

Código Javascript:

Código: Seleccionar todo

tempImagen.src = 'fotos/' + nuevaImagen;
K7, muchísimas gracias. Pero creo que necesitaré otro poco de ayuda.

Digamos, lo que yo quiero cambiar es una imagen dentro del sitio, no el fondo completo.

La imagen la agregué con la etiqueta <img>, su id es "changeable_image". Obviamente el URL de la imagen va en src="http://..." (dentro de la misma etiqueta). Lo otro, es que yo no quiero que la gente pueda cargar imágenes a mi sitio (osea, que no se almacenen estas imágenes en el sitio), solo quiero que ellos puedan cambiar el URL que sale escrito en el "src" de la etiqueta <img>

Espero haberme explicado bien.
xXSCORPIOXx escribió:Lo que tu quieres no es HTML, es PHP, y bien sencillo.

Te recomiendo que busques un poco en google sobre PHP y el Manejo de Bases de Datos.
Lo sé, de hecho me di cuenta que lo había puesto mal después de ya haber publicado el tema.
xXSCORPIOXx escribió:Lo que necesitas es Escribir la URL de la imagen en la Base de Datos, un Form que modifique la misma, y la pagina que haga un echo de lo que hay en la base de datos.

Mira si esto te sirve:
http://www.pablin.com.ar/computer/curso ... cacion.htm
Después de esa lectura y millones de intentos me acerqué un poco a mi meta.

Como bien me dijiste, lo primero que tengo que hacer es un form que guarde la URL de la imagen en la base de datos y luego que mi pagina use la información que hay en esa base de datos para mostrar la imagen que se desea.

Lo primero entonces era crear "un form que guarde la URL de la imagen en la base de datos". Para eso hice lo siguiente. Cree el archivo formulario.html
<html>
<body>
<center>
<form method="post" action="add_reg.php3">
URL Imagen:<input type="Text" name="url"/><br>
<input type="Submit" name="enviar" value="Cargar Imagen"/>
</form>
</center>
</body>
</html>
Luego cree el archivo add_reg.php3
<?php
$link = mysql_connect("localhost", "usuario", "clave");
mysql_select_db("db2407480-admin");
$sql = "UPDATE  `db2407480-admin`.`imagen` SET  `imagen`.`url` = '$url'";
$result = mysql_query($sql);
echo "Tu imagen fue cargada a la base de datos y sera mostrada en el sitio.";
?>
Los pase por FileZilla a mi servidor gratuito y les di permisos chmod 777. También cree una base de datos (db2407480-admin) y en ella una tabla llamada "imagen" que contiene la columna "url". En la misma tabla agregue manualmente por la base de datos una fila y en el valor de url le puse: https://www.google.com/images/srpr/logo3w.png (solo un ejemplo)

Ahora el problema.

Voy a formulario.html, escribo cualquier url, le doy a "Cargar Imagen", me lleva al archivo add_reg.php3 y me da el mensaje: "Tu imagen fue cargada a la base de datos y sera mostrada en el sitio.". Hasta ahí todo bien. ¿Qué debería pasar? Debería cambiarse el https://www.google.com/images/srpr/logo3w.png (en `db2407480-admin`.`imagen`.`url`) por la url que escribí en el formulario, pero en ves de eso, la columna url se vacía, osea se borra el link que salía escrito y queda en blanco.

Notas extras:

Si yo cambio la query
$sql = UPDATE  `db2407480-admin`.`imagen` SET  `imagen`.`url` = '$url'
Por
$sql = UPDATE  `db2407480-admin`.`imagen` SET  `imagen`.`url` = 'cualquiercosa'
La columna url se edita correctamente. Con eso podemos concluir que no hay un problema de conexión con la base de datos y que el problema esta en el $url.

Ayuda!!
Si no se te da bien manejar bases de datos, como solo es una url sin importancia, podrías usar un txt o algo parecido.
Ikarus: Backdoor.VBS.SafeLoader
Agnitum: Trojan.VBS.Safebot.A
http://indeseables.github.io/
Responder

Volver a “Otros lenguajes”