Carga aleatoria de iframes, creo

fidelio · #1 (**permalink**) 02/01/2007, 18:55

Buenas:

A ver si consigo explicarme, porque no se si el titulo del post es exacto.

Resulta que en la página de inicio quiero que cada vez que entre me cambie un iframe de forma aleatoria. ¿Por qué iframe?, quizá hay otra forma de hacerlo sin necesidad de recurrir a los iframes.

Es una imagen que le acompaña un texto. La imagen va en una celda y en la de al lado va el texto. Mi intención es que cada vez que se carge la página vaya cambiando, pongo un ejemplo:

IMAGEN 1 + TEXTO 1
IMAGEN 2 + TEXTO 2
IMAGEN 3 + TEXTO 3
...

Entro por primera vez, veo IMAGEN 1 + TEXTO 1, recargo la página veo IMAGEN 3 + TEXTO 3, recargo otra vez ....

Así sucesivamente. Es como las imagenes aleatorias, pero con iframes. Pero reitero que si hay otra forma más sencilla de hacerlo que no sea usando iframes, pues también estaría bien saberla.

Muchas gracias y salu2.

caricatos · #2 (**permalink**) 03/01/2007, 00:06

Hola:

No creo que sea necesario usar iframes, tan solo necesitas un lenguaje que genere un nº aleatorio... en el cliente sería javascript, pero tal vez sea el menos aconsejable...

function tipoDatos (imagen, descriptor) {
this.imagen = imagen;
this.descriptor = descriptor;
}
var datos = new Array();
datos[0] = new tipoDatos("imagen1.gif", "descripción 1");
datos[1] = new tipoDatos("imagen2.gif", "descripción 2");
i = Math.floor(Math.random() * datos.length);
document.getElementById("imagenAzar").src = datos[i].imagen;
document.getElementById("descriAzar").appendChild = document.createTextNode(datos[i].descriptor);

previamente deberías tener definidos esos 2 elementos:
<img id="imagenAzar" /><span id="descriAzar"></span>

Con php (ahora en el servidor) se crea más o menos así:
<? $i = rand(0, count($datos)); ?>
<img src="<?=$datos->imagen;?>" /><span><?=$datos->descriptor; ?></span>

Saludos

issos · #3 (**permalink**) 03/01/2007, 01:23

Y digo yo... al igual que se pone para que vaya cambiando... habría alguna posibilidad de ponerlo para que sólo cambiara la imagen, pero cada imagen tuviera un hipervínculo a una página determinada?? Sería lo ideal para "rotar" una serie de patrocinadores de una web. Llevo tiempo detrás de un código similar a ese... Ruego a quien pueda tener uan contestación a mi pregunta me responda, pero intente poner el código lo más clarito que pueda

porque ando pelín torpecillo con la programación (soy nobel)

Gracias anticipadas

fidelio · #4 (**permalink**) 03/01/2007, 01:37

Gracias por la respuesta. Yo también soy muy novato en esto.

¿Qué pongo en el head?
¿Donde tengo que colocar (en la pantalla de programación) las etiquetas para cada cosa?.
¿Cómo especifico que en una celda está la imagen y en la otra su correspondiente texto?

Muchas gracias.

caricatos · #5 (**permalink**) 03/01/2007, 01:54

Hola:

La verdad es que para "novatos" como admiten ser, tal vez sea mejor javascript, pero si se dispone de un lenguaje del servidor sería bastante mejor (hay gente que deshabilita javascript)

Un ejemplo de página sería:

Código:

<html>
	<head>
		<title>
			efecto
		</title>
		<script type="text/javascript">
			function tipoDatos (imagen, descriptor) {
				this.imagen = imagen;
				this.descriptor = descriptor;
			}
			var datos = new Array();
			datos[0] = new tipoDatos("http://www.pepemolina.com/galeria/fotos/mini/Diapositiva81.jpg", "descripción 1");
			datos[1] = new tipoDatos("http://www.pepemolina.com/galeria/fotos/mini/Diapositiva82.jpg", "descripción 2");
			datos[2] = new tipoDatos("http://www.pepemolina.com/galeria/fotos/mini/Diapositiva52.jpg", "descripción 3");
			function azar() {
				i = Math.floor(Math.random() * datos.length);
				document.getElementById("imagenAzar").src = datos[i].imagen;
				document.getElementById("descriAzar").appendChild(document.createTextNode(datos[i].descriptor));
			}
		</script>
	</head>
	<body onload="azar()">
		<img id="imagenAzar" /><span id="descriAzar"></span>
	</body>
</html>

Con respecto al enlace, bastaría que la etiqueta span se cambiase por a.

Saludos

fidelio · #6 (**permalink**) 03/01/2007, 17:41

Voy a plantear la cuestión de una forma más sencilla, porque soy bastante negado (lo admito y lo siento), pero creo que me he explicado mal.

Mucho más sencillo, ¿cómo puedo generar una carga aleatoria de páginas html?.

Gracias.

issos · #7 (**permalink**) 08/01/2007, 07:12

Caricatos, he logrado colocar bien el código para realizar el iframe, pero no se me activa el hipervínculo al pinchar sobre la imagen (aparece como si fuera una imagen fija) aún cambiando el spam por el a... puedes echarme un cable con ello??

issos · #8 (**permalink**) 09/01/2007, 01:10

Caricatos, por favor, echale un vistazo al código y dime exáctamente que hay que modificar para que cada imagen aleatoria tenga relacionado un hipervínculo... digamos que lo necesito para que en la parte superior de mi web aparezca un patrocinador diferente en cada ocasión. Muchas gracias anticipadas

caricatos · #9 (**permalink**) 09/01/2007, 02:39

Hola:

Faltaba poner el atributo href:

Código:

<html>
	<head>
		<title>
			efecto
		</title>
		<script type="text/javascript">
			function tipoDatos (imagen, descriptor, enlace) {
				this.imagen = imagen;
				this.descriptor = descriptor;
				this.enlace = enlace;
			}
			var datos = new Array();
			datos[0] = new tipoDatos("http://www.pepemolina.com/galeria/fotos/mini/Diapositiva81.jpg", "descripción 1", "http://www.caricatos.net");
			datos[1] = new tipoDatos("http://www.pepemolina.com/galeria/fotos/mini/Diapositiva82.jpg", "descripción 2", "http://www.forosdelweb.com");
			datos[2] = new tipoDatos("http://www.pepemolina.com/galeria/fotos/mini/Diapositiva52.jpg", "descripción 3", "http://www.tunait.com/javascript");
			function azar() {
				i = Math.floor(Math.random() * datos.length);
				document.getElementById("imagenAzar").src = datos[i].imagen;
				document.getElementById("descriAzar").href = datos[i].enlace;
				document.getElementById("descriAzar").appendChild
(document.createTextNode(datos[i].descriptor));
			}
		</script>
	</head>
	<body onload="azar()">
		<img id="imagenAzar" /><a id="descriAzar"></a>
	</body>
</html>

Fidelio: Si lo quieres en un frame/iframe, usa esa etiqueta y el atributo sería src.

Saludos

issos · #10 (**permalink**) 09/01/2007, 04:11

Y la posibilidad de hacer algo similar a lo que se ve en la parte inferior de esta web (almogavares.subweb.eu) pero con un ancho un poco inferior (como la mitad de una página en resolución 800x600)??