Add a FREE cross browser static image/link to your website. One of the easiest and safest ones I have ever used... A Honey Bear Playhomes Tip...

  • 1
  • Idea
  • Updated 10 years ago
Here is one of the easiest codes to add to your website a cross browser static (always visible) image with link attached. (See my website for an example of my Toys for Tots image link)

The only parts of the code that you need to change are the Link to URL, "Pre Image Text" text and the URL to the image that you want to appear. All are contained within the bottom of the code. Simply replace the following with your information.

1) Copy the code within the <!-- and the --> and paste it into Wordpad or Notepad
2) Alter the code as follows:
A) http://LinkToURL = The URL that clicking on the image takes your visitor to.
B) Pre Image Text = What text/words you would like to appear before the image.
C) YourImageURL.com = The URL to the image.
3) Copy the code you changed
4) Drag an HTML widget onto your page at the bottom and paste the code into the HTML text editor pop up box
5) Update to view your website (if you only just now placed the image in your file manager it will not appear until you update your site)

<!--

<SCRIPT language=javascript type=text/javascript>
//<![CDATA[
var Ovr2='';
if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
{cot_t1_DOCtp="_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}";}
else
{cot_t1_DOCtp="_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression(document.body.scrollLeft + document.body.clientWidth - offsetWidth);}";}

if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
{cot_t1_DOCtp2="_top:expression(document.documentElement.scrollTop-20+document.documentElement.clientHeight-this.clientHeight);}";}
else
{cot_t1_DOCtp2="_top:expression(document.body.scrollTop-20+document.body.clientHeight-this.clientHeight);}";}
var cot_tl_bodyCSS='* html {background: fixed;background-repeat: repeat;background-position: right bottom;}';
var cot_tl_fixedCSS='#cot_tl_fixed{position:fixed;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'_position:absolute;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'bottom:0px;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'right:0px;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'clip:rect(0 100 85 0);';
var cot_tl_fixedCSS=cot_tl_fixedCSS+cot_t1_DOCtp;
var cot_tl_popCSS='#cot_tl_pop {background-color: transparent;';
var cot_tl_popCSS=cot_tl_popCSS+'position:fixed;';
var cot_tl_popCSS=cot_tl_popCSS+'_position:absolute;';
var cot_tl_popCSS=cot_tl_popCSS+'height:194px;';
var cot_tl_popCSS=cot_tl_popCSS+'width: 244px;';
var cot_tl_popCSS=cot_tl_popCSS+'right: 120px;';
var cot_tl_popCSS=cot_tl_popCSS+'bottom: 20px;';
var cot_tl_popCSS=cot_tl_popCSS+'overflow: hidden;';
var cot_tl_popCSS=cot_tl_popCSS+'visibility: hidden;';
var cot_tl_popCSS=cot_tl_popCSS+'z-index: 100;';
var cot_tl_popCSS=cot_tl_popCSS+cot_t1_DOCtp2;
document.write('<style type="text/css">'+cot_tl_bodyCSS+cot_tl_fixedCSS+cot_tl_popCSS+'</style>');

function COT(cot_tl_theLogo,cot_tl_LogoType,LogoPosition,theAffiliate)
{document.write('<div id="cot_tl_fixed">');
document.write('<a href="http://LinkToURL" target="_blank"><img src='+cot_tl_theLogo+' alt="Pre Image Text" border="0"></a>');
document.write('</div>');}

//if(window.location.protocol == "http:")
COT("http://YourImageURL.com", "SC2", "none");
//]]>
</SCRIPT>

-->

Please note that you should never link directly to an image on another persons website without their permission. Be kind and use your own images in your file manager.

You can make it open in the same window/tab by removing the ( target="_blank ) after the Link To URL. Also, you can with editing the code have it appear elsewhere on your web page but the lower right is usually a safe bet and the best place for it.

As you will notice my Toys For Tots image is an animated GIF with a transparent background. I have posted here how you can make any image background transparent... http://honeybearplayhomes.synthasite....

http://getsatisfaction.com/yola/topic...

Additionally here is a simply wonderful FREE online generator to not only convert any image into another but you can make an image background transparent as well. This one works better on an animated GIF than any other. http://www.online-image-editor.com/in... A little playing around with it and you will be an expert in no time but know that to make an image background transparent with this one first you must convert the image to a GIF.

Also, here is a FREE vector art site with clip art images that already have transparent backgrounds. http://www.clker.com/

Sure you can use an image with a background as your static image link but I think that it looks better being transparent.

I hope that you all enjoy...

Happy site building and occasionally St. Nick still digs into his bag to share something good...



Ed

See an example of the animated Toys For Tots train here

See some of my other threads here
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
  • confident you can do it...

Posted 10 years ago

  • 1
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
I almost didnt want to ask this - at the risk of sounding stupid - when is a link not always visible - i dont understand what benifit i get from using this code over a normal href - please explain - Lee.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Hey Lee...

There are many codes which do the same thing but some are simply better at what they do than others.

What this code can do is place a static (linked) image anywhere on your page (top, bottom, right, left, centered, t-centered, l-centered, and so on) This image will be locked in place and will not be jerky in movement like 90% of the other codes. I like it because it is more professional to see an image sit there and be seen and not jump about like wild animal and be distracting.

Additionally, I have found it to be cross browser compatible with no problems arising. Again a professional aspect in that what viewers of FF see your visitors that use IE will also see.

In these few minutes I could not find a good off Yola example of the jerkiness I was referring to so sadly I have to use the test site to show you what I meant...

See my (Please donate to these worthy charities... Click here) image on the bottom of my index page:
http://honeybearplayhomes.synthasite....

Also, my (Toys for tots) image on all the other pages...

Then look at the Yola codes site and see the sliding movement that the (Return to tips and tweaks) image has. http://yolacodes.yolasite.com/createi...

Do they both do the same thing? Yes
Do they both serve their purpose? Yes

It is my preference to have an image which is not wildly jumping about and that is what I shared with everyone in this code.

Happy site building
Ed
Photo of KanThaiDecor

KanThaiDecor

  • 2402 Posts
  • 263 Reply Likes
By the way thanks again for the tip on the classified site you posted awhile back....The links took awhile to show but I see them now.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
now i get it - i looked on your home page for the toys for tots but didnt see it.

These are cool i'd seen the example on the yolacodes page - thanks for the code - Lee.