ayuda con baner rotativos

lukkifrag · #1 (**permalink**) 17/12/2010, 08:44

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

lukkifrag · #2 (**permalink**) 18/12/2010, 09:16

por favor chikos ayudenme

emprear · #3 (**permalink**) 18/12/2010, 17:13

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

lukkifrag · #4 (**permalink**) 18/12/2010, 21:51

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 ,

emprear · #5 (**permalink**) 18/12/2010, 22:28

Bueno, algo muy básico podria ser esto

Código HTML:

Ver original<!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" xml:lang="es" lang="es" >
<head>
<title>XHTML 1.0 transitional</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
 
img#ia{
border: solid 1px #000;
}
 
/*]]>*/
</style>
 
<script type="text/javascript">
//<![CDATA[
 
function cambiar(imagen){
document.getElementById("ia").src = imagen;
}
 
//]]>
</script>
</head>
<body>
<div>
<img id="ia" src="1.jpg" alt="" />
</div>
<p><a href="#" onmouseover="cambiar('2.jpg');">imagen 2</a></p>
<p><a href="#" onmouseover="cambiar('3.jpg');" onmouseout="cambiar('1.jpg');">imagen 3</a></p>
<!-- ©2000 Emprear.com -->
</body>
</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.precarga{
display: none;
}

Saludos

lukkifrag · #6 (**permalink**) 18/12/2010, 23:46

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 ? ?

emprear · #7 (**permalink**) 18/12/2010, 23:55

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

lukkifrag · #8 (**permalink**) 19/12/2010, 12:58

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{ 
border: solid 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; 
    height: 200px; 
    margin-top: 2px; 
    margin-left: 5px; 
    margin-right: 5px; 
} 
 
#navegacion { 
  margin-left: 5px; 
  margin-right: 5px; 
  width:1000px; 
} 
 
#menu-servidores { 
    background-image: url(images/fondo-menu-servidores.jpg); 
    width:165px; 
    height:200px; 
    float:left; 
    margin-left: 5px; 
    margin-top: 20px; 
    overflow: hidden; 
    margin-bottom: 0px; 
  } 
   
#tabla-visitas{ 
float:left; 
    } 
 
#contenido {background-image: url(images/fondo-menu-servidores.jpg); 
   float: left; 
   width: 780px; 
   height:300px; 
   overflow:hidden; 
   margin-right:7px; 
   margin-left:33px; 
   margin-top: 20px; 
   }

emprear · #9 (**permalink**) 19/12/2010, 13:37

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

lukkifrag · #10 (**permalink**) 19/12/2010, 14:07

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

emprear · #11 (**permalink**) 19/12/2010, 14:11

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

lukkifrag · #12 (**permalink**) 19/12/2010, 14:28

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

emprear · #13 (**permalink**) 19/12/2010, 14:42

lukkifrag:

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

Código Javascript:

Ver original<script type="text/javascript">
//<![CDATA[
 
function cambiar(imagen){
document.getElementById("ia").src = imagen;
}
 
//]]>
</script>

tambien podrias probar simplemente

Código Javascript:

Ver original<script type="text/javascript">
 
function cambiar(imagen){
document.getElementById("ia").src = imagen;
}
 
</script>

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

saludos

lukkifrag · #14 (**permalink**) 19/12/2010, 14:49

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

Disculpa las faltas de ortografia , no voi al colegio

:d

lukkifrag · #15 (**permalink**) 19/12/2010, 15:04

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;
    height: 200px;
    margin-top: 2px;
    margin-left: 5px;
    margin-right: 5px;
}

#navegacion {
  margin-left: 5px;
  margin-right: 5px;
  width:1000px;
}

#menu-servidores {
    background-image: url(images/fondo-menu-servidores.jpg);
    width:165px;
    height:200px;
    float:left;
    margin-left: 5px;
    margin-top: 20px;
    overflow: hidden;
    margin-bottom: 0px;
  }
  
#tabla-visitas{
float:left;
    }

#contenido {background-image: url(images/fondo-menu-servidores.jpg);
   float: left;
   width: 780px;
   height:300px;
   overflow:hidden;
   margin-right:7px;
   margin-left:33px;
   margin-top: 20px;
   }

y tambien te dejo el link de prueba que estoi usando

http://www.bextreme-cs.com.ar/b3x/

emprear · #16 (**permalink**) 19/12/2010, 15:15

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<div id="banner"><img id="ia" src="/b3x/images/banner.jpg" alt=""></div>

Saludos