Tools

-
-
-
-
-
-

Contact Me

Site Links

- MySpace Icons
- Your link here
- More Affiliates...

Graphics

Computer Graphics although not necessary when creating a website is a nice addition. Knowing where to find them and how to create them is extremely helpful in web design.

What is a Pixel?

Pixels are the smallest addressable region on the screen. This is the way images are created on the screen by placing numerous amounts of pixels next to each other.

Top

Where to get Graphics?

Computer graphics (images) can be used to decorate all sorts of websites. Finding them can be tough. The simplest way to find some computer graphics would be to search for them on a search engine such as google. There are some websites (seen below) in which you can find graphics as well.

- My-Cons - They have numerous pages of icons which can be placed on any website using the code below it.
- Glitter Graphics - Tons of Graphics available here.

Top

How can I make my own Graphics?

So you can't find what you want online. Luckily creating your own images is not all that difficult. Below is a list of products, both free and that need to be paid for.

For Purchase
- Adobe Photoshop
- Paint Shop Pro

Free
- Paint (built in to most versions of windows)
- Gimp
-

Top

How do I place images on my website?

Placing images on your website is relatively simple. It all comes down to the use of the following code.

<img src="Image URL">

The Image URL can be any URL that ends in a type of image. (.jpg, .bmp, .gif etc...). Using that code will place any image on your website.

Top

Altering your Images

There are many different things that can be done to your images with codes. Below are some of the many.

<img src="Image URL" height="" width="">

Setting the height and width can be done by placing any pixel size within the quotes. Note that if both pixel sizes are changed and they do not keep the proportions the same the image can be altered.

Percentages can also be used in the height or width of the code. The percentages go in relation to the window it is in.

For example:

This would take images/example.gif and resize it to fill the window it was in.

When using percentages or pixel placement if you want to be sure of not distorting the image you can simply use one of the two settings. Height or width but not both. Take width for instance, the height of the image will be changed in relation to the width you choose (percentage or pixel amount) to keep the image proportionate.

You can also use a tag to place a border around your images. The following code will place a border around your image. Hovering over the image will display the alt tag (on IE but not on Safari).

<img src="http://www.codeitall.com/images/example.gif" border="1">

- See This Code In Action

<img src="images/example.gif" border="5">

- See This Code In Action

Note the difference when the border = number is increased.

The alt tag is a good tag to use on all images. It describes (for search engines) what the picture is. Pleasing search engines is always good practice if you are looking for hits. The alt tag is used by the following code.

- See This Code In Action

Notice there is no difference in the picture itself. Just helps out the search engine. I would suggest using this code for all images.

But how do I change the border color?

Using this code it is relatively simple to adjust the color of the border. You simply need to add the line

style="border-color:#colornumber;"

- See This Code In Action

But how do I change the border style?

Border style is also a cool thing to use around images. The choices for border style are solid, dashed, and dotted. The code to use is as follows.

style="border-style:dashed;"

- See This Code In Action

Be sure to choose the border size prior to style and/or color or it will not work. You can also combine style and color.

style="border-style:dashed; border-color:ff0000;"

- See This Code In Action

Top

Thumbnails

Thumbnails are images that are smaller than the actual image however when they are clicked they expand into larger images by opening in a new window. If you think back to the information above you can probably guess how this can be done.

Lets say that the image you want to create a thumbnail of is called example.gif. Then the simplest way to have a thumbnail image on your site is to use a code similar to this.

<img src="http://www.codeitall.com/images/example.gif" height="50">

- See This Code In Action

This shrinks down the size of the image. Be sure to only use height or only use width for this so the proportion stays correct. Placing in a smaller height than the actual height of the image shrinks it. The same goes for making the image larger just make the height or width bigger than the image actually is. Keep in mind doing so will reduce the quality of the image. Since my example image is 100 x 100 setting height to 50 changes it to a 50 x 50 image.

Now the big question is how do you open up to the regular size image.
Take the link to the actual image in this example: http://codeitall.com/images/example.gif and place that link around the image tag. The code for a link is seen below.

<a href="http://codeitall.com/images/example.gif" target="_blank"></a>

You will want to set target="_blank" because a thumbnail normally opens in a new window. Setting target to blank does just that. The combination of the image and the link that opens up the image is seen below.

<a href="http://codeitall.com/images/example.gif" target="_blank"><img src="http://www.codeitall.com/images/example.gif" height="50" border="1"></a>

- See This Code In Action

For more information about links using the <a href= tag please click here

Top

Background Images

Background images are just what they say. They are the images that can be placed on the background of your website. This can be done using CSS or just by using a code placed directly in the websites code. Here I will stick to simply explaining how to do this directly.

<body background="Image URL">

By placing this code in your HTML you will be able to choose any link to an image and have it become your sites background.

Using CSS will allow you to do much more to that background image. It is recommended that you use CSS to place background images on your website.

Top

Image Maps

Image maps are a cool addition to some websites the idea is that one image can be linked to by multiple links. An example of this would be as follows.

Image used from htmlcodetutorial.com

Above is an example of an image map. Scroll your mouse over each of the shapes and you'll see that until u get over the shape your cursor is a normal pointer but the shapes are each links. In this example they all link to the same place which is the page you are currently on. To the right of the image you'll see the exact code that is used to make the image map on the left.

Now for a break down of the code and explanation of each.

<MAP NAME="map1">

This line just names the image map so you could potentially have multiple image maps on a single page.

<AREA HREF="Graphics.php" TITLE="Graphics" SHAPE=RECT COORDS="6,116,97,184">

HREF="Graphics.php" - This is the URL in which you want the image to link to.

TITLE="Graphics" - This is the title that shows up if you hover over one of the images.

SHAPE=RECT - This is the shape of the object. In this case a rectangle. (other choices are CIRCLE and POLYGON.

COORDS=6,116,97,184 - The first two coordinates are 6,116 which is the location of the top left of the rectangle. The last two coordinates are 97,184 which is the location of the bottom right of the rectangle. These are the only coordinates that are needed to dictate the size of the rectangle. Order Matters!

<AREA HREF="Graphics.php" TITLE="Graphics" SHAPE=CIRCLE COORDS="251,143,47">

Here I'm just going to skip to the COORDS="251,143,47". 251,143 is the coordinates of the center of the circle. 47 is the length of the radius you can find this number by going to the upper edge of the circle. If you move straight up from the center to the edge you will see the coordinates 251,96 If you notice the X coordinate doesn't change therefore you will use the Y's 143 - 96 gives you the length of the radius which is 47 and that is the third number.

<AREA HREF="Graphics.php" TITLE="Graphics" SHAPE=POLY COORDS="150,217,190,257,150,297,110,257">

The COORDS for a Polygon are relatively simple. You just need to know the points of the Polygon. They should have the last set of COORDS = the first set to tell the polygon how to close. If it is left out a line will be drawn to close the image.

<IMG SRC="images/imagemapex.gif" BORDER=0 WIDTH=300 HEIGHT=300 USEMAP="#map1">

IMG SRC=""
This is how you choose what image to use for the map.

BORDER=0
This draws the border around the map 0 = no border, 1 = 1 pixel wide border and so on.

WIDTH=300 HEIGHT=300
This tells the map what size it is. (keep this the same as the actual image size or the map will not work).

USEMAP="#map1"
This is key, this chooses map1 described by MAP NAME="map1" from the upper part of the code.

Top

Now for the real question.

How do I find the coordinates?

On your PC you should have a program called paint. In paint you simply need to open the image and click the star on the toolbar. This will give you a plus sign looking cursor. Place it where you need the coordinate for (top left corner of a rectangle for instance.) Then at the bottom right of the pc paint program you will see two numbers (x),(y) those are what you need.

Top

Where can I host my images?

Image hosting is necessary if you are developing a website.  Links to your computer will not work for other users visiting your page.  Do not try to link to your image using something similar to the following.   C:/mydocuments/images/image.jpg.  Instead you must host your image.  Upload the image to the website and then copy the link to it.  That can then be used in your coding.  Below is a list of some image hosting websites.

   - Photobucket - They demand that you register to host your images but it is free.
   - PicOodle - They allow uploading without registering.
   - Image Shack - They allow uploading withour registering
   -

Note: If you purchase web hosting you can simply upload the images to your own server using FTP for more information on FTP go to Getting Started.

Top

Menu