Pontos de acesso e mapas de imagem hotspots-and-image-maps

O visualizador exibe ícones de pontos de acesso sobre a exibição principal em lugares onde os pontos de acesso foram originalmente criados no Dynamic Media do AEM Assets - sob demanda.

Propriedades CSS da área do visualizador principal

A aparência do ícone de ponto de acesso é controlada com o seguinte seletor de classe CSS:

.s7carouselviewer .s7imagemapeffect .s7icon
Propriedade CSS
Descrição
background-image
Arte do ícone do ponto de acesso.
background-position

Posicione dentro da imagem do trabalho artístico, se as imagens CSS forem usadas.

Consulte sprites CSS.

largura
Largura do ícone de ponto de acesso.
altura
Altura do ícone do ponto de acesso.

Exemplo - configure um ícone de ponto de acesso de 56 x 56 pixels que exiba uma imagem diferente para cada um dos dois estados de ícone 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);
}

Propriedades CSS da região do mapa de imagem

A aparência da região do mapa de imagem é controlada com o seguinte seletor de classe CSS:

.s7carouselviewer .s7imagemapeffect .s7region

Propriedade CSS
Descrição
plano de fundo

Cor de preenchimento da região do mapa de imagem.

Especificar esta cor em #RRGGBB , RGB(R,G,B) ou RGBA(R,G,B,A) formatos.

background-color

Cor de preenchimento da região do mapa de imagem.

Especificar esta cor em #RRGGBB , RGB(R,G,B) ou RGBA(R,G,B,A) formatos.

borda
Estilo de borda da região do mapa de imagem. Deve ser especificado como " largura cor sólida ", onde largura é expresso em pixels e cor está definido como #RRGGBB , RGB(R,G,B) ou RGBA(R,G,B,A) .

Exemplo - configurar uma região de mapa de imagem transparente com uma borda preta de um pixel:

.s7carouselviewer .s7imagemapeffect .s7region {
 border: 1px solid #000000;
 background: RGBA(0,0,0,0);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8