El visor muestra los iconos de zonas interactivas sobre la vista principal en los lugares en los que las zonas interactivas se crearon originalmente en Dynamic Media de AEM Assets - On-demand.
Propiedades CSS del área del visor principal
El aspecto del icono de zona interactiva se controla con el siguiente selector de clase CSS:
.s7carouselviewer .s7imagemapeffect .s7icon
CSS, propiedad |
Descripción |
---|---|
background-image |
Ilustración de icono de puntos interactivos. |
background-position |
Colocar dentro del elemento sprite de ilustración, si se utilizan sprites CSS. Consulte sprites CSS . |
width |
Ancho del icono de zona interactiva. |
height |
Altura del icono de punto interactivo. |
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 #RRGGBB , 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 #RRGGBB , RGB(R,G,B) o RGBA(R,G,B,A) . |
borde |
Estilo del borde de la región del mapa de imagen. Debe especificarse como " anchura color sólido ", donde anchura se expresa en píxeles, y color se establece como #RRGGBB , RGB(R,G,B) <a11111111110) 1/> o RGBA(R,G,B,A) . |
Ejemplo: configure 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);
}