Afbeeldingskoppelingen en afbeeldingskaarten maken

• Mei 16, 2024

Het antwoord van deze week is een antwoord op een vraag van een lezer - "Kun je uitleggen hoe je een link naar een afbeelding in HTML in een afbeelding kunt maken". Er zijn een aantal verschillende technieken die u kunt gebruiken voor gekoppelde afbeeldingen. De ene is om de hele afbeelding aan uw HTML te koppelen en de andere is om een ​​afbeeldingstoewijzing te maken - waarbij verschillende delen van dezelfde afbeelding aan verschillende locaties zijn gekoppeld.

Gelinkte afbeelding in HTML

Het koppelen van een kleine afbeelding of pictogram is heel eenvoudig. U hoeft alleen maar uw afbeeldingslink in de hyperlink te plaatsen:



Het enige dat ik hier deed was de afbeelding in de HTML voor de link plaatsen. Dit is de gemakkelijkste en meest effectieve manier om een ​​kleine afbeelding te koppelen en wordt vaak gedaan met aangepaste opsommingstekens, pictogrammen, enz. Maar wat als u een grote afbeelding wilt koppelen aan verschillende plaatsen? Dit is waar het snijden van afbeeldingen handig is.

Afbeelding snijden in Photoshop

Dit is heel gemakkelijk te bereiken in Photoshop. Gebruik een afbeelding die niet al te ingewikkeld is, omdat u wilt dat uw gebruikers duidelijk kunnen zien waar ze op de afbeelding moeten klikken. U wilt er ook voor zorgen dat uw gebruikers begrijpen dat ze in de afbeelding moeten klikken om te krijgen waar ze naartoe gaan. Ontwikkel afbeeldingkaarten zorgvuldig met uw gebruiker in gedachten. Houd er rekening mee dat afbeeldingskaarten meestal niet zo zoekmachine vriendelijk zijn als tekst op een pagina, maar goed gebruik van alt-tags in uw afbeeldingsegmenten kan hierbij helpen.

Nadat uw afbeelding is gemaakt, is de volgende stap uw afbeelding "in plakjes" te snijden. Het pictogram van het segmentgereedschap ziet eruit als een klein exactomes. Het bevindt zich boven aan de werkbalk en bevindt zich onder het bijsnijdgereedschap - als u op het pictogram "bijsnijden" klikt, verschijnen de tools voor segment- en segmentkeuze.

Selecteer het segmentgereedschap, houd uw linkermuisknop ingedrukt en sleep het segment voorzichtig naar de gewenste plek en laat het los. Ga verder en blijf de hele afbeelding snijden. Er moet een plakje rond elk deel van de afbeelding zijn dat u naar een andere pagina wilt linken. Elk groot wit gebied kan één plak zijn.

Nadat uw afbeelding volledig is gesegmenteerd, is de volgende stap het gebruik van het gereedschap "Segment selecteren", klikt u op elk segment en kiest u vervolgens het segmenttype "afbeelding". Daaronder vult u de url in van waar u dit segment wilt richten, gevolgd door het alt-tagveld onderaan. De andere velden zijn niet nodig voor eenvoudige afbeeldingstoewijzing. Ga op dezelfde manier door elk segment totdat de hele afbeelding in kaart is gebracht.

Zodra uw volledige afbeelding is voltooid, gebruikt u de optie "opslaan voor web en apparaten". Als u bovenaan op "Bestand" klikt en naar beneden kijkt onder de typische opslagopties, ziet u de optie om op te slaan voor web en apparaten. Selecteer deze optie en er wordt een dialoogvenster geopend waarin u een voorbeeld kunt bekijken van hoe uw afbeelding eruit zal zien. Als u tevreden bent, drukt u op de knop Opslaan en er wordt een ander dialoogvenster geopend. Zorg ervoor dat de tweede optie zegt "afbeeldingen en HTML opslaan" en sla uw werk op.

Ga naar uw map waar u het HTML-document hebt opgeslagen en open het. U kunt deze code kopiëren en in uw eigen HTML-bestand plakken. Meestal is deze HTML een beetje slordig. Als je bedreven bent in HTML, kun je het naar wens opruimen, maar het zou prima moeten werken zoals het is. Zorg ervoor dat uw afbeeldingsbestanden, zoals altijd, zich op de juiste locaties bevinden, anders wordt uw afbeelding niet weergegeven.

Video-Instructies: Cursus Word Les 8: Bijschrift Toevoegen aan Afbeelding + Bijschrift Opmaken (Mei 2024).