Hay que tener en cuenta que la versión funcional es la phpbb3, en las demás quizás funcione, pero no se vea muy bien ya que el código está es confirmado para phpbb3.


Son varios pasos que hay que seguir para completar el tuto, vamos con el primero...

El primero, es la edición del código.

Tenemos este script, donde las partes coloreadas son las

Código:

<script>
    jQuery(function() {
    jQuery('.img_list_hp img').mouseover(function() {
    jQuery('#img_list_alt').html(jQuery(this).attr('alt'));
    }).mouseout(function() {
    jQuery('#img_list_alt').html('DESCRIPCIÓN DE BOTONES');
    });
    });
    </script>
    <div class="img_list_hp"><a href="LINK"><img height="59" src="LINK DE LA IMAGEN" alt="DESCRIPCIÓN"><span>Normas </span></a></div>
    <div style="clear: both" id="img_list_alt">DESCRIPCIÓN DE BOTONES</div>

Es la descripción que va a ir luego antes de pasar el mouse encima de uno de los botones, aquí tenemos ¡¡Pasa el Mouse por encima de las imágenes para saber más sobre nuestro servicio!!. [Son dos veces que hay que poner lo mismo]

LINK a donde llevará al presionar el botón.
Link de la imagen que se mostrará dentro del cuadro.
Descripción que saldrá al lado de presionar el botón.
Título que se mostrará en el cuadro.
El tamaño en que saldrá la imagen del cuadro.

Luego de editar el código, tenéis que pegarlo en el mensaje de índice... Pero antes tenéis que agregar un código CSS para que los cuadros tengan el propio estilo.

Código:

.img_list_hp {
    border: 1px solid #0372BE;
    padding: 0;
    float: left;
    color: #FFF !important;
    width: auto;
    font-size: 11px;
    text-align: center;
    margin: auto 5px auto auto;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    }

    .img_list_hp:hover {
    background-color: #DCEAF5;
    }

    .img_list_hp img {
    padding: 8px 15px;
    }

    .img_list_hp span {
    background-color: #0372BE;
    color #FFF;
    display: block;
    padding: 0 10px;
    }
    .img_list_hp a {
    color: #FFF !important;
    text-decoration: none;
    }
    #img_list_alt {
    background-image: url(IMAGENFLECHA);
    background-repeat: no-repeat;
    background-position: 20px 0;
    padding-top: 13px;
    padding-left: 55px;
    }



La imagen de la flecha que saldrá a los lados


EL CÓDIGO QUE SE DA ES PARA SOLO UNA IMAGEN, SI QUIERES AGREGAR OTRA, SOLO DEBES AGREGAR ANTES DE EL
ESTO:

Código:

<div class="img_list_hp"><a href="LINK"><img height="59" src="LINK DE LA IMAGEN" alt="DESCRIPCIÓN"><span>Normas </span></a></div>




Donde debes editar las mismas cosa nombradas anteriormente, ejemplo de como quedaría:


Código:

<script>
    jQuery(function() {
    jQuery('.img_list_hp img').mouseover(function() {
    jQuery('#img_list_alt').html(jQuery(this).attr('alt'));
    }).mouseout(function() {
    jQuery('#img_list_alt').html('DESCRIPCIÓN DE BOTONES');
    });
    });
    </script>
    <div class="img_list_hp"><a href="LINK"><img height="59" src="LINK DE LA IMAGEN" alt="DESCRIPCIÓN"><span>Normas </span></a></div>
    <div class="img_list_hp"><a href="LINK"><img height="59" src="LINK DE LA IMAGEN" alt="DESCRIPCIÓN"><span>Normas </span></a></div>
    <div style="clear: both" id="img_list_alt">DESCRIPCIÓN DE BOTONES</div>