Slices (Segmenten) in Photoshop

Een afbeelding kan je opdelen in Slices (Segmenten). Kies de Slice tool (rechts-klik de Crop-tool). Rechstklik op het plaatje > kies Segment. Stel in, bijvoorbeeld 3 x 2, of trek zelf vakjes voor elk segment.

Dan Save for Web (⌘ Alt Shift S). Daar klik je alle slices aan met Shift. Kies JPG Medium en max 900 pixels breed. En in de volgende stap bij Slices: All Slices. Dat was ‘t! Kipsimpel.

Zet de plaatjes in WordPress, met links

  • Plaats het eerste plaatje in de pagina.
  • Kies in de opties: “Geen uitlijning” en Link naar > Aangepaste link. Vul de link in.
  • Zonder spatie ertussen het volgende plaatje van de eerste rij.
  • Tik Shift-Return voor een volgende rij.

Hieronder een voorbeeld:


Vergrotings-effect met Custom CSS

.aj {width: 100%}
.aj img {transition:all 0.5s; margin:0; width: 33%; }
.aj img:hover {transform: scale(1.2) }

Als je dit effect wil, moet je bovenstaand bij Custom CSS plaatsen. En je moet dan in de HTML (bij Visueel / Tekst) de plaatjes in een <div class=”aj”> zetten, met </div> aan het eind. Anders kun je die plaatjes niet stylen.

De margin:0 was om de witregel tussen de regels weg te halen.

De gehele kaart aanpassen

Zie https://rocstudent.nl/ftp/map/index.html

Ik stel voor dat de klasvertegenwoordigers dit samen doen, voor alle studenten: Toon de broncode (⌘ U) en plak die in Dreamweaver. Pas bij alle plaatjes de link aan. Bewaar en stuur die HTML terug naar mij.