Foto splitsen

Voor sommige onderdelen is HTML kennis nodig.

Je kan een foto in gelijke delen splisen om een bepaald effect te krijgen...

Ik gebruikte in onderstaand voorbeeld het programma http://imagesplitter.net

Je kan met dit ptogramma zelf bepalen in hoeveel rijen en/of kolommen je de foto wilt splitsen.

Met behulp van HTML kan je zelf het nog verfraaien door en randen, afgeronde hoeken, of een achtergrondkleur aan toe te voegen.

  • Klik op het vakje om je bestand (max 20 Mb) te kiezen.
  • Klik daarna op Upload om je bestand naar het programma te laden
  • Kies het tabje 'Split'
  • Geef aan in hoeveel rijen en kolommen de foto verdeeld moet worden.
  • Klik op Split Image
  • Het programma maakt er een .ZIP bestand van / of download het bestand.
  • Pak het bestand uit in de gewenste map.
  • In de map zijn , in dit voorbeeld , nu 6 afbeeldingen gezet.
  • Met behulp van de blokjes '2 kolommen'  maken we nu 3 van die blokjes onder elkaar en zetten in elk blokje een afbeelding.

Voorbeeld aangevuld/gemaakt met een HTML table

  • In het menu onder 'Meer'  bij webinstellingen  is wat extra code gezet om een class aan te maken voor deze tabel alleen.

Ingesteld staat een warte rand van 3 px en een grijze achtergrondkleur.

Vergeet vooral die de CSS code img { vertical-align: top: } toe te voegen. Anders worden de randen niet netjes

Tekstbestand
Css voorbeeld1
Tekstbestand [229.0 B]
Download (0 downloads)
  • Vervolgens is er  een HTML  table aangemaakt zoals in onderstaand voorbeeld:

Voorbeeld aangevuld/gemaakt met een HTML table

Tekstbestand
Html voorbeeld1
Tekstbestand [790.0 B]
Download (1 download)

Pas hier uiteraard de naam van uw afbeeldingen aan met uw eigen afbeeldingscode.


Download hier het bestand in PDF formaat. (Conversie is niet 100%)

PDF
Gevorderden jouwweb nl fotos splitsen
PDF [1.3 MB]
Download (5 downloads)

Top