I am very new to programming, so sorry ahead of time if this question is unreasonable to answer.

I want a user to complete five tasks on my website, and then as a result have a pop up or a special effect happen. What programming language would be best suited for this? Are there any good tutorials on the web specifically on how to do this?

A user would click on a specific part of a picture (a part of the picture will be clickable) then a pop up will happen. They will do this for 4 other times on different pictures, and then as a result a special event will happen.

Any help would be greatly appreciated!

Oh! So a specific part of the image to be clickable, and have that same effect in different images?

That is called "Image Mapping".

First, you want to know the dimensions of your image. So, for example, if your image is 100px by 100px, this is what the coding would look like so far.

Now, we set up the link itself. Basically the same coding, just adding the link property to it.

Where it says "LINKS WILL GO IN HERE", these blocks of coding will be added there instead. Adding target="_blank" after a link will ensure it opens in a new window.

So let's put that together, into the entire code.

Okay, so we have that, which is the basic coding for one image. However, it's pretty difficult to know where the link is. What I like to do is set the background color to blue, then when I'm done, change it back to invisible. This is what I mean.

Now it's just a process of resizing the blue box until you get it in the location/size you wish for it to be. You do this by changing the "width: 30px; height: 30px;" into whatever size you wish the box to be, and by changing the "top: 30px; left: 30px;" into whatever numbers you wish for it to be. It's a process, but depending on the size of the image, it should be simple.

So after you're done with the blue box, just replace "background: blue" with "background: none". You can add more links to the image by adding more of the link properties below the other one. Here:

Hope that helped! I know it must be vague, and it will probably be confusing, so comment on here and I'll help ya out more if you need it!

This sounds pretty intense. What kind of website are you going to be using this for?

Here is a fantastic set of lessons on how to program in HTML. You'll probably also want to check out the CSS tutorials -- CSS integrates with HTML, and you use it for the layout and style of your web pages.

For the HTML, I just use poly area and cordinates. Coordinates are the shape of the area you want to be clickable in the image. You'll have to get coordinates for the image somehow, which should by a bunch of numbers separated by commas. Either get cords with a program or google it, maybe there's a free online tool.

	  	<area shape="poly" coords="CORDINATES" href="LINK" alt="TITLEFORSCREENREADERS">
 	</map>
</div>

You can use javascript for the popup. Depending on what kind of popup you want. If it's a confirmation button, that's easy to do. Not sure about the result (depends what it is).