Pontos de acesso e mapas de imagem

Última atualização em 2023-05-20
  • Criado para:
  • Developer
    User

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);
}

Nesta página