Puntos interactivos y mapas de imagen hotspots-and-image-maps

El visor muestra los iconos de puntos interactivos en la vista principal en lugares donde los puntos interactivos se crearon originalmente en Dynamic Media de AEM Assets bajo demanda.

Propiedades CSS del área del visor principal

El aspecto del icono del punto interactivo se controla con el siguiente selector de clase CSS:

.s7carouselviewer .s7imagemapeffect .s7icon
Propiedad CSS
Descripción
background-image
Icono de punto interactivo.
background-position

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte Sprites CSS.

width
Anchura del icono del punto interactivo.
height
Altura del icono de punto interactivo.

Ejemplo: configure un icono de punto interactivo 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 del área del mapa de imagen se controla con el siguiente selector de clase CSS:

.s7carouselviewer .s7imagemapeffect .s7region

Propiedad CSS
Descripción
fondo

Color de relleno de región de mapa de imagen.

Especificar este color en #RRGGBB , RGB(R,G,B) , o RGBA(R,G,B,A) formatos.

background-color

Color de relleno de región de mapa de imagen.

Especificar este color en #RRGGBB , RGB(R,G,B) , o RGBA(R,G,B,A) formatos.

borde
Estilo de borde de región de mapa de imagen. Debe especificarse como " anchura color sólido ", donde anchura se expresa en píxeles, y color se ha establecido como #RRGGBB , RGB(R,G,B) , 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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8