HTML Image, Picture, and Animation Codes

• Tweet

• Tweet

The codes on this page are for images & animations. Did you know you can add extra pictures to you eBay® auctions or website for free? You simply have to host the picture or animation first, and then enter an HTML code into your auction and you can add extra pictures!
 

*Note- In order to have a picture show up on your website or auction you have to first get it hosted. What does hosting a picture mean? It means that a server (Ex: www.PhotoBucket.com®) is allowing users to view your picture at all times even when you are not online.

So all you need to do is go to www.PhotoBucket.com®, sign-up for an account, (it’s completely FREE) and upload your photo. Then after you upload it, PhotoBucket® will give you a URL code and all you do is insert that URL code from Photobucket® into where it says “URL FOR YOUR PICTURE HERE” for the HTML code on this page. Do NOT delete the quotations ” ” because it will not work.

NOTE: The pictures on this page may not show the actual HTML effects. If you want to see the final results of what the HTML code can do to the images & pictures, then copy the code & test it in our HTML Checker.

Take an ordinary picture like this one and turn it into the following using the codes provided:

X-ray Filter:

<img src=”YOUR PHOTO’s URL GOES HERE” style=”filter:xray()”>

 

Engrave Filter:

<img src=”Your Photo’s URL Goes Here” style=”filter:progid:dximagetransform.microsoft.emboss”>

 

Opacity Filter:

<img src=”Your Photo’s URL Goes Here” style=”filter:alpha(opacity=50)”>

 

Black & White Filter:

<img src=”Your Photo’s Url Goes Here!” style=”Filter: Gray”>

 

Invert Filter:

<img src=”Your Photo’s URL Goes Here!” style=”Filter: Invert”>

 

Ripple Filter:

<img src=”Your Photo’s URL Goes Here!” style=”Filter: Wave(Add=0, Freq=5, LightStrength=20, Phase=220, Strength=10)”>

 

Putting your cursor over the Image Makes your pictures shake with this Code!

<style> .shakeimage{ position:relative } </style> <script language=”JavaScript1.2″> var rector=3 var stopit=0 var a=1 function init(which){ stopit=0 shake=which shake.style.left=0 shake.style.top=0 } function rattleimage(){ if ((!document.all&&!document.getElementById)||stopit==1) return if (a==1){ shake.style.top=parseInt(shake.style.top)+rector } else if (a==2){ shake.style.left=parseInt(shake.style.left)+rector } else if (a==3){ shake.style.top=parseInt(shake.style.top)-rector } else{ shake.style.left=parseInt(shake.style.left)-rector } if (a<4) a++ else a=1 setTimeout(“rattleimage()”,50) } function stoprattle(which){ stopit=1 which.style.left=0 which.style.top=0 } </script> <img src=”YOUR PICTURES URL GOES HERE” class=”shakeimage” onMouseover=”init(this);rattleimage()” onMouseout=”stoprattle(this);top.focus()” onClick=”top.focus()” width=”63″ height=”73″> NOTE: This code does NOT work in eBay auctions but it does work with websites!

 

To Insert a Picture or Animation into Your Auction or Website use this code:

<img src=”URL FOR YOUR PICTURE HERE”>

 

To center your picture:

<center><img src=”URL FOR YOUR PICTURE”></center>

 

Use this html code to adjust the size of your picture. Just change the width or height in the quotation marks:

<img src=”URL FOR YOUR PICTURE” width=”155″ height=”135″>

 

Use this code to make your picture into a marquee:

<marquee><img src=”YOUR URL WHERE YOU HOST YOUR IMAGE HERE!”></marquee>

 

Make your picture a clickable link:

<a href=”URL YOU WANT USERS TO GO TO”><img src=”URL FOR YOUR PICTURE”border=”0″></a>

 

Position your text on the left with a picture on the right.

<center><table border=”0″ width=”70%” cellpadding=”10″ bgcolor=”BLACK”> <tr><td valign=middle><font color=”WHITE” size=”+2″ face=”Arial Black”> TEXT HERE</td> <td align=center> <img src=”YOUR PICTURE URL”> </td></tr></table></center>

 

Position Your Text on the Side And Your Picture in the Middle!

<center><table border=”0″ width=”85%” cellpadding=”10″ cellspacing=”10″ bgcolor=”#000000″> <tr><td valign=top><font color=”#FFFFFF” size=”+2″ face=”Arial Black”> Text on this side!</td><td align=center><img src=”YOUR PICTURE URL HERE” width=150 height=200 alt=”picture”></td><td valign=bottom><font color=”#FFFFFF” size=”+2″ face=”Arial Black”> And more text on this side</td></tr></table></center>

 

Cool HTML Background Codes