Image Map just using Firefox.

HTML Tutorials

Tutorial

Click on thumbnailed images to enlarge

How To Make an Image Map just using Firefox.

*Remember*
You have to have Firefox for this to work.

1. Go Here and download the Add On >> Click

2. Make your image.

I'll be using this.
My Image

3. Prepare your coding.

Coding doesn't show up in Tutorials, so I put both codes here.
click

4. Upload your image

Myspace - Photobucket or TinyPic.
Website - Your Server

5. Get your Coordinates.

- go to your image, get it in full size.

Click here

- Make an imaginary box in your head start from the corner of the image and put the arrow on the top left corner, then copy the two numbers

Example

- Do it again, but with the bottom right corner.

Example

Now take those numbers and put them in place of the XX's.


Replace the links with the URL's if you haven't already.

Then you're done.

Oh and some people have been getting a blue border around the image, just but a "border=0" in the URL code for the image.

Tutorial Comments

Showing latest 10 of 15 comments

omfg i love you...srsly. thank you!!

By jessecatastrophe on Jun 18, 2009 6:54 pm

wait how do I put the text

By emo-princess on May 29, 2009 12:08 pm

Okay I got it from there but does the second time you get the numbers does it have to have all the XX's or do you just do what the numbers give you?

By Twilightgirl19 on Feb 5, 2009 12:55 am

just a quick question
how do i find the coordinates of the area?

By dyindyinjohnson on Jan 3, 2009 1:26 am

hey! this is a great tutorial but i have two questions..

1)what coordinates do i put in " < div class="temp" style="position: absolute; top: XXpx; left:XXpx; > " ?

2) where in myspace do i put this code? about me or whod i like to meet?


thanks!:D

By teamemmett on Oct 9, 2008 7:06 pm

if one download it then would it still work if you were to use another internet browser?

By chocolatetulips on Sep 3, 2008 9:03 am

Yeah how do you get rid of the blue line?

By webuildfire on Jul 3, 2008 1:18 am

This was a really helpful guide, but for some reason my image has a blue boarder around it. What did I do wrong/how do I get rid of it?

By YukinoIsuzuX on Jun 20, 2008 2:30 am

omg,
I love you for making this tutorial!
I've been wanting to learn how to make one of these for like, EVER!
this is very helpful and I understood everything.
Even when I'm very tired. =/

THANKKKK YOUUU!

By RetroRay on Jun 12, 2008 6:00 am

can anybody help me out on step 5

By kennisya on Jun 2, 2008 12:13 pm
View all »

Tutorial Details

Author Marlons View profile
Submitted on May 4, 2008
Page views 20,225
Favorites 42
Comments 15
Reviewer doublehelix View profile
Approved on May 5, 2008

Tutorial Tags