Botón Miniaturas thumbnails-button
Al seleccionar o pulsar este botón se restablece el visualizador entre la vista principal y las miniaturas. Este botón aparece en la barra de control principal. Puede cambiar el tamaño, la apariencia y la posición de este botón mediante CSS.
Propiedades CSS del área de visor principal
El aspecto del botón se controla con el siguiente selector de clase CSS:
.s7ecatalogviewer .s7thumbnailpagebutton
Coloque dentro del icono de ilustración si se utilizan iconos CSS.
Consulte también Sprites CSS.
state y selected, que se pueden usar para aplicar diferentes aspectos a diferentes estados de botones. En particular, selected='true' corresponde al estado del visor cuando el modo de miniatura está activo y selected='false' corresponde al estado predeterminado con la vista principal.La información del objeto del botón se puede localizar. Consulte Localización de elementos de la interfaz de usuario para obtener más información.
Ejemplo: configurar un botón de miniaturas de 28 x 28 píxeles y situado a 4 píxeles de la parte inferior y a 5 píxeles del borde izquierdo de la barra de control principal. Y, por último, muestra una imagen diferente para cada uno de los cuatro estados de botón cuando se selecciona o no se selecciona.
.s7ecatalogviewer .s7thumbnailpagebutton{
margin-top: 4px;
margin-left: 5px; width:28px;
height:28px;
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='false'][state='up'] {
background-image:url(images/v2/ThumbnailPageButton_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='false'][state='over'] {
background-image:url(images/v2/ThumbnailPageButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='false'][state='down'] {
background-image:url(images/v2/ThumbnailPageButton_dark_down.png);
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='false'][state='disabled'] {
background-image:url(images/v2/ThumbnailPageButton_dark_disabled.png);
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='true'][state='up'] {
background-image:url(images/v2/ThumbnailPageButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='true'][state='over'] {
background-image:url(images/v2/ThumbnailPageButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='true'][state='down'] {
background-image:url(images/v2/ThumbnailPageButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='true'][state='disabled'] {
background-image:url(images/v2/ThumbnailPageButton_dark_disabled.png);
}