BLOG | FAQ'S | ABOUT | OUR HOME | ADULT BEVERAGES | CRAFTS + PROJECTS | TECH TUTORIALS | HEADERS | WEDDING | VIDEOS | CONTACT

Tech Tuesday: Image Mapping
06/04/2013

I can’t believe that I haven’t done a Tech Tuesday since the beginning of March! There is a lot I want to teach you all, but these suckers take awhile to put together! Today I am going to be discussing image mapping. What is imaging mapping? Image mapping is an image with multiple link points within the image. The example I am going to use for this tutorial is my header. My header is one big image.

0-1

But there are multiple link points within the image. Everything I’ve squared out in red is its own link to a different page here at Mailbox Journey. I find image mapped images to be more graphically pleasing, then doing a plain menu bar. Image mapping might seem hard to accomplish, or you might think that it takes a lot of skill, but it is actually really easy.

0-2

I map my images using a free online program at image-maps.com. So all you have to do is make an image that you’d like to image map, like your intro box (social media icons, your picture, link to your about me page) or make a header with all of your menu links. I normally can only use one image map code on my website at one time, otherwise they become wonky. So I chose to do my header, instead of my intro box.

1

Once you have created an image, upload it to your server and grab the URL code for that image. You will want to input that URL code on image-maps.com, in the area that I show squared out below.

2

Then click “Start Mapping Your Image”. You will then see a screen like this and you will have to wait a few seconds…

3

until it looks like this… and you can click “Continue to next step”.

4

On the right of your screen, you will see an orange box with some options checked. You want to uncheck all of these options. Below I have an example of what the orange box looks like when you first arrive (on the left), and what the box should look like once you’ve unchecked all options (on the right).

5

Now you want to click the rectangle button. Once you’ve done so, a small square will show up on your image along with a link dialog box.

7

You will want to drag the square box over something that you want to put a link to. For example, I drug the box to my blog text, so I can link that text to my blog directly. You can change the square into a rectangle, if you’d like, just like I did for my image. Once you have the box over the text you’d like, fill out the dialog box with the link and the title of the link. For example: I put http://www.mailboxjourney.com as the link, and I put “Blog” in the title box.

8

Keep repeating that step until you have mapped out all of the links you want in the image. I did a total of 11 links in my image, which means I dragged and re-sized 11 squares on my image. Once you are done, click the “Get your Code” button.

9

Clicking that button will take you to a page that looks like this…

10

You will want to click on “HTML Code” at the top of the page.

11

And copy the text that is in the code box. Take this code and put it wherever you’d like the image to be shown on your blog. Since mine is a header, and I use wordpress, I put the code in my header.php file. If I did an intro box, I would put the code in a siderbar widget. If you have any questions on where to put your code, just ask in the comments section or shoot me an email.

12

So now my header is just one big image, but you can still click on various parts of it to get where you want to go within the blog.

13

If you have ANY questions, do not hesitate to ask.
I’m here to help you with all of your coding needs.
:)


Posted on June 19, 2013 - 11 comments
 Filed Under: Tech Tuesday's



Weekend Wrap-Up #39
06/03/2013

Before I get into the weekend wrap-up (which I haven’t done since the beginning of April!) I want to thank everyone for their amazing advice and support on my post over the weekend. It always amazes me how much support I receive during those hard-to-write and hard-to-hit-publish posts. So thank you! ♥

Friday – After work, Travis and I went to the realtor to sign some papers and schedule our home inspection. Directly afterwards, we went to the bar with Travis’ co-workers to celebrate both the house, one year until our wedding, and the weekend.

wwu39 (5)

After hanging out for awhile, we headed to another bar with my brother and Travis’ best friend (who he asked to be his best man while we were out!)

wwu39 (6)

wwu39 (7)

wwu39 (8)

wwu39 (9)

wwu39 (2)

Saturday – I spent most of the day at my Grandpa’s house where I helped my Dad go through my Grandma’s things. One of her dreams was to start a second-hand store, and let me tell you, she definitely had the inventory to do so! When we walked into the basement there were boxes upon boxes of her things, and it was so overwhelming.

wwu39 (3)

Sunday – We did a drive-by at the house, which made us want to whip out a chainsaw and a power-washer. The house definitely needs a good scrubbing.

wwu39 (4)

How was your weekend?


Posted on June 19, 2013 - 6 comments
 Filed Under: Weekend Wrap-Up



Career path & where to go from here
05/31/2013

I am writing this on Friday afternoon while it’s fresh in my head, so I’m going to write in present tense, even though this will not be published for a few days, or not even at all. My favorite co-worker at my work, Bruce, just retired (for the second time in his life). Before he left, he gave me a hug and told me that I am a very capable young woman and I really need to keep my eyes open because I’m too young to stay here and I have too much to offer. It really hit home. I’ve know for awhile that I need to find other employment but I’m quiet comfortable here even though I have days where I want to burn the place down.

Employment and careers have always been a really rough area for me. Back when I was in middle school and high school I wanted to be a web page designer. After taking a year off after I graduated high school, I went to a fancy pants art school for about two months. (I dropped out, because of issues discussed in this post.) From that point on, I did a few web pages, but I never thought they were up to par. (probably the reason I change my blog layouts all the freaking time). I let another year pass before I went to a two year technical school for computer programming. I had fun there and I learned a lot, but it was not enough to land a job in my field and let’s face it, C++ and Java programming are exteremly boring. I love my php, css and html.

Because of that college degree, I landed an internship at my current work place, which is a non-profit organization that fights for children. I’m an administrative assistant here. I answer phones, keep up with access databases, send and reply to emails, plan meetings and manage the Facebook page. It is a job that leaves me with a lot of free time during the day to do one of the things I love: blogging. I can’t really go anywhere here. I can’t go up the ladder.

I guess what I’m trying to say in this post, is I have no idea what to do with my life. When I was younger and even now, all I picture when “I grow up” is being a mom, being crafty, and loving my home. I could never imagine a career, other than being my own boss. If I could make a living off of blogging, I would. But $50 a month from blogging is not going to put food on the table, and I could never ask Travis to support an entire family off of just his paycheck. Plus, I still have a few years before I even think about taking that Mom roll on. I feel like I don’t have any options at this point.

That little but so heartfelt thing that my co-worker said to me really got the wheels turning. Next August, after I’m married, go on my honeymoon and take that last vacation that I have put in for (Myrtle Beach 2014, Woo!) what do I want to do? What am I good at? Where am I going?

1328833482557_5866937


Posted on June 19, 2013 - 19 comments
 Filed Under: My Life



« Previous Page — Next Page »

  • :)



    Melanie | 24 | Central Pennsylvania.
    Engaged. Cat Mom. Apartment Renter.
    Lover of mason jars, wild flowers, camping, moccasins,
    grey + bright colors, nature, country music & family.

  • :)


       Social Media
    Facebook | Twitter | Instagram | BlogLovin' | Email

  • :)


       Search

  • :)


  •    Archives & Categories
  • Archives

  • Categories


  • :)


       Blogroll

    Annabel Vita
    Attempts At Domestication
    Boy + Girl Design
    Buffalo Roam
    Casa De Christine
    Corner of Main
    Country Mouse Tales

    Drab To Fab
    First Home Dreams
    Our Cozy Cubbyhole
    Popcorn On The Stove
    Retro Ranch Reno
    Sweaty Girl In A Fur Covered World
    The HumberHome Project


  • :)


       Instagram

© 2011 - 2013 Melanie Hoffert & Mailbox Journey - All rights reserved.
Please view our Full Disclaimer + Privacy Policy.
Powered By Wordpress | Created & Designed by Melanie Hoffert