Image Mapping Tutorial, Tutorial Options

[Life2death34]

Introduction[SIZE=7]



First of all let me explain what image mapping is, for starters you may see pictures with links embedded into an image on thousands upon thousands of sites within the internet. When you click on it you dont think twice about how the actual button works. Some images may pop out or have different affects as you mouse over them. That is called a roll-over state, which allows the image to have certain effects if the viewer performs certain actions with the mouse.

I'm not very sure if anyone else has attempted to post a tutorial on createblog.com about image mapping but when I started my xanga I wanted to reach for uniqueness and something original. If you have anything to add to this post feel free I'm just trying to expand everyone's perspective on how simple some of the most difficult looking objectives on the web can be.

Step 1)

Getting started you may need if not already have one a program that gives you the tools you'll be using in order to design your image/button. Some programs are Photoshop (psd) and Image Ready CS (IR). These programs I use are quite expensive but you can get a 30 day trial on either of them on Downloads.com. Now that you have the correct programs and tools to do so lets move onto step 2.

Step 2)

So you might think this is getting kind of boring too much reading but it's worth it in the end. Open PSD and start a new document, or you can open an image of yours you already have. After that is set, fool around with PSD and get used to the basics of how to use all of the tools properly. Now you have your image open look on the left side of the screen and you'll see a tool pallete at your disposal. Looking like this . Explore with these tools and you can use effects under the options Filter on the top menu bar . Now have the layers window open (if not go into the drop down file Windows>Layers) and right click the smaller picture of your image. Select duplicate image, it will ask what you would like to name the duplicate of layer 1, select a name (wtv you'd like) and then click ok. Highlight the second layer in the layers window and apply which ever effects you would like to it. Whatever effects you place on the duplicate layer thats what your image will look like later on when the viewers mouse rolls overs it. To view the button without the effects on it click on the picture of the eye next to the layer you do not want to see .

Step 3)

Now you have your effects and everything set. How to apply to roll-over state and URL for the image might you ask? I'll tell you just how to do so. Lets start off with adding the URL to the image you have selected. First open the file you've worked on in IR. After you've done so then make sure the Layers Window, Web Content, and Image Map windows are all open. First go to the same tool pallete to the left and select the rectangle image map tool . After you've selected the image map tool select the area in which you want the roll-over state to be activated (should probably take up the entire image). After you've selected your hot spot the image map window spaces light up and you can now place your URL in it. The URl should begin with http://www. and then whatever page you'd like the viewer to be directed to. Below th URL it says Target an ALT. The target is if you want the image to open itself in a new webpage or keep the same page. Select the _self option for Target. The AlT option is what the URL Text will be displayed as if the viewer leaves his mouse idle over the hot spot area. Now the URL is set lets see if it works, on the tool pallete there should be an icon of your browser at the bottom, click this too view the image .

Step 4)

Adding the roll-over states can be a little confusing but I will do my best to walk you through it step by step. If you need to read the instructions a few times before executing the actual manuever. On the webcontent window you should highlight the smaller image that has the text Normal next to it . After selecting that go down to the layers window and select the orginal layer of your image when you very first opened it. Cick the eyes next to each image so that the only image with an eye next to it is the very original with no effects on it. Now back to under where it says Normal in the web content window you should see image map. Right click it and select add roll-over state at the very bottom. Select the newly added roll-over state which is below image map in the web content window. With this selected go back down to the layers window and check the eyes with each layer that you want to appear on the image when the mouse rolls over the image's hot spot. Finally, you should be ready to preview your document. Do the same procedure in step 3 by clicking the smaller icon of your browser and below the picture you should see html text. If your image is working properly there is one last step....getting it onto your xanga.

Step 5)

This involves saving all the layers as GIFs. After you've done so upload each one to your image hosting site and make sure to keep the original name from when you saved them. Now you might want to copy the html text from previewing your image im IR so you can edit in a text document. In the html it shows what your image is doing at certain points, now where you see the name of one of the images you uploaded in your hosting site take the URl of the image from your site and replace it in the html like so . .

To see a simple example of image mapping made with Photoshop and Imageready go to X

[crazybabii412]

Shouldn't this be posted in tutorials...?