Banner rotatorio en XHTML, CSS2 y ASP

PabloManuel · #1 (**permalink**) 23/04/2012, 03:25

Quiero hacer un tipo de banner como este:

http://www.megasur.es/

El problema es que lo quiero hacer desde una base ya hecha con asp y mysql. Lo que tengo es esto:

A través de un gestor de contenido hecho a mano el usuario da de alta en la tabla portadas un registro con:

Un título
Un comentario

Después le pido que suba un jpg, el nombre del jpg no lo registro en la db ya que lo busco a través del id autonumérico de la tabla cambiándole el nombre.

Es decir, subo el jpg archivo.jpg y lo guardo así: dominio.com/fotosportada/1234.jpg

1234 sería el ID del registro que he creado.

A parte la tabla tiene otro campo que es portada_seleccionada. A través de otro formulario el usuario selecciona qué portada es la que quiere para el index

Cuando cargo el index, hago una consulta (SELECT * FROM portadas where porselec='SELECCIONADA') buscanco la portada seleccionada y la muestro. De esta manera saco el nombre del archivo: "fotosportada/" & rs("PORcod") & ".jpg"

Pero claro la portada es siempre la misma hasta que no cambie a otra en el gestor de contenido.

Quiero hacer un banner rotativo a través de esta base.

Quiero que el usuario pueda seleccionar una o varias portadas para que aparezcan en el index, cada vez que se cargue el index se hará una consulta a la DB para saber cuales son las portadas a mostrar e irán girando.

La página está en XHTML, CSS2 y ASP

Veo que hay muchas formas de hacerlo
¿qué código es el más sencillo?
¿qué me viene mejor?

IsaBelM · #2 (**permalink**) 23/04/2012, 05:34

el lenguaje que te falta es javascript. esto te dará idea de como hacerlo

Cita:

<%
Dim Imagen, Url, Texto, i, j
Imagen = 0
Url = 1
Texto = 2

' conexión
' consulta

registros = rs.getrows()

rs.Close
Set rs = Nothing
oConn.Close
Set oConn = Nothing

Dim ristra_img(5), ristra_url(5), ristra_texto(5)
For i = 0 to UBound(registros,2)
ristra_img(i) = registros(Imagen,i)
ristra_url(i) = registros(Url,i)
ristra_texto(i) = registros(Texto,i)
Next 'i
%>

<html>
<head>
<title>Rotador de publicidad</title>

<script type="text/javaScript">
var publicidad = [<%="'" & Join(ristra_img, "', '") & "'"%>];
var direccion = [<%="'" & Join(ristra_url, "', '") & "'"%>];
var texto = [<%="'" & Join(ristra_texto, "', '") & "'"%>];

var contador = 0;
var url = "";

function RotarPublicidad(){
if(contador > 4)

contador = 0;

document.getElementById("publicidad").innerHTML = "<img src="+publicidad[contador]+" width='62px' height='12px' title="+texto[contador]+" border='0px' />"
url = direccion[contador];
document.getElementById("texto").innerHTML = texto[contador];
document.getElementById("publicidad_peq_4").style. background="#FFFFFF";
document.getElementById("publicidad_peq_"+contador ).style.background="#FF0000";
if (contador >= 1)
document.getElementById("publicidad_peq_"+(contado r-1)).style.background="#FFFFFF";

contador++;
}

timer = setInterval("RotarPublicidad()", 2000);
window.onload = RotarPublicidad;

</script>
</HEAD>
<body>
<a href="#" onClick="window.open(url,'Ventana');">
<div id="publicidad"></div>
</a>

<div id="texto"></div>

<table border="1">
<tr>
<%
For j = 0 to UBound(registros,2)
%>
<td id="publicidad_peq_<%=j%>">
<img src="<%=registros(Imagen,j)%>" />
</td>
<%
Next 'j
%>
</tr>
</table>
</body>
</html>

pd: pide que te muevan el tema al foro de javascript o asp

PabloManuel · #3 (**permalink**) 25/04/2012, 06:29

puffff.... pues nada voy a ponerme a ello, cuando tenga el sistema completo con funciones lo pongo por aquí, todo lo que he encontrado para DB's es muy ambiguo y antiguo.

Por favor, moverme el tema al foro de javascript o asp

PD. a parte de javascript ¿no hay otra forma?

PabloManuel · #4 (**permalink**) 25/04/2012, 06:56

He modificado el código con mi datos de la base de datos:

Código ASP:

Ver original<!-- #include file="include/dbon.inc"-->
<%
    Dim Imagen, Url, Texto, i, j
    Dim ristra_img, ristra_url, ristra_texto
    Imagen = 0
    Url = 1
    Texto = 2
    
    set rs = Conn.Execute("SELECT * FROM portadas")
    
    registros = rs.getrows()
    rs.Close
    Set rs = Nothing
    
    ristra_img = ""
    ristra_url = ""
    ristra_texto = ""
    For i = 0 to UBound(registros,2)
    ristra_img = ristra_img & "'" & registros(Imagen,i) &"',"
    ristra_url = ristra_url & "'" & registros(Url,i) &"',"
    ristra_texto = ristra_texto & "'" & registros(Texto,i) &"',"
    Next 'i
%>
 
 
<html>
    <head>
        <title>Rotador de publicidad</title>
        
        <script type="text/javaScript">
            var publicidad = [<%=Left(ristra_img,Len(ristra_img)-1)%>];
            var direccion = [<%=Left(ristra_url,Len(ristra_url)-1)%>];
            var texto = [<%=Left(ristra_texto,Len(ristra_texto)-1)%>];
            
            var contador = 0;
            var url = "";
            
            function RotarPublicidad(){
                if(contador > 4)
                
                contador = 0;
                
                document.getElementById("publicidad").innerHTML = "<img src="+publicidad[contador]+" width='62px' height='12px' title="+texto[contador]+" border='0px' />"
                url = direccion[contador];
                document.getElementById("texto").innerHTML = texto[contador];
                document.getElementById("publicidad_peq_4").style. background="#FFFFFF";
                document.getElementById("publicidad_peq_"+contador ).style.background="#FF0000";
                if (contador >= 1)
                document.getElementById("publicidad_peq_"+(contado r-1)).style.background="#FFFFFF";    
                
                contador++;
                }
            
            
            timer = setInterval("RotarPublicidad()", 2000);
            window.onload = RotarPublicidad;
        
        </script>
    </HEAD>
    
    <body>
        <a href="#" onClick="window.open(url,'Ventana');">
            <div id="publicidad"></div>
        </a>
        
        <div id="texto"></div>
        
        <table border="1">
            <tr>
                <%
                For j = 0 to UBound(registros,2)
                    %>
                    <td id="publicidad_peq_<%=j%>">
                        <img src="<%="fotospor/" & registros(Imagen,j) & "1.jpg"%>" alt="">
                    </td>
                    <%
                Next 'j
                %>
            </tr>
        </table>
    </body>
</html>
<!-- #include file="include/dboff.inc"-->

Pero no funciona, me pone una imagen a derecha de la otra a través del For j = 0 to UBound(registros,2) ¿donde se está ejecutando la función de javascript?

PD. nunca he hecho nada en java.

IsaBelM · #5 (**permalink**) 25/04/2012, 15:21

el código funciona. otra cosa es que el layout no sea el que tú quieres, de ahí,

Cita:

esto te dará idea de como hacerlo

has eliminado las matrices y has creado variables

preguntas que donde se está ejecutando el javascript. no entiendo la pregunta, pero supondré que te refieres a esto

Cita:

timer = setInterval("RotarPublicidad()", 2000); // temporizador para invocar a la función recursivamente
window.onload = RotarPublicidad; // cuando la página está cargada se invoca a la función

PabloManuel · #6 (**permalink**) 26/04/2012, 01:55

Cita:

Iniciado por IsaBelM

has eliminado las matrices y has creado variables

¿Te refieres a esto?:

Código ASP:

Ver originalristra_img = ""
    ristra_url = ""
    ristra_texto = ""
    For i = 0 to UBound(registros,2)
    ristra_img = ristra_img & "'" & registros(Imagen,i) &"',"
    ristra_url = ristra_url & "'" & registros(Url,i) &"',"
    ristra_texto = ristra_texto & "'" & registros(Texto,i) &"',"

No son matrices, lo que hace es concatenar unos valores con otros y dividir los con ( ' ) la única matriz que veo es la del GetRows

IsaBelM · #7 (**permalink**) 26/04/2012, 04:46

pues claro que no son matrices, son variables con valores concatenados. las matrices que has eliminado son

Cita:

ristra_img(i) = registros(Imagen,i)
ristra_url(i) = registros(Url,i)
ristra_texto(i) = registros(Texto,i)

PabloManuel · #8 (**permalink**) 26/04/2012, 09:38

Pufff... casi lo tenía pero se me estaba haciendo demasiado complejo y tenía que acabar.

Me he decidido por jquery y una librería: jcarousel

Sencillo, corto y funciona de lujo con un millón de posibilidades y ya está hecho:

http://sorgalla.com/jcarousel/

Un ejemplo, de aquí saqué lo que necesité:

http://www.seballero.com/blog/jcarou...rrusel-jquery/

PD. gracias isabel, no creas que lo voy a dejar, yo para mis páginas prefiero código hecho por mi para comprenderlo mejor y no tener miedo a tocarlo después.... más adelante me pondré, gracias por tu paciencia.