Everything about images

ADD AN IMAGE TO YOUR PROFILE

It is not that difficult.

( For I-mac users it will be different?? I do not work with an I-mac so I can't explain...)

• Search for an image on Internet you like.
• When you use Internet Explorer: right-click on the image and choose properties from the menu.

• Select and copy  the url (pressing  CTRL-C after selecting the address will store the text into the memory of the computer).

• When you use Netscape: right-click the image and choose copy image location.
• back at the chat room you edit your profile by selecting edit own profile. (press button 'chat options' will give this option)
• right-click at the exact location where you want to have the image in your profile.
• choose paste to copy the stored address in the profile, (if you have no clue about what we are talking about here, go to the page 'starting' to learn more about copy and paste. To complicated? Writing down on paper and typing yourself will do too...)
• When you did all the above, you will see the following in the profile:

http://dabosite.mine.nu/img/snoopy.gif

• And now the most important part, the HTML code...it has to be typed around the address so to say. The code itself is:

<img src=http://address>

http://adres is the url of the image inside the code. The < and > have to be at the front and the back of the complete code. Combined the complete code will look as follows:

<img src=http://dabosite.mine.nu/img/snoopy.gif>

• Very often the image you've selected is much larger than your profile itself. When you want to let it fit the exact width of your profile. You have to add the following HTML code to the code you've already added. This code looks as follows:

width=100%

The width will be automatically adjusted to the width of your profile when using width=100%. The height will be adjusted automatically according the relation between width and height. No need to worry about that. Using this code will make your profile much sophisticated. No need to scroll from left to right to see the whole profile. 
You can use any percentage for adjusting the size of the image to a smaller one (decrease percentage) or bigger one (increase the percentage).

• Finally the code will look like the following example:

<img src=http://dabosite.mine.nu/img/snoopy.gif width=100%>

(when you are typing the code, keep typing until you completed the whole code. Do NOT use enter. Never use enter in the code for your profile. This is very important, when you do use an enter the code will not work!)

• REMARK: between  http:// adres and width=100% HAS to be a space...
• To be complete: only use the width=100% code when the image is wider then your profile. When you use 100% in this code at an image less wider than your profile the image will be stretched out and the quality will become very poor...

P.S.

When using an image, it has to be available on INTERNET. When you want to use a image you have on your computer (your hard drive), it has to be uploaded to a web server otherwise you are the only one who could see it.

The only exception is the passport photograph, see the example next to this. You are able to upload this image from your computer at your profile. Choose:  'edit', 'photo', 'browse' (now you can select the image from your computer). After selecting the right one, choose  'OK', and then 'upload'... there are some restriction, mentioned while you are accessing the upload area... How to make a nice passport photograph, you will read further on this page...

TOP

ADD ALTERNATIVE TEXT TO AN IMAGE

An idea of boy x

It is possible to add an alternative text at your image. This text will be visible while loading the image and when you point with the mouse at it. Just point you mouse over the picture below and see...

To do this you have to add the following code to the code of the image: alt="text at image". You can change the text at image in any text you like. The complete code could like follows:

<img src=http://dabosite.mine.nu/img/rentadabo2.jpg alt="Dabo and Renta in Canada">

TOP

WHERE TO FIND NICE IMAGES?

Searching a nice image? Maybe you can find one at Dabo's picture- and GIF-site!!

	Click left image for Dabo's Picture and GIF Site
http://webclipart.about.com/ Search	A handy clip-art web page with links to hundreds of sites sites,  ranged by subject. You can search the internet for you favorite image by filling in the search engine. J
	Leo's Gif Palace, an amazing collection of animated gif images
	One of the biggest animated gif sites at internet. This link is provided by t o m m y 2 0.
	Chat puppets from van Black Capricorn.
	Chat puppets from sky's Kippetje
	The site to find anything you want. Making headers, buttons, animations, etc. Too much to tell, just take a look.
	Animated gifs by Billy the animation kid. (before M-D-K Powergifs and with pop-ups)
clipartspage.start4all.com cliparts.pagina.nl	Two overview pages with thousands of links to normal and animated images.

TOP

WHEN TO USE .BMP, .JPG OR .GIF?

You always wanted to know when to use a .bmp, .jpg or .gif image? I suppose so... we will explain you all about here...

BMP format:
BMP stands for bitmap, and you will not find many of them at the Internet. These kind of images are rather big (memory size) and so not very suitable to use on the Internet. At the other hand when saving in this format you will not loose any quality. So this format is very suitable when editing the image or when you like to alter the image in the future. When you would like to get a transparent background  you can use this format, to get the background changed in and equal color before making it transparent (see the section about gifs below. 

After the image is finished and you like to use it for your profile you can store it in .jpg or .gif format.

 

JPG format:
JPG or JPEG stands for Joint Photographic Experts Group. A JPG image can be stored as 24 bits image(16.7 million colors) and is suitable for photo's which contain a lot of different colors. JPG images are compressed and the size will be reduced, making them suitable for adding photo's on the Internet and by that your profile. But keep in mind that, while the image is compressed, the quality will be increased every time you save it. So only save the image with this format after you are completely done with altering it. Sometimes paint will not allow you to save an image with a JPG format. The program IrfanView can handle all image formats. You can download this program at the Download Page.

As we said before you can use the program IrfanView to convert an image with a BMP format to an image with JPG format. First open the BMP image with the program IrfanView and than by selecting from the menu "File", "Save as" saving it as an image with a JPG format.

JPG has another nice feature. It is possible to let the photo shown bit by bit while loading. First you will see a blurred picture and while loading the picture will get clear. Using the program IrfanView and saving the image with the JPG format (see above how to do that) you have to select the options and activate the "Save Progressive" option by marking the checkbox. It is possible to change the quality of the image by percentage. How lower the quality, how lower the size of the file. After changing the options you can save the image.

 

GIF format:
GIF stand for Graphic Interchange Format and is a common used format at the internet. Gif images have a lot of features and the size of the images will be still very small. To reduce the size of a image the GIF format uses compression on the image and is stored as a 8bit (256 color) image. This makes it less feasible for photo's with a lot of different colors.  When an image is build out of large areas with the same color (logo's or the small chat puppets) it is advisable to store the image with a GIF format. Using a JPG format will result in a poor quality. Just save the image in both formats and check what will give the best result.

As with JPG formats, you can, using IrfanView, convert a BMP image to a GIF image. Again do the conversion after you are finished completely with the image. The GIF format has the same feature as the JPG format, you can let it appear bit by bit while loading.  With IrfanView you have to activate the "interlaced" option while saving.

A very nice feature of the GIF format is the possibility of  'Animated Gif's' (moving images), a lot of them you can find at the Dabo's image site. Animated gifs are made with special programs like "MovieGear". You can download this program at our Download page.

Another feature of the GIF format is the capability to get a transparent background. The images above are an example of that. The real image is actually a square (select the image and you will see). We made the background of the image transparent and you will only see the shape of the chat puppet. This is done by selecting the background color and give that color the feature transparency. Important to have a background color that is not present in the chat puppet, otherwise the parts, of the chat puppet with the same color, will be transparent too.   For example choosing the color "white" at the chat puppet above, would not be smart. Doing that the coat will disappear. To make a background transparent you can use the program "Giffy". And as you maybe already expected, you can download it at our Download page. 

How to use the program and make the background transparent will be found somewhere below at this page at the section Background of image transparent.

This section contains a lot of text already so we stop with it...We hope you can use it...

TOP

PASSPORT PHOTOGRAPH OF YOUR CHAT PUPPET

Made with paint.	Made with Irfanview.

Hhen you want to have an image of your chat puppet, you have to make it yourself. You not not have to upload it to Internet when you like to have it displayed as your Passport Photograph on your profile (right above, next to your name). To make ths kind of picture you will need a program to design images like paint or PaintShop Pro (PSP). You have to know how to select, copy and paste... 
Do as follows:

1. First thing to do, is to log on at chatpoint, 121chat, chatboxx, diavoli, or sky-chat and go to a room you like...
2. Find the key 'Print Screen' at your keyboard (normally next to 'Scroll Lock') and press it one time. It seems that nothing happens but the view of you screen is now stored into the memory of your computer.
3. The next thing to do is to open a drawing/photo program and choose 'edit: paste' from the menu. You will see that the image of your screen will appear into the drawing area of the program... Cut your own chat puppet (the one with your name at it)...
4. To cut your own chat puppet select it by keeping the left mouse button pressed and dragging a square around the chat puppet. Make this square just as big as the passport photograph space of your profile (70x80 pixels).. try to do this as exact as possible, the better the image will end up in your profile. When releasing the mouse button you will see some kind of dotted square around the chat puppet... you are still doing it right...
5. Now choose 'edit: copy' from the menu and directly after that 'File: new', followed by 'edit: paste' and you will see now your copied chat puppet. Save the image by choosing 'File: Save as...', and give the file a name. For the time being you can save it to your desktop. Make sure you save the image in JPG or GIF format (not always possible with Paint), otherwise you can not use the image and upload it to your profile. When you need to get a good drawing program, go to the Download page to download IrfanView. With this program you can save BMP images in JPG or GIF format.
6. When using 'PAINT' you have to decrease the drawing size of the bitmap before pasting the copied chat puppet. Choose image-properties from the menu and change the size to 20x20, so the edit field will be always smaller then the image you are going to paste. While pasting the stored image,  Paint will pup up the question if it has to increase the size of the image. Choose Yes and automatically the size will be adjusted to the size of the image you are pasting in the edit area. When you save the image at this moment, you will never have a change to have a big white border around your image...

It is even much easier with the program IrfanView (you can download the program at our download page)

• The first 4 steps are equal the the one which are described  above here.
• Now choose   'edit' 'crop'.
• You are ready now to save, much easier than fooling around with a bitmap and the program Paint. You even can add a border to the image (3d button). Choose for that 'image' 'effects' '3d button'.
  When the border is too width or too small, you are able to adjust that by choosing at the option  'effects' for 'setup'. At the bottom right you can check the settings. Border width and height can be adjusted this way. When you like to know how to work with IrfanView exactly and make nice effects with it click HERE. A lot of examples are available!

When you made no mistakes and you have uploaded the chat puppet to your profile, it will look like follows:

When you did it wrong (when using Paint) it will look like this:

OOPS...How to upload the photo?...LOL...Let make that clear to you too...'Edit' your profile and at the bottom you will see a button 'Photo', click that. Use the buttom 'Browse' to find the save image of your photo at your computer...click now the button 'upload'...and ready you are!!!

Do you want to have the image in you profile itself, for example you made a nice photo of your chat friend and you together, you have to upload the picture to a web server. For example your own web page, when you have one. The users of Chatpoint can use their photo album to store images they like to use. How to do that?... You can read it somewhere further below this page at "Your own photo album'...

TOP

BACKGROUND OF IMAGE TRANSPARENT

** It is also possible with Paint now **

At the section when to use a .bmp, .jpg or .gif on this page is described what a transparent GIF means. and I give two examples how to make a image transparent. One example how to do it with Paint (this program is included with Windows) and hen that is not working an other example how to do it with Giffy.

One important condition is that the background has to be one uniform color.  You can do that by erasing the background with the erase tool (available in the program Paint). This is a time consuming and very secure job. You also can make a copy of the screen, while in a room with a uniform background color, for example during changing from one room to the other. The background will be for a small moment blue before the background of the room is displayed. But you have to be quick, the blue background will be there only for a very short time and position you chat puppet at the bottom of the screen. The real background of the room will be loaded there  the last. Before changing the background color, you have to take care that the background color is not present in the chat puppet itself. You can do that by changing the background color with the fill-tool (the little bucket) from Paint.  

Add transparency with Paint:

(Clint came up with this idea...)

1. First check if your version of Paint is capable of saving an image with the GIF format. Do this by selecting at the menu of Paint File and than Save as... When you can choose  here save in Gif-format (*.gif), than you can use your version to make an image transparent. When not, you have to use the program Giffy.
2. Open (or paste) the image from which you want to have the background transparent with the program Paint. When the image  is still in BMP format you will have to save in with GIF format.
3. You will be able to choose the color which you want to assign for the transparency. Normally this will be the backgroundcolor of the image. You have to select the color by using the eyedropper tool: at the left icons. (select color).
4. Keep pressing the CTRL button down and click with the eyedropper tool at the background color of your image. You will notice that this color is set for background at the left bottom.
5. Select from the menu Image the option Properties... and mark at Transparent the checkbox for: Use transparent background. At Select color you will see that the correct color is already selected.
6. Now you can save the image (in GIF format) and the background will be transparent.

Add transparency with Giffy:

Maybe an easier way to make your image background transparent is using the program Giffy. You can download this program at the Download page or click << here >> to download it directly. After you downloaded the program (giffy20.exe - Size 277 bk) do the following:

1. Open giffy20.exe. and the program will ask you where to install it, normally this will be C:\Program Files\Giffy, but you can decide yourself. 
2. Open now giffy.exe and you can load the image (the one you want to make transparent), with load BMP or load GIF into the program you just installed.
3. It is not possible to load an image with a JPG format. This is understandable because of the compression of the image the background has no uniform color anymore.
4. After the image is loaded you have to activate the checkbox transparant, and a box with Tr. color: appears. In this box the color of the background (to make that color transparent) should appear.
5. To select the transparent background color you have to click at the background of the image. That selected color will appear now in the box Tr. color: . This color is set now as transparent.
6. With save GIF you can save the image and the background will be transparent.

When you already used giffy.exe before you can make a BMP or GIF image transparent by simply  right click the image and choose GIFFY. Convert to Transparent Gif. Could it be easier??

TOP