El visor muestra iconos de zonas interactivas en la vista principal en los lugares donde las zonas interactivas se crearon originalmente en Dynamic Media de AEM Assets, On Demand.
Propiedades CSS del área principal del visor
El aspecto del icono de zona interactiva se controla con el siguiente selector de clase CSS:
.s7carouselviewer .s7imagemapeffect .s7icon
CSS, propiedad |
Descripción |
---|---|
imagen de fondo |
Icono de zona interactiva. |
posición de fondo |
Sitúe el elemento en el sprite de ilustración si se utilizan sprites CSS. Consulte sprites CSS . |
width |
Anchura del icono de zona interactiva. |
height |
Altura del icono de zona interactiva. |
Ejemplo: configure un icono de zona interactiva de 56 x 56 píxeles que muestre una imagen diferente para cada uno de los dos estados de icono diferentes:
.s7interactiveimage .s7imagemapeffect .s7icon {
background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_up_touch.png);
width: 56px;
height: 56px;
}
.s7interactiveimage .s7imagemapeffect .s7icon:hover {
background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_over_touch.png);
}
Propiedades CSS de la región del mapa de imagen
El aspecto de la región del mapa de imagen se controla con el siguiente selector de clase CSS:
.s7carouselviewer .s7imagemapeffect .s7region
CSS, propiedad |
Descripción |
---|---|
fondo |
Color de relleno de la región del mapa de imagen. Especifique este color en los formatos #RGGBB , RGB(R,G,B) o RGBA(R,G,B,A) . |
background-color |
Color de relleno de la región del mapa de imagen. Especifique este color en los formatos #RGGBB , RGB(R,G,B) o RGBA(R,G,B,A) . |
borde |
Estilo del borde de la región del mapa de imágenes. Debe especificarse como " anchura color sólido ", donde anchura se expresa en píxeles, y color se establece como #RGGBB , RGB(R,G,B) 1/> o RGBA(R,G,B,A) . |
Ejemplo: configuración de una región de mapa de imagen transparente con un borde negro de un píxel:
.s7carouselviewer .s7imagemapeffect .s7region {
border: 1px solid #000000;
background: RGBA(0,0,0,0);
}