BLOG BIZZ / HOW TO IMAGE MAP

 RED REIDING HOOD: Blogger how to image map coordinates tutorial adobe photoshop sidebar wordpress

[dutch]

Heb je die nieuwe gave afbeelding mét klikbare icoontjes die allemaal linken  naar verschillende social media kanalen al gespot in mijn sidebar? Vandaag ga ik jullie uitleggen hoe je dit met elke gewenste afbeelding zelf kan doen. Het is niet zo moeilijk om zo’n zogenaamde ‘image map‘ te maken, maar wel ongelofelijk lastig om te vinden hoe je dit precies doet. Het heeft mij uren tijd gekost en dat wil ik jullie graag besparen ;) Scroll naar beneden voor de complete uitleg! Laat je ook even weten of deze tutorial nuttig was en het is gelukt?
Voor deze tutorial gebruik ik trouwens Adobe Photoshop CS6 om de coördinaten van een afbeelding te vinden, maar er zijn ook andere programma’s die je kunnen helpen met het vinden van deze coordinaten (zoals Paint), waardoor je Photoshop niet eens nodig hebt.

Liefs,
Rowan

[english]

Did you already see that cool image with clickable icons all linking to different social media channels in my sidebar? Today I’m going to tell you how you can do this yourself with every image you like using. It’s not that hard to make a so called ‘image map‘, but it isn’t easy to find how to do this. It took my hours of my time and I’d like to save the trouble for you ;) Scroll down for the complete explanation! Will you let me know if this tutorial was useful and if it worked?
By the way I use Adobe Photoshop CS6 for this tutorial to find the coordinates of an image, but there are other programs able to help you finding these coordinates (like Paint), so that you don’t even need Photoshop.

Lots of love,
Rowan


RED REIDING HOOD: Blogger how to image map coordinates tutorial adobe photoshop sidebar wordpress

STAP 1: Open de afbeelding die je wil image mappen in Photoshop. Zorg ervoor dat de afbeelding precies zo groot is als je ‘m in je sidebar wil. Voor mij is het bijvoorbeeld belangrijk dat de breedte 336 pixels is, aangezien ie zo perfect in mijn sidebar past.
STEP 1: Open the image you’d like to image map in Photoshop. Make sure the image already is as big as you’d like it to be in your sidebar. For me it’s important to have an image with a 336 pixels width, since that way it will perfectly fit in my sidebar.


RED REIDING HOOD: Blogger how to image map coordinates tutorial adobe photoshop sidebar wordpress

STAP 2: Open het info venster door op F8 te drukken of door op het tabblad venster en vervolgens op info te klikken.
STEP 2: Open the info window by pressing F8 or by clicking the tab window and info.


RED REIDING HOOD: Blogger how to image map coordinates tutorial adobe photoshop sidebar wordpress

STAP 3: Sleep vierkantjes (gebruik hiervoor het rood omcirkelde gereedschap) op de plekken waarvan jij wil dat ze straks klikbaar zijn.
STEP 3: Drag rectangles (to do this use the tool in the red circle) on the spots you want to become clickable.


RED REIDING HOOD: Blogger how to image map coordinates tutorial adobe photoshop sidebar wordpress

STAP 4: Zorg ervoor dat je info venster staat ingesteld op pixels en niet op bijvoorbeeld centimeters. Controleer dit door op het blauw omcirkelde plusje te klikken. Ga nu met je cursor op de linkerbovenhoek staan en lees de coordinaten (in de rode cirkel) af in het info venster. In mijn geval is dat X: 196 en Y: 155. Noteer deze getallen. Plaats vervolgens de cursor naar de rechteronderhoek en lees weer de coordinaten af. In mijn geval is dat X: 236 en Y: 193. Voer in de volgende code de vier getallen in tussen de ” ” achter coords= en voer de link waarvan je wilt dat dit gebied naar toe gaat linken in tussen de ” ” achter href=.

<area shape=”rect” coords=”196,155,236,193″ href=”https://twitter.com/RedReidingHood”>

Herhaal dit voor alle gebieden die je wil image mappen, in mijn geval dus alle zes icoontjes. Uiteindelijk krijg je in mijn geval deze zes codes:

<area shape=”rect” coords=”196,155,236,193″ href=”https://twitter.com/RedReidingHood”>

<area shape=”rect” coords=”242,154,283,192″ href=”https://www.facebook.com/RedReidingHood”>

<area shape=”rect” coords=”288,155,329,192″ href=”http://instagram.com/redreidinghood”>

<area shape=”rect” coords=”196,201,237,239″ href=”http://www.pinterest.com/redreidinghood/”>

<area shape=”rect” coords=”242,202,283,239″ href=”https://www.youtube.com/user/RedReidingHood”>

<area shape=”rect” coords=”288,202,329,239″ href=”https://www.bloglovin.com/en/blog/4442765″>

STEP 4: Make sure the info window is set to pixels and not for example centimeters. Check this by clicking on the plus (in the blue circle). Now place your cursor in the top left corner and read the coordinates (in the red circle) in the info window. In my case that’s X: 196 and Y: 193. Note these numbers. Now place the cursor in the right bottom corner and again read the coordinates. In my case that’s X: 236 and Y: 193. Put these four numbers in between the ” ” after coords= in the following code and place the link of which you want this area to link to between the ” ” after href=. 

<area shape=”rect” coords=”196,155,236,193″ href=”https://twitter.com/RedReidingHood”>

Repeat this for all areas you want to image map, in my case all six social icons. Eventually in my case you will get these six codes:

<area shape=”rect” coords=”196,155,236,193″ href=”https://twitter.com/RedReidingHood”>

<area shape=”rect” coords=”242,154,283,192″ href=”https://www.facebook.com/RedReidingHood”>

<area shape=”rect” coords=”288,155,329,192″ href=”http://instagram.com/redreidinghood”>

<area shape=”rect” coords=”196,201,237,239″ href=”http://www.pinterest.com/redreidinghood/”>

<area shape=”rect” coords=”242,202,283,239″ href=”https://www.youtube.com/user/RedReidingHood”>

<area shape=”rect” coords=”288,202,329,239″ href=”https://www.bloglovin.com/en/blog/4442765″>


STAP 5: Upload de originele foto (dus zonder de vierkantjes) op het internet. Dat kan voor wordpress gebruikers in je dashboard door te klikken op ‘media’ en vervolgens op ‘Add new’. Je kan er ook voor kiezen om je foto te uploaden via bijvoorbeeld ImageShack. Neem nu de bron van de afbeelding, in mijn geval http://redreidinghood.com/images/sidebar_foto_hoed.jpg.
STEP 5: Upload the original photo (without the rectangles) to the internet. WordPress users can do this by going to their dashboard, click ‘media’ and click ‘Add new’. You can also choose to upload your photo via for example ImageShack. Now take the source of your image, in my case http://redreidinghood.com/images/sidebar_foto_hoed.jpg


STAP 6: We gaan de code nu afmaken. In het voorbeeld hieronder zie je de codes met de coordinaten die we net hebben gemaakt terug. Voor deze codes is het stuke code <map id=”sidebarhoed” name=”sidebarhoed”> toegevoegd. ‘sidebarhoed’ is hoe ik mijn afbeelding heb genoemd, vervang dit door de naam die je jouw afbeelding wil geven. Na de codes met de coordinaten volgt het stukje code </map> <img usemap=”sidebarhoed” src=”http://redreidinghood.com/images/sidebar_foto_hoed.jpg” alt=”sidebarhoed”>. Vervang het woord ‘sidebarhoed’ weer voor de naam van jouw afbeelding. Tot slot vul je tussen de ” ” achter src= de bron van jouw afbeelding in (zie stap 5). Je code is nu klaar.

<map id=”sidebarhoed” name=”sidebarhoed”>

<area shape=”rect” coords=”196,155,236,193″ href=”https://twitter.com/RedReidingHood”>

<area shape=”rect” coords=”242,154,283,192″ href=”https://www.facebook.com/RedReidingHood”>

<area shape=”rect” coords=”288,155,329,192″ href=”http://instagram.com/redreidinghood”>

<area shape=”rect” coords=”196,201,237,239″ href=”http://www.pinterest.com/redreidinghood/”>

<area shape=”rect” coords=”242,202,283,239″ href=”https://www.youtube.com/user/RedReidingHood”>

<area shape=”rect” coords=”288,202,329,239″ href=”https://www.bloglovin.com/en/blog/4442765″>

</map>

<img usemap=”sidebarhoed” src=”http://redreidinghood.com/images/sidebar_foto_hoed.jpg” alt=”sidebarhoed”>

STEP 6: We’re now finishing the code. In the example underneath you see the codes with the coordinates we just made. In front of these code the code <map id=”sidebarhoed” name=”sidebarhoed”> has been added. ‘sidebarhoed’ is what I called my image, replace this by the name you want to give your image. After the codes with the coordinates the code </map> <img usemap=”sidebarhoed” src=”http://redreidinghood.com/images/sidebar_foto_hoed.jpg” alt=”sidebarhoed”> has been added. Replace the word ‘sidebarhoed’ again with the name of your image. Now you put the source of your image (see step 5) between the ” ” after src=. You just finished your code.

<map id=”sidebarhoed” name=”sidebarhoed”>

<area shape=”rect” coords=”196,155,236,193″ href=”https://twitter.com/RedReidingHood”>

<area shape=”rect” coords=”242,154,283,192″ href=”https://www.facebook.com/RedReidingHood”>

<area shape=”rect” coords=”288,155,329,192″ href=”http://instagram.com/redreidinghood”>

<area shape=”rect” coords=”196,201,237,239″ href=”http://www.pinterest.com/redreidinghood/”>

<area shape=”rect” coords=”242,202,283,239″ href=”https://www.youtube.com/user/RedReidingHood”>

<area shape=”rect” coords=”288,202,329,239″ href=”https://www.bloglovin.com/en/blog/4442765″>

</map>

<img usemap=”sidebarhoed” src=”http://redreidinghood.com/images/sidebar_foto_hoed.jpg” alt=”sidebarhoed”>


RED REIDING HOOD: Blogger how to image map coordinates tutorial adobe photoshop sidebar wordpress

STAP 7: Nu gaan we ervoor zorgen dat de image map op je blog verschijnt. Ga naar je wordpess dashboard, klik op ‘Appearance’ en vervolgens op ‘Widgets’. Sleep nu een text widget naar je sidebar, plak de code in het tekstvak en druk op ‘Save’.
STEP 7: Now we’re going to make sure the image map is going to appear on your blog. Go to your wordpress dashboard, click ‘Appearance’ and then ‘Widgets’. Now drag a text widget to your sidebar, paste the code in to the text box and hit the ‘Save’ button.


RED REIDING HOOD: Blogger how to image map coordinates tutorial adobe photoshop sidebar wordpress

STAP 8: Whoop whoop! Als het goed is staat je werkende image map nu in je sidebar!
STEP 8: Whoop whoop! Your working image map should now be showing in your sidebar!

Follow on Bloglovin

4 comments