U kunt een focuspunt instellen om ervoor te zorgen dat een belangrijk deel van een afbeelding niet wordt bijgesneden. Focuspunten zijn met name handig voor responsieve indelingen, wanneer dezelfde afbeelding in verschillende formaten kan worden weergegeven.
Focuspunten voor achtergrondafbeeldingen
Beperkingen voor de beschikbaarheid van focuspunten:
- Schaaltype voor de afbeelding: De eigenschap Schalen moet zijn ingesteld op Afbeelding bijsnijden zodat deze past of Geen.
- Brontype van afbeelding: De bron moet lokaal zijn en geen externe URL.
- Dynamische advertenties: Focuspunten worden niet ondersteund in dynamische advertenties.
- Animatie: Focuspunten mogen geen animatie bevatten. Als u een animatie toevoegt aan de afmetingen van de afbeelding, is het focuspunt dat u voor deze afbeelding instelt, van toepassing op het oorspronkelijke afbeeldingsformaat.
Als u een focuspunt inschakelt, worden de uitlijningsopties genegeerd.
Een focuspunt instellen
- Open het dialoogvenster Focuspunt van afbeelding bewerken op een van de volgende manieren:
- Selecteer de afbeelding op het werkvlak en vink het selectievakje Focuspunt inschakelen aan in het deelvenster Eigenschappen.
- Klik met de rechtermuisknop op de afbeelding en selecteer Focuspunt instellen in het pop-upmenu.
- Sleep het focuspunt naar de gewenste plek.
- Het focuspunt bevindt zich standaard in het midden van de afbeelding.
- Het besturingselement voor het focuspunt wordt als witte cirkel weergegeven, zodat het gemakkelijk te zien en aan te klikken is, maar het dradenkruis in het midden geeft het werkelijke focuspunt aan.
- Gebruik de pijltoetsen op het toetsenbord om het focuspunt met één pixel tegelijk te verplaatsen.
- U kunt het focuspunt terugzetten op het midden. Klik met de rechtermuisknop op de afbeelding en selecteer Resetten in het pop-upmenu. U kunt ook op Ctrl+R (Windows) of ⌘+R (Mac) drukken.
- Schakel over naar het tabblad Voorbeeld om te zien hoe het focuspunt van invloed is op het bijsnijden van de afbeelding voor verschillende beeldverhoudingen.
- Klik op OK.
Als u de afbeeldingsbron wijzigt, wordt u door Google Web Designer gevraagd of u het focuspunt wilt behouden, bewerken of verwijderen.
Een focuspunt bewerken
U kunt de positie van een bestaand focuspunt wijzigen:
- Open het dialoogvenster Focuspunt van afbeelding bewerken op een van de volgende manieren:
- Klik met de rechtermuisknop op de afbeelding en selecteer Focuspunt bewerken in het pop-upmenu.
- Selecteer de afbeelding en klik in het deelvenster Eigenschappen naast het selectievakje Focus inschakelen op de knop Positie van focuspunt instellen
.
- Sleep het focuspunt naar de nieuwe locatie.
- Klik op OK.
Een focuspunt in- of uitschakelen
U kunt een focuspunt uitschakelen om te zien hoe uw afbeelding wordt weergegeven met uitlijningsopties. Als u het focuspunt opnieuw inschakelt, onthoudt Web Designer de eerder ingestelde positie van het focuspunt.
Gebruik een van de volgende methoden om het focuspunt voor de geselecteerde afbeelding in of uit te schakelen:
- Vink in het deelvenster Eigenschappen het selectievakje Focuspunt inschakelen aan.
- Klik met de rechtermuisknop op de afbeelding en selecteer Focuspunt inschakelen of Focuspunt uitschakelen in het pop-upmenu.
Een focuspunt verwijderen
- Klik met de rechtermuisknop op de afbeelding.
- Selecteer Focuspunt verwijderen in het pop-upmenu.
Een afbeelding met een focuspunt omwisselen
Wanneer u de functie Afbeelding wisselen gebruikt of de bron wijzigt van een afbeelding waarvoor een focuspunt is ingeschakeld, kunt u beslissen of u het focuspunt wilt behouden, bewerken of verwijderen voor de nieuwe afbeelding.
Focuspunten en mediaregels
U kunt de positie van een focuspunt niet wijzigen met mediaregels. Als u verschillende afbeeldingen wilt weergeven afhankelijk van de grootte van de viewport maar de afbeeldingen niet hetzelfde focuspunt kunnen gebruiken, kunt u beide afbeeldingen opnemen in uw document. Vervolgens gebruikt u mediaregels om de transparantie van elke afbeelding te wijzigen naar 0 voor de viewportformaten waar de afbeelding niet zichtbaar mag zijn.
Focuspunten in de codeweergave
In de codeweergave worden de coördinaten van het focuspunt ingesteld in het kenmerk focalpoint voor het element gwd-image. Voorbeeld:
<gwd-image class="gwd-image-1t0s" id="gwd-image_1" scaling="none" source="assets/moon_landscape.jpg" focalpoint="540 295"></gwd-image>