Punti attivi e mappe immagine
Creato per:
- Sviluppatore
- Utente
Il visualizzatore mostra le icone dei punti attivi sulla vista principale nei luoghi in cui i punti attivi sono stati creati originariamente in Dynamic Medie di AEM Assets - on-demand.
Proprietà CSS dell'area visualizzatore principale
L’aspetto dell’icona del punto attivo è controllato dal seguente selettore di classe CSS:
.s7carouselviewer .s7imagemapeffect .s7icon
Proprietà CSS | Descrizione |
---|---|
immagine di sfondo | Illustrazione di un punto attivo. |
background-position |
Posizione all'interno dello sprite del disegno, se vengono utilizzati sprite CSS. Vedere sprite CSS. |
larghezza | Larghezza icona punto attivo. |
altezza | Altezza icona punto attivo. |
Esempio: imposta un’icona di punto attivo da 56 x 56 pixel che visualizza un’immagine diversa per ciascuno dei due diversi stati dell’icona:
.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);
}
Proprietà CSS dell'area mappa immagine
L’aspetto dell’area della mappa immagine è controllato dal seguente selettore di classe CSS:
.s7carouselviewer .s7imagemapeffect .s7region
Proprietà CSS | Descrizione |
---|---|
sfondo |
Colore riempimento area mappa immagine. Specificare questo colore nei formati di #RRGGBB , RGB(R,G,B) o RGBA(R,G,B,A) . |
colore di sfondo |
Colore riempimento area mappa immagine. Specificare questo colore nei formati di #RRGGBB , RGB(R,G,B) o RGBA(R,G,B,A) . |
bordo | Stile bordo area mappa immagine. Specificare come " larghezza colore solido ", dove larghezza è espressa in pixel e colore è impostato come #RRGGBB , RGB(R,G,B) o RGBA(R,G,B,A) . |
Esempio: impostare una regione di mappa immagine trasparente con un bordo nero di un pixel:
.s7carouselviewer .s7imagemapeffect .s7region {
border: 1px solid #000000;
background: RGBA(0,0,0,0);
}