Meerdere afbeeldingen naast elkaar

  • TTV Sassem

    (@ttv-sassem)


    8 jaren, 9 maanden geleden

    Op de volgende pagina loop ik tegen een probleem aan.

    http://www.ttv-sassem.nl/competitie-3/

    Het wil me namelijk niet lukken om de afbeeldingen naast elkaar te krijgen. Bovendien zouden er 4 afbeeldingen nog bij moeten komen. Team 1 tot en met Team 6.

    Ik maak gebruik van Maskitto Light Theme en heb 4.3.1 versie van WordPress.
    Wie kan me helpen?

1 reactie aan het bekijken (van in totaal 1)
  • W.P. Ginfo

    (@wp-ginfo)

    8 jaren, 8 maanden geleden

    Hi,

    Hmmmm… dat gaat zo niet passen… 😉

    Werk langzaam en nauwkeurig… 🙂

    Suggestie:

      == == == stap 1
    1. gebruik GIMP [gratis] een grafisch programma bijv.
    2. maak een afbeelding aan in de vereiste afmetingen
    3. !!zorg voor een TRANSPARANTE achtergrond!!
    4. sla op als teams.png-bestand [behoud transparantie]

      5. == == == stap 2

    5. maak een ‘nieuwe laag’
    6. plaats / importeer afbeelding 1
    7. maak een ‘nieuwe laag’
    8. plaats / importeer afbeelding 2
    9. etc. etc.

      10. == == == stap 3

    10. Maak één-voor-één alle afbeeldingen op maat door bijv ‘schalen’, bijsnijden etc.
    11. en plaats alle afbeeldingen op de gewenste plaats
    12. tevreden? sla op als bijvoorbeeld ’teams.png’

      13. == === == stap 4 nu klikbaar…

    13. !!let op!! sluit alle afbeeldingen [ +SLA OP]
    14. GIMP: kies ‘filters > web > afbeeldingskaart’ >> een nieuw scherm met jouw teams.png opent
    15. linker-menu-balk: klik het rechthoekig icoon
    16. teken [klik+sleep+klik] een vierkant op de gewenste [klikbare]plek
    17. een subscherm opent met de gegevens voor dit klikbare vierkant
    • selecteer linktype: ‘website’
    • URL: geef de url op van de pagina / het bericht van de link bijv. http://www.jouwdomein.nl/team3
    • controleer: in het rechter deelvenster verschijnen de links
    • ?? Alle klikbare vlakken geplaatst??

      • == == == …bijna…

    • kies ‘beeld > broncode’ >> een venster met code verschijnt
    • kopieer deze code <CTRL-A> <CTRL-C>

      • == == == WEBsite

    • sleep ’teams.png’ naar de mediabibliotheek van je site
    • !!noteer het pad / de URL van de afbeelding in jouw site bijvoorbeeld ‘http://www.jouwdomein.nl/wp-content/uploads/2015/12/teams.png&#8217;
    • Dashboard: open de pagina / het bericht waar de afbeelding moet komen
    • !!klik de TEKST-tab van de editor!!
    • plak de broncode van jouw afbeelding
    • controleer en corrigeer het pad / de url van de afbeelding

      • — — — voorbeeld:

      <img src="http://www.jouwdomein.nl/teams.png" width="640" height="100" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Willem -->
<area shape="rect" coords="22,31,128,81" href="www.jouwdomein.nl/team1" />
<area shape="rect" coords="180,32,301,79" alt="team1" href="http://www.jouwdomein.nl/team2" />
<area shape="rect" coords="341,31,462,77" alt="team2" href="www.jouwdomein.nl/team3" />
<area shape="rect" coords="504,35,632,83" alt="team3" href="www.jouwdomein.nl/team4" />
</map>
    • sla op

    == == ==

    • browser: test en corrigeer
1 reactie aan het bekijken (van in totaal 1)
  • Het onderwerp ‘Meerdere afbeeldingen naast elkaar’ is gesloten voor nieuwe reacties.