Displaying Images, Image Codes, Image Links, Vampirefreaks Pics

[ Basic Images ] [ Making Image Links ] [ Resizing (with HTML) ] [ Alternative Text ] [ VF Pic Classes ] [ Hiding VF Pics ] [ Borders on VF Pics ]

[ Resizing VF Pics ] [ Positioning VF Pics ] [ Mouseover Images ] [ Opacity/Transparency ] [ Other Filters ] [ Hosts / Upload Help ]

To simply put an image on your page or in a comment, the HTML code is:


Images must be UPLOADED to somewhere like [ Tinypic ] for this to work. You cannot use an image that is just saved on your computer. When you upload your image, the host (eg Tinypic) will give you an address for it (Sometimes called an URL or LINK), and you will need to insert this into the above code. If the host gives you more than one address, and you're unsure which is the right one, look for one that begins with "http://" and ends with an image file extension, (usually ".gif", ".jpg", or ".png").

If you want more help with image hosting, or a list of other free image hosts [ Click Here ].

This is the code to make your own clickable image.
You must use the full path of the page you want to link to (ie including the http:// bit), or it won't work.



Open In a New Window

If you want your link to open in a new window when someone clicks on it, just include target="_blank" in the link tag (the "a href" part), like this:



No Borders?

Image links usually have a border by default. If you dont want a border on your image, add border="0" to the image tag like this:

It's better to resize your images in a program like Photoshop or Paintshop before you upload them if you can, as resizing with code reduces image quality.

If you want to resize an image that VF has put on your page, like your default picture or (on some templates) thumbnails or friend pics, you need the [ Resizing VF Pics ] bit. This section is for occasions where you have added the image tag yourself, and can edit it. To change the size of your image, just include your desired width and height in the image tag, eg:

Alts let you include some alternative text for if the image doesn't load. If your visitors are using Internet Explorer the text pops up on mouseover too. Alt tags are used to give the visitor some information about your image, and its good practice to include them if you can.

Move your mouse of the image on the left (Explorer users only) to see the alternative text pop up. The image on the right is what would show up if the image failed to load.

You can use CSS to edit the way your VF pictures display on your profile. To use CSS to edit something you first have to be able to identify the thing you want to edit. Luckily most of the things on your VF page already have their own IDs known as classes. The picture you have set to default always has the class "defaultpic" and the others all have the class "thumbnail". This means that if you make any changes to thumbnail, all of your smaller pictures will be affected.



Classes in CSS always start with a dot, so in the code below the default picture is referred to as ".defaultpic", and thumbs are ".thumbnail".

There may be one more image class on your profile page- if you allow other peoples comments to show up on your profile they have a small icon beside their message. These have the class ".commenticon". Like with the thumbnails, any changes you make to .commenticon will affect all the user icons on your page.

The code to make VF pics disappear off your page is very simple. As you can see there's a line of CSS for defaultpic, one for thumbs and one for commenticons [ which is which? ]. If you don't want to make them all vanish, then just take out the line/s for the ones you want to keep.



Nb. There is an option on the edit profile page for controlling how many thumbnails show on your profile.

If you want to create borders that change on hover, check out the [ Mouseover Images ] bit. This code will put a static border around each type of VF pic [ which is which? ]. As with the code above, I've kept the 3 types of images separate so that you can easily remove the lines for the one/s you don't want to change.


[ Click Here ] to go to the borders page and find out what other different types are available.

You can use CSS to set the pics VF puts on your page to any dimensions you like. As with the codes above, I'm going to include an example code for each different type of pic [ which is which? ]. You can erase the line/s for any images you don't want to change:


Remember sizes applied to thumbnails or commenticons will affect all of them. Size is measured in px (pixels). 1px is a tiny dot about the size of a full stop.

50px by 50px image	100px by 100px image	200px by 200px image

When shoving VF pics around your page you should be aware that some methods of positioning have different results in different browsers, or at different screen resolutions. Absolute or relative positioning is likely to be an absolute disaster unless you know exactly what you're doing, and even then it's fiddly. Also bear in mind that any positioning you apply to your thumbnails affects them all in exactly the same way.

The thing I get asked most often is how to make the thumbnails appear beside the main pic, like this:



It's dead easy. All you have to do is float the defaultpic to the left (or right) and things below it will move up beside it if there is room. To get the effect above the code is:


Alternatively you can reverse the effect like this:



By using this code:


The .userinfo { clear: both; } part of this code is to make sure the userinfo table starts on a new line in all browsers, and doesn't end up trying to squeeze up beside the defaultpic too.


Positioning with Margins:

Margins are simply the space around your pictures. They're good for making small adjustments to their positions, like spacing thumbnails further apart, or creating a bit more room around the defaultpic. CSS allows you to adjust margin-top, margin-bottom, margin-left or margin-right individually, or you can just use margin alone if you want all sides to have the same size margin.

If you're giving your defaultpic a margin, its just as simple as doing something like:



Similarly, with commenticons, although the margins you set will affect each one, this is most likely what you want to happen anyway, so its not really a concern:



However, when it comes to thumbnails, they're right next to each other, and you will notice that a 50px margin on ".thumbnail" will create a 100px space between them. Why? Because margins don't overlap. Instead you get the sum of the 2 margins that are next to each other-



So we compensate by halving the size of the margin we set, or by only setting one margin that affects horizontal spacing, and one that affects vertical, (eg just left, not left and right). To get a 50px space between all our thumbs (both horizontally and vertically) we could use either:


(sets a 25px margin all the way around every thumbnail) Or:


(sets a 50px margin on the right, and bottom of each thumb, but nothing on the left or top).

Aka how to make your images change when someone moves their mouse over them:



To do this, first you need two images [ uploaded ] that are exactly the same size. (Nb, if you just want to add a [ filter ] like wave or invert to some of your VF pics, skip this and scroll down a bit).
Once you have your images, the code you need is:


Once you've got it working you'll probably want to remove the border: 1px solid red; part. I just included it so that you can see where the div box is even if the images fail to appear. You will also need to change the width and height to match the width and height of the images you want to use, and the background urls to the paths of those images (image 1 is the original image, image 2 is the one that shows on mouseover).


VF Pics - Filters on Mouseover.

Although you can't swap your VF pics for different ones on mouseover, you can add a [ filter ] (shows up in IE only) or [ Opacity ] on mouseover. Go to those sections for how to apply the different filters. I'm going to use opacity as an example, because it works in most browsers.



The code for this one is easier. To apply it to defaultpic use:



For thumbnails (affects all of them):



Or, if you just one one type of hover filter, that affects every image on the page:



You can do other things on mouseover too. How about making an image grow huge:





Or changing the border:

This code works in (at least) IE, Firefox and newer versions of Opera. It may work in other browsers too. If you want fade in or out effects IE has a specific filter for that: [ Fade Filter ], but it wont work in any browsers other than Internet Explorer. Of course you can always replace the alpha(opacity=xx) part of this code with a fade in/ out filter for explorer, and set moz-opacity as well for other browsers. Opacity (in case your wondering) is simply the opposite to transparency. 100% Opaque is completely visible, while 100% transparent is completely invisible. Anyhow, on with the filter.

20% Opaque Image	50% Opaque Image	70% Opaque Image

You can apply opacity to any image on your page, whether its a VF picture, or one you wrote the HTML for yourself. In the [ Filters ] section below, is a list of all the different types of image you can apply filters to. (just swap "filter: fliph;" for "filter: alpha(opacity=50); -moz-opacity:.50; opacity:.50;" ).

Heres an example of 70% opacity applied to defaultpic.


Nb. Opacity works on text too. [ Text Opacity ]

You can use filters on images, animated images and even text. (See the [ text bit ] for an explantion of applying filters to text). Filters are exclusive to the Internet Explorer browser, so people using other browsers will just see the original image.

You can apply image filters to any or all of your VF pics, and any pics you've added with your own HTML. We use CSS to set which images the filter will affect:

• To apply a filter to your default (main) picture, the code is:
  <style type="text/css"> .defaultpic { filter: fliph; } </style>
  
  
• For thumbnails (all of them):
  <style type="text/css"> .thumbnail { filter: fliph; } </style>
  
  
• For comment icons (the little avatars beside peoples messages):
  <style type="text/css"> .commenticon { filter: fliph; } </style>
  
  
• For all images that arent links (none clickable images):
  <style type="text/css"> img { filter: fliph; } </style>
  
  
• For all link (clickable) images *OVERRIDES FILTERS ON .DEFAULTPIC, .THUMBNAIL & .COMMENTICON:
  <style type="text/css"> a:link img, a:visited img { filter: fliph; } </style>
  
  
• For link (clickable) images on hover (when mouse is hovered over them):
  <style type="text/css"> a:hover img { filter: fliph; } </style>
  
  
• To add a filter to an image you have included with your own HTML:
  <img src="Your Image Url" style="filter: fliph;">

For the examples above, Ive used the fliph (horizontal flip) filter, but of course there are lots more. To use any of the filters below in place of the horizontal flip filter, just swap filter: filph; for the filter you want to use.



Fade Filters (IE Only)

Xray Filter (IE Only)

Blur Filter (IE Only)

Horizontal Flip Filter (IE Only)

Vertical Flip Filter (IE Only)

Gray Filter (IE Only)

Invert Filter (IE Only)

Wave Filter (IE Only)

Uploading an image means that you put it on the internet so anyone can access it at any time, even if your computer is turned off. There are lots of ad supported sites that will let you host your images for free.


Tinypic   [ www.tinypic.com ]

Photobucket   [ photobucket.com ]

Imageshack   [ www.imageshack.us ]

Index Junkie   [ http://indexjunkie.com ]

Other Image Hosts