Pontos de conexão e mapas de imagem

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

Propriedades de CSS da área do visualizador principal

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

.s7carouselviewer .s7imagemapeffect .s7icon

Propriedade CSS

Descrição

background-image

Arte-final do ícone de ponto de acesso.

posição de fundo

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

Consulte sprites 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 de 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 de 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) .

fronteira

Estilo da borda da região do mapa de imagens. 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 transparente do mapa de imagem com uma borda preta de um pixel:

.s7carouselviewer .s7imagemapeffect .s7region { 
 border: 1px solid #000000; 
 background: RGBA(0,0,0,0);  
}

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free