Foros del Web » Creando para Internet » HTML »

ayuda con baner rotativos

Estas en el tema de ayuda con baner rotativos en el foro de HTML en Foros del Web. bueno hola a todos antes que nada , bueno paso a comentarles mi problema , estoy diseñando una web ,pero tengo un problema , quisiera ...
  #1 (permalink)  
Antiguo 17/12/2010, 08:44
 
Fecha de Ingreso: diciembre-2010
Mensajes: 19
Antigüedad: 7 años
Puntos: 0
ayuda con baner rotativos

bueno hola a todos antes que nada ,

bueno paso a comentarles mi problema , estoy diseñando una web ,pero tengo un problema , quisiera saber si me podrian ayudar para cuando yo señale cada enlace de la barra de navecion me cambie el banner de la pagina , muchas gracias cualquier cosa me avisan i pongo el codigo que estoi usando , muchas gracias
  #2 (permalink)  
Antiguo 18/12/2010, 09:16
 
Fecha de Ingreso: diciembre-2010
Mensajes: 19
Antigüedad: 7 años
Puntos: 0
Respuesta: ayuda con baner rotativos

por favor chikos ayudenme
  #3 (permalink)  
Antiguo 18/12/2010, 17:13
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: ayuda con baner rotativos

lukkifrag:

si, sería mejor que indiques la url de tu página.
Por otra parte el término "señalar" es un poco ambiguo.
al pasar el mouse sobre los links? al hacerles click? lo último supondría que cambias de página... bueno faltan datos

saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #4 (permalink)  
Antiguo 18/12/2010, 21:51
 
Fecha de Ingreso: diciembre-2010
Mensajes: 19
Antigüedad: 7 años
Puntos: 0
Respuesta: ayuda con baner rotativos

bueno me voy a expresar un poco mejor , quiero usar la propiedad onmouseover y onmouseout , para cuando pasas el mouse sobre un enlace determinado de la barra de navegacion , cambie el banner que se encontraria en la parte superior de la misma pagina , no poseo url , ya que recien es un proyecto a web y no la he subido a ningun servidor ,
  #5 (permalink)  
Antiguo 18/12/2010, 22:28
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: ayuda con baner rotativos

Bueno, algo muy básico podria ser esto



Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >
  4. <title>XHTML 1.0 transitional</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7. /*<![CDATA[*/
  8.  
  9. img#ia{
  10. border: solid 1px #000;
  11. }
  12.  
  13. /*]]>*/
  14.  
  15. <script type="text/javascript">
  16. //<![CDATA[
  17.  
  18. function cambiar(imagen){
  19. document.getElementById("ia").src = imagen;
  20. }
  21.  
  22. //]]>
  23. </head>
  24. <div>
  25. <img id="ia" src="1.jpg" alt="" />
  26. </div>
  27. <p><a href="#" onmouseover="cambiar('2.jpg');">imagen 2</a></p>
  28. <p><a href="#" onmouseover="cambiar('3.jpg');" onmouseout="cambiar('1.jpg');">imagen 3</a></p>
  29. <!-- ©2000 Emprear.com -->
  30. </body>
  31. </html>

Al segundo link le puse un mouseout para quue restituya la imagen original.
si tus imagenes son todas del mismo tamaño, podes definir el width y height en la misma imagen, si no te conviene a la capa que contiene a la imagen fijarle un valor de ancho y alto, de por lo menos el tamaño de la mayor de tus imágenes.

Otra mejora sería hacer una precarga de las imagenes que aún no se cargaron, una forma de hacerlo con css seria, a continuación del <body> incluir
<span class="precarga"><img src="2.jpg" alt="" /><img src="3.jpg" alt="" /></span>
y en el css darle a la clase

Código CSS:
Ver original
  1. .precarga{
  2. display: none;
  3. }


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 18/12/2010, 23:46
 
Fecha de Ingreso: diciembre-2010
Mensajes: 19
Antigüedad: 7 años
Puntos: 0
Respuesta: ayuda con baner rotativos

hay algo que no me quedo bien claro, en la parte donde abres el div , ahi tendria qe poner el div donde esta colocado el banner ? ?
  #7 (permalink)  
Antiguo 18/12/2010, 23:55
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: ayuda con baner rotativos

Bueno, no se como has diseñado la página, digamos que el banner es el conjunto del div+la imagen. Y esto es suponiendo que tu banner sea una imagen, podria ser un texto, en definitiva, en el ejemplo, para probarlo, basta que copies el codigo, y busques tres imagenes de ejemplo. La script en si, reemplaza el src de la imagen de id="ia" por otra, que es la que se le pasa como parámetro en la función cambiar(imagen);

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #8 (permalink)  
Antiguo 19/12/2010, 12:58
 
Fecha de Ingreso: diciembre-2010
Mensajes: 19
Antigüedad: 7 años
Puntos: 0
Respuesta: ayuda con baner rotativos

no entiendo bien lo que hay que remplazar aqui te subo el css y el html y me explicas bien , porque no entendi :D ,

Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<
title>Bextreme</title>
<
link href="style.css" rel="stylesheet" type="text/css" />
<
style type="text/css">
<
style type="text/css">
/*<![CDATA[*/
 
img#ia{
bordersolid 1px #000;
}
 
/*]]>*/
</style>
 
<
script type="text/javascript">
//<![CDATA[
 
function cambiar(imagen){
document.getElementById("ia").src imagen;
}
 
//]]>
</script>
<!--
.Estilo3 {
    color: #000000;
    margin-right: 10px;
}
.Estilo7 {
    color: #FFFFFF;
    margin-left: 5px;
}
.Estilo8 {color: #FFFFFF}
-->
</style>
</head>




<body background="images/fondo.jpg">
<div id="banner"></div>
<div id="navegacion">
<table width="1000" height="28" border="0" cellpadding="2" cellspacing="1">
  <tr>
    <th width="117" height="26" background="images/navegacion-fondo.jpg" scope="col"><span class="Estilo3"><span class="Estilo7">Servidores</span></span></th>
    <th width="112" background="images/navegacion-fondo.jpg" scope="col"><span class="Estilo7">Hosting Web </span></th>
    <th width="114" background="images/navegacion-fondo.jpg" scope="col"><span class="Estilo7"><a href="/gameserver.html">Game Server </a></span></th>
    <th width="114" background="images/navegacion-fondo.jpg" scope="col"><span class="Estilo7">Contacto</span></th>
    <th width="114" background="images/navegacion-fondo.jpg" scope="col"><span class="Estilo7">Sobre Nosotros </span></th>
    <th width="210" background="images/navegacion-fondo.jpg" scope="col"><span class="Estilo7">Preguntas Frecuentes  </span></th>
    <th width="91" background="images/navegacion-fondo.jpg" scope="col"><span class="Estilo7">Pagos</span></th>
    <th width="95" background="images/navegacion-fondo.jpg" scope="col"><span class="Estilo8">Foro</span></th>
  </tr>
</table>

</div>
<div id="menu-servidores">
<marquee direction="up" scrolldelay="50" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()">
<p class="Estilo8">200.80.52.150:27015</p>
<p class="Estilo8">200.80.52.150:27016</p>
<p class="Estilo8">200.80.52.150:27017</p>
<p class="Estilo8">200.80.52.150:27018</p>
<p class="Estilo8">200.80.52.150:27019</p>
<p class="Estilo8">200.80.52.150:27020</p>
<p class="Estilo8">200.80.52.150:27021</p>
<p class="Estilo8">200.80.52.150:27022</p>
<p class="Estilo8">200.80.52.150:27023</p>
<p class="Estilo8">200.80.52.150:27024</p>
<p class="Estilo8">200.80.52.150:27025</p>
<p class="Estilo8">200.80.52.150:27026</p>
<p class="Estilo8">200.80.52.150:27017</p>
<p class="Estilo8">200.80.52.150:27028</p>
<p class="Estilo8">200.80.52.150:27030</p>
<p class="Estilo8">200.80.52.150:27031</p>
<p class="Estilo8">200.80.52.150:27032</p>
</marquee>
</div>


<div id="contenido">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div id="tabla-visitas">
<table width="159" border="0" cellpadding="2" cellspacing="1" id="tabla-visitas">
  <tr>
    <th width="147" scope="col"><!-- <visitcounter.org> --><img src="http://es.visitcounter.org/f95a3496973ae782dfb1c8443fe53075/1/1" width="60" height="25" border="0"><img src="http://es.visitcounter.org/f95a3496973ae782dfb1c8443fe53075/2/1" width="50" height="25" border="0"><img src="http://es.visitcounter.org/f95a3496973ae782dfb1c8443fe53075/3/1" width="30" height="25" border="0"></a><br><a href=</th>
  </tr>
</table>
</div>
</body>
</html> 



el csss

Código PHP:
/* CSS Document */
#banner {
    
background-image:url(images/banner.jpg);
    
float:left;
    
width:1000px;
    
height200px;
    
margin-top2px;
    
margin-left5px;
    
margin-right5px;
}

#navegacion {
  
margin-left5px;
  
margin-right5px;
  
width:1000px;
}

#menu-servidores {
    
background-imageurl(images/fondo-menu-servidores.jpg);
    
width:165px;
    
height:200px;
    
float:left;
    
margin-left5px;
    
margin-top20px;
    
overflowhidden;
    
margin-bottom0px;
  }
  
#tabla-visitas{
float:left;
    }

#contenido {background-image: url(images/fondo-menu-servidores.jpg);
   
floatleft;
   
width780px;
   
height:300px;
   
overflow:hidden;
   
margin-right:7px;
   
margin-left:33px;
   
margin-top20px;
   } 
  #9 (permalink)  
Antiguo 19/12/2010, 13:37
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: ayuda con baner rotativos

Vos te tomaste el trabajo de analizar mi código?
ni siquiera veo que hayas implementado la función en el que estas pasando.


te dejo una demo

http://foros.emprear.com/jsdemo/ia/cambia.html




__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #10 (permalink)  
Antiguo 19/12/2010, 14:07
 
Fecha de Ingreso: diciembre-2010
Mensajes: 19
Antigüedad: 7 años
Puntos: 0
Respuesta: ayuda con baner rotativos

se esta perfecto tu ejemplo , pero noce como colocarlo al codigo , si me podrias hacer tan solo 1 de los ejemplo de la barra de navegacion de mi codigo , con solo eso podria entender como va colocado el codigo , porque tengo muchas dudas
  #11 (permalink)  
Antiguo 19/12/2010, 14:11
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: ayuda con baner rotativos

lukkifrag

<th width="114" background="images/navegacion-fondo.jpg" scope="col"><span class="Estilo7"><a href="/gameserver.html" onmouseover="cambiar('3.jpg');" onmouseout="cambiar('1.jpg');">Game Server </a></span></th>

y reemplazas los 1.jpg y 3.jpg por tus imágenes


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #12 (permalink)  
Antiguo 19/12/2010, 14:28
 
Fecha de Ingreso: diciembre-2010
Mensajes: 19
Antigüedad: 7 años
Puntos: 0
Respuesta: ayuda con baner rotativos

PERFECTO Y EN
<HEAD> <script type="text/javascript">
//<![CDATA[

function cambiar(imagen){
document.getElementById("ia").src = imagen;
}

//]]>
</script>
</HEAD>

PONGO EL CODIGO ASI COMO ESTA O TENGO QUE MODIFICAR ALGO ?


Y MUCHAS GRACIAS POR LA AYUDA RECIBIDA , DIME COMO HAGO PARA DEJARTE REPUTACION , CARMA , O ALGUN OTRO SISTEMA DE PUNTUACION QUE USEN EN ESTE FORO
  #13 (permalink)  
Antiguo 19/12/2010, 14:42
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: ayuda con baner rotativos

lukkifrag:

si, ponelo asi, en realidad los CDATA están para hacerlo XHTML compatible

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. //<![CDATA[
  3.  
  4. function cambiar(imagen){
  5. document.getElementById("ia").src = imagen;
  6. }
  7.  
  8. //]]>
  9. </script>

tambien podrias probar simplemente


Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.  
  3. function cambiar(imagen){
  4. document.getElementById("ia").src = imagen;
  5. }
  6.  
  7. </script>



Por lo otro, con que lo hagas funcionar, me doy por satisfecho.


saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #14 (permalink)  
Antiguo 19/12/2010, 14:49
 
Fecha de Ingreso: diciembre-2010
Mensajes: 19
Antigüedad: 7 años
Puntos: 0
Respuesta: ayuda con baner rotativos

Perfecto lo probare y te contare aver que onda , muchas gracias por averme ayudado...



Disculpa las faltas de ortografia , no voi al colegio

:d
  #15 (permalink)  
Antiguo 19/12/2010, 15:04
 
Fecha de Ingreso: diciembre-2010
Mensajes: 19
Antigüedad: 7 años
Puntos: 0
Respuesta: ayuda con baner rotativos

he colocado el codigo como me dijiste pero no obtengo resultado alguno

aqui te subo los codigos editados asi me puedes decir que error estoy cometiendo

Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<
title>Bextreme</title>
<
link href="style.css" rel="stylesheet" type="text/css" />
<
script type="text/javascript">
 
function 
cambiar(imagen){
document.getElementById("ia").src imagen;
}
 
</script>
<style type="text/css">
<!--
.Estilo3 {
    color: #000000;
    margin-right: 10px;
}
.Estilo7 {
    color: #FFFFFF;
    margin-left: 5px;
}
.Estilo8 {color: #FFFFFF}
-->
</style>
</head>




<body background="images/fondo.jpg">
<div id="banner"></div>
<div id="navegacion">
<table width="1000" height="28" border="0" cellpadding="2" cellspacing="1">
  <tr>
    <th width="117" height="26" background="images/navegacion-fondo.jpg" scope="col"><span class="Estilo3"><span class="Estilo7">Servidores</span></span></th>
    <th width="112" background="images/navegacion-fondo.jpg" scope="col"><span class="Estilo7">Hosting Web </span></th>
    <th width="114" background="images/navegacion-fondo.jpg" scope="col"><span class="Estilo7"><a href="/gameserver.html" onmouseover="cambiar('images/game-server.jpg');" onmouseout="cambiar('images/banner.jpg');">Game Server </a></span></th>
    <th width="114" background="images/navegacion-fondo.jpg" scope="col"><span class="Estilo7">Contacto</span></th>
    <th width="114" background="images/navegacion-fondo.jpg" scope="col"><span class="Estilo7">Sobre Nosotros </span></th>
    <th width="210" background="images/navegacion-fondo.jpg" scope="col"><span class="Estilo7">Preguntas Frecuentes  </span></th>
    <th width="91" background="images/navegacion-fondo.jpg" scope="col"><span class="Estilo7">Pagos</span></th>
    <th width="95" background="images/navegacion-fondo.jpg" scope="col"><span class="Estilo8">Foro</span></th>
  </tr>
</table>
</div>
<div id="menu-servidores">
<marquee direction="up" scrolldelay="50" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()">
<p class="Estilo8">200.80.52.150:27015</p>
<p class="Estilo8">200.80.52.150:27016</p>
<p class="Estilo8">200.80.52.150:27017</p>
<p class="Estilo8">200.80.52.150:27018</p>
<p class="Estilo8">200.80.52.150:27019</p>
<p class="Estilo8">200.80.52.150:27020</p>
<p class="Estilo8">200.80.52.150:27021</p>
<p class="Estilo8">200.80.52.150:27022</p>
<p class="Estilo8">200.80.52.150:27023</p>
<p class="Estilo8">200.80.52.150:27024</p>
<p class="Estilo8">200.80.52.150:27025</p>
<p class="Estilo8">200.80.52.150:27026</p>
<p class="Estilo8">200.80.52.150:27017</p>
<p class="Estilo8">200.80.52.150:27028</p>
<p class="Estilo8">200.80.52.150:27030</p>
<p class="Estilo8">200.80.52.150:27031</p>
<p class="Estilo8">200.80.52.150:27032</p>
</marquee>
</div>


<div id="contenido">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div id="tabla-visitas">
<table width="159" border="0" cellpadding="2" cellspacing="1" id="tabla-visitas">
  <tr>
    <th width="147" scope="col"><!-- <visitcounter.org> --><img src="http://es.visitcounter.org/f95a3496973ae782dfb1c8443fe53075/1/1" width="60" height="25" border="0"><img src="http://es.visitcounter.org/f95a3496973ae782dfb1c8443fe53075/2/1" width="50" height="25" border="0"><img src="http://es.visitcounter.org/f95a3496973ae782dfb1c8443fe53075/3/1" width="30" height="25" border="0"></a><br><a href=</th>
  </tr>
</table>
</div>
</body>
</html> 




aki el css

Código PHP:
/* CSS Document */
#banner {
    
background-image:url(images/banner.jpg);
    
float:left;
    
width:1000px;
    
height200px;
    
margin-top2px;
    
margin-left5px;
    
margin-right5px;
}

#navegacion {
  
margin-left5px;
  
margin-right5px;
  
width:1000px;
}

#menu-servidores {
    
background-imageurl(images/fondo-menu-servidores.jpg);
    
width:165px;
    
height:200px;
    
float:left;
    
margin-left5px;
    
margin-top20px;
    
overflowhidden;
    
margin-bottom0px;
  }
  
#tabla-visitas{
float:left;
    }

#contenido {background-image: url(images/fondo-menu-servidores.jpg);
   
floatleft;
   
width780px;
   
height:300px;
   
overflow:hidden;
   
margin-right:7px;
   
margin-left:33px;
   
margin-top20px;
   } 

y tambien te dejo el link de prueba que estoi usando

http://www.bextreme-cs.com.ar/b3x/
  #16 (permalink)  
Antiguo 19/12/2010, 15:15
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: ayuda con baner rotativos

Es que no pusiste ninguna imagen con id="ia" dentro de tu div banner, esa es la imagen que se reemplaza

usa esto

Código HTML:
Ver original
  1. <div id="banner"><img id="ia" src="/b3x/images/banner.jpg" alt=""></div>




Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: rotativos, banner
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:35.