mover imagenes dentro de un iframe

calbart · #1 (**permalink**) 18/10/2008, 12:23

hola amigos mira tengo un iframe con estas medidas:

Código HTML:

<div align="center">
  <iframe src="publicidad.html" width="995" height="30" scrolling="no" frameborder="0"></iframe>
</div>

Y dentro de este tengo la pagina de publicidad.html que contiene una tabla con una serie de imágenes separadas por columnas. El ancho de la tabla es igual que el del iframe.

Código HTML:

<body>
<tr align="left" valign="top">
      <td width="537" valign="top"><table border="0" width="1225">
  <tbody>
    <tr>
      <td width="91"><img src="picture_library/carpeta_publi/bitubo.jpg" alt="biturbo" width="91" height="25"></td>
      <td width="93"><img src="picture_library/carpeta_publi/gubellini.jpg" alt="gubellini" width="93" height="25"></td>
      <td width="93"><img src="picture_library/carpeta_publi/koni.jpg" alt="koni racing" width="93" height="25"></td>
      <td width="93"><img src="picture_library/carpeta_publi/ceriani.jpg" alt="ceriani" width="93" height="25"></td>
      <td width="93"><img src="picture_library/carpeta_publi/kayaba.jpg" alt="kayaba" width="93" height="25"></td>
      <td width="93"><img src="picture_library/carpeta_publi/sinlubit.jpg" alt="sin lubit" width="93" height="25"></td>
      <td width="93"><img src="picture_library/carpeta_publi/marzocchi.jpg" alt="marzocchi" width="93" height="25"></td>
      <td width="93"><img src="picture_library/carpeta_publi/showa.jpg" alt="showa" width="93" height="25"></td>
      <td width="93"><img src="picture_library/carpeta_publi/ohlins.jpg" alt="&Ouml;hlins" width="93" height="25"></td>
      <td width="93"><img src="picture_library/carpeta_publi/paioli.jpg" alt="paioli" width="93" height="25"></td>
      <td width="93"><img src="picture_library/carpeta_publi/sachs.jpg" alt="sachs" width="93" height="25"></td>
      <td width="93"><img src="picture_library/carpeta_publi/mupo.jpg" alt="mupo" width="93" height="25"></td>
      <td width="57"><img src="picture_library/carpeta_publi/matris.jpg" alt="matris" width="93" height="25"></td>
  </table></td>
    </tr>
  </tbody>
</table>
</body>

mi problema es que debo incluir mas imágenes de publicidad y quiero que las imágenes pasen en horizontal aparezca una y desaparezca por el otro lado a modo de pase de fotos.

No necesito que las imágenes aumenten ni nada solo que pasen para que se puedan ver todas las imágenes publicitarias. Gracias

calbart · #2 (**permalink**) 18/10/2008, 17:56

he probado en flash pero me sale como a golpes ya que debo crear muchos fotogramas pero no consigo el efecto que busco, podría alguien ser tan amable de explicarme mi duda. Muchas gracias.

autonotel · #3 (**permalink**) 18/10/2008, 19:48

Quizá deberías explicarmejor cuál es el efecto que buscas porque por lo que parece lo más apropiado es flash.
Ya que veo que estás introduciéndote en esto puedes probar javascript, con páginas que se reinician cada "x" segundos, y se carguen en el mismo iframe (iframe name="...). Yo preguntaría por allí.
Saludos

calbart · #4 (**permalink**) 19/10/2008, 04:01

Haber lo que busco es lo siguiente:

Estoy desarrollando una web para una empresa de suspensiones.

si te fijas en la dirección que te envío;
http://www.cgsuspensiones.com/portada.html

Bajo del todo hay una linea de imágenes de marcas, vaya debajo de gracia motos.

lo que deseo es que linea de imágenes se desplace hacia la derecha o izq me da lo mismo. La razón es que existe más imágenes ocultas detrás del iframe ya que no me caben. Lo que busco es que se vean todas las publicidades.

Yo utilizo el programa sothink glanda para hacer flash pero tengo mis limitaciones.

Lo ideal seria hacer hacerlo sin flash.

Te paso el codigo de portada.html que lleva el iframe de la ruta publicidad.html

Y el otro de publicidad para que veas como esta montado.

<center>Portada.html<p>

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<LINK REL="SHORTCUT ICON" HREF="faviconcesar.ico">
<title>Portada - CGSuspensiones de competici&oacute;n</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="carlos.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
	background-image: url(picture_library/carpeta_imagenes/fondo.gif);
}
.Estilo2 {	font-family: Geneva, Verdana;
	font-size: 10px;
	line-height: 14px;
}
.Estilo4 {color: #000000}
-->
</style>
<link href="cesar.css" rel="stylesheet" type="text/css">
</head>

<body>
<p align="center"><iframe src="menu.html" align="center" width="995" height="21" scrolling="no" frameborder="0"></iframe></p>
  <table width="997" height="360" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td width="997" align="left" valign="top">
	  <iframe src="portada1.html" align="center" width="995" height="480" scrolling="no" frameborder="0"></iframe> </td>
    </tr>
</table>
<div align="center">
  <iframe src="publicidad.html" width="995" height="30" scrolling="no" frameborder="0"></iframe>
</div>
<div align="center">
  <iframe src="pie.html" width="995" height="16" scrolling="no" frameborder="0"></iframe>
</div>
</body>
</html>

<p>

<center> publicidad.html

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<LINK REL="SHORTCUT ICON" HREF="faviconcesar.ico">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="cesar.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
	background-image: url();
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.Estilo13 {color: #FF0000}
.Estilo18 {	color: #DF0A16;
	font-weight: bold;
}
.Estilo20 {color: #336699}
.Estilo37 {color: #DF0A16}
.Estilo38 {color: #CC3300}
.Estilo39 {
	color: #0099CC;
	font-weight: bold;
}
.Estilo40 {color: #CC0000}
.Estilo44 {
	font-size: 11px;
	color: #DF0A16;
	font-weight: bold;
}
.Estilo46 {color: #FF6600}
.Estilo48 {color: #006699}
.Estilo50 {font-size: 11px; font-style: normal; color: #000033; text-align: left; font-variant: normal; width: auto; line-height: 150%; font-family: Georgia, "Times New Roman", Times, serif;}
.Estilo52 {color: #0066FF}
.Estilo53 {color: #009999}
.Estilo55 {
	color: #CC0000;
	font-weight: bold;
	font-size: 12px;
}
.Estilo56 {
	color: #996600;
	font-weight: bold;
}
-->
</style>
</head>
<body>
<tr align="left" valign="top">
      <td width="537" valign="top"><table border="0" width="1225">
  <tbody>
    <tr>
      <td width="91"><img src="picture_library/carpeta_publi/bitubo.jpg" alt="biturbo" width="91" height="25"></td>
      <td width="93"><img src="picture_library/carpeta_publi/gubellini.jpg" alt="gubellini" width="93" height="25"></td>
      <td width="93"><img src="picture_library/carpeta_publi/koni.jpg" alt="koni racing" width="93" height="25"></td>
      <td width="93"><img src="picture_library/carpeta_publi/ceriani.jpg" alt="ceriani" width="93" height="25"></td>
      <td width="93"><img src="picture_library/carpeta_publi/kayaba.jpg" alt="kayaba" width="93" height="25"></td>
      <td width="93"><img src="picture_library/carpeta_publi/sinlubit.jpg" alt="sin lubit" width="93" height="25"></td>
      <td width="93"><img src="picture_library/carpeta_publi/marzocchi.jpg" alt="marzocchi" width="93" height="25"></td>
      <td width="93"><img src="picture_library/carpeta_publi/showa.jpg" alt="showa" width="93" height="25"></td>
      <td width="93"><img src="picture_library/carpeta_publi/ohlins.jpg" alt="&Ouml;hlins" width="93" height="25"></td>
      <td width="93"><img src="picture_library/carpeta_publi/paioli.jpg" alt="paioli" width="93" height="25"></td>
      <td width="93"><img src="picture_library/carpeta_publi/sachs.jpg" alt="sachs" width="93" height="25"></td>
      <td width="93"><img src="picture_library/carpeta_publi/mupo.jpg" alt="mupo" width="93" height="25"></td>
      <td width="57"><img src="picture_library/carpeta_publi/matris.jpg" alt="matris" width="93" height="25"></td>
  </table></td>
    </tr>
  </tbody>
</table>
</body>
</html>