FIFAParches Community

Primero edito, luego pruebo... ahí creo que juego.
 
HomeSearchMemberlistUsergroupsGalleryRegisterLog in
Post new topic   Reply to topic
Share
 

 NUEVA ASTUCIA : Índice interactivo con información

Go down 
AuthorMessage
67tazmany
Administrador
67tazmany

Joined : 2008-10-24
Ubicación : Lima
¿Qué FIFA juegas? : FIFA 19

NUEVA ASTUCIA : Índice interactivo con información Empty
PostSubject: NUEVA ASTUCIA : Índice interactivo con información   NUEVA ASTUCIA : Índice interactivo con información Icon_minitimeSat Mar 17, 2012 7:14 pm

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

Code:
<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.

Code:
.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:

Code:
<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:


Code:
<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>

-
NUEVA ASTUCIA : Índice interactivo con información Donfirmatazeditadoultim
NUEVA ASTUCIA : Índice interactivo con información 46269
Back to top Go down
 
NUEVA ASTUCIA : Índice interactivo con información
Back to top 
Page 1 of 1
 Similar topics
-
» Presentacion de Nueva Pirexia 7 y 8 De Mayo
» Nueva España Liberal
» Nueva reforma Laboral
» Nueva huelga general - 14 Noviembre
» Nueva Ayuda para Erepublik

Permissions in this forum:You can reply to topics in this forum
FIFAParches Community :: OFF Topic :: Fútbol Real & Discusión Off-Topic-
Post new topic   Reply to topicJump to: