Pontos de acesso e mapas de imagem

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 principal do visualizador

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

.s7carouselviewer .s7imagemapeffect .s7icon

Propriedade CSS

Descrição

imagem de fundo

Arte do ícone de ponto de acesso.

posição de fundo

Posição dentro da estrutura de arte, se os sprites CSS forem usados.

Consulte Scripts CSS .

width

Largura do ícone do 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 exibe 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

fundo

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

Especifique essa cor nos formatos #RRGGBB , RGB(R,G,B) ou RGBA(R,G,B,A) .

cor do fundo

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

Especifique essa cor nos formatos #RRGGBB , RGB(R,G,B) ou RGBA(R,G,B,A) .

border

Estilo da borda da região do mapa de imagem. Deve ser especificado como " largura cor sólida ", onde largura é expressa em pixels e cor é definida como #RRGGBB , RGB(R,G,B) <a1 1/> ou RGBA(R,G,B,A) .

Exemplo - configure 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