Saint-michaels Html Tips And Tricks #4 been awhile so here somewhat new stuff

Saint_Michael · July 10, 2005

WEll its been awhile since i did so i will put up some more useful html tips and tricks here on Xisto.com

Ok for trick actually, want to know how some websites got those ool icons put on their website link in the favorites folder well here you go in 3 quick steps.

1. create an image then shrink it down to 16x16 and save it as avicon .bmp.

2. then change it to .ico, when is the file reconizing it as a icon., if you are having problems saving it, there are some resources out there that can change it for you.

3. load the image to your website and add this tag in between your <head> tags

<link rel="shortcut icon" href="favicon.ico">

that should be it now your icon will be in someones favorite folder and in the url bar on ie or firefox or whatever you use.

next tip is for those text tool tips or just floating text tell what its about. well anyways someone posted that they wanted a way to show a foot note on text , it was posted how to do it but i found a easier way to do it without the use of the href in the <a> (ancor tag) this could be greatly used and saves some room on your files by doing what i posted about it dhtml and or javascript

<A TITLE="Here is the text!">Put your mouse cursor on me to see the tool tip !</A>

mind you its a second or two for a delay but it works.

for my next trick :unsure:

. this tip is those who do chracter shrines or bio pages, which have a small amout of content this is embedding trick inwhich you load a page with in a page which means you can customize the scrollbars and other cool css tricks

<object data=http://forums.xisto.com/no_longer_exists/ width="600" height="400"> <embed src=http://www.websitehere.com//?gtnjs=1 width="600" height="400"> </embed> Error: Embedded data could not be displayed. </object>

this next one is more javascript but its a little useful, this next trick is used for image gallaries and or stories people write about or you can use it for quizes and stuff like that. its your basic back and forward button.

<FORM METHOD="post"><INPUT TYPE="button"
VALUE="BACK"
OnClick="history.go( -1 );return true;">
<INPUT TYPE="button"
VALUE="FORWARD"
OnClick="history.go( 1 );return true;">
</FORM>

well thats it for today hoepfully some of these will be put into good use.

also check out my design i used for fsa at http://forums.xisto.com/no_longer_exists/

PEACE!!!

snlildude87 · July 10, 2005

Instead of using JavaScript to go back a step in history, you could also use PHP:

<a href="<?php echo $_SERVER["HTTP_REFERER"]; ?>">Go back</a>

It's much easier; there are no forms; and it's always works regardless of whether the user has JavaScript enabled or not. Of course, that will only work with hosts with PHP support such as Xisto.

Edit: Fixed my own BBCode
Edited July 10, 2005 by snlildude87 (see edit history)

clagnol · July 10, 2005

1. create an image then shrink it down to 16x16 and save it as avicon .bmp.

159334[/snapback]

This has been discussed on the Xisto fora before. Using this method does not create a valid icon file. It may work, but you will have much more control over your icon image if you use the authentic icon format [such as including transparency].

Tyssen · July 10, 2005

This has been discussed on the Xisto fora before. Using this method does not create a valid icon file. It may work, but you will have much more control over your icon image if you use the authentic icon format [such as including transparency].

You can use this site to create a favicon from any image.

beeseven · July 12, 2005

Favicons usually work if you just have a file called "favicon.ico" in the public_html directory, you don't need the tag for it.Also, snlildude's method for a back button only works if the user has referrers enabled, otherwise, it makes a link to "".

GM-University · July 13, 2005

Nice tutorial, I had forgotten how to do that favicon thing, you can also do the rollover thing when you do the text thing like this...
Put this right under </body>

<div id="dhtmltooltip"></div><script type="text/javascript">var offsetxpoint=-60 //Customize x offset of tooltipvar offsetypoint=20 //Customize y offset of tooltipvar ie=document.allvar ns6=document.getElementById && !document.allvar enabletip=falseif (ie||ns6)var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""function ietruebody(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}function ddrivetip(thetext, thecolor, thewidth){if (ns6||ie){if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolortipobj.innerHTML=thetextenabletip=truereturn false}}function positiontip(e){if (enabletip){var curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft;var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop;//Find out how close the mouse is to the corner of the windowvar rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000//if the horizontal distance isn't enough to accomodate the width of the context menuif (rightedge<tipobj.offsetWidth)//move the horizontal position of the menu to the left by it's widthtipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"else if (curX<leftedge)tipobj.style.left="5px"else//position the horizontal position of the menu where the mouse is positionedtipobj.style.left=curX+offsetxpoint+"px"//same concept with the vertical positionif (bottomedge<tipobj.offsetHeight)tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"elsetipobj.style.top=curY+offsetypoint+"px"tipobj.style.visibility="visible"}}function hideddrivetip(){if (ns6||ie){enabletip=falsetipobj.style.visibility="hidden"tipobj.style.left="-1000px"tipobj.style.backgroundColor=''tipobj.style.width=''}}document.onmousemove=positiontip</script>

Put this with your CSS <style> tag, or .css file.

#dhtmltooltip {position: absolute;width: 150px;border: 1px solid #C1C1C1;padding: 2px;background-color: #EFEFEF;color: #000000;visibility: hidden;z-index: 100;filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);}

And put this in your link

onMouseover="ddrivetip('Your tooltip text','black', 300)";onMouseout="hideddrivetip()"

A link example would be

<a href="http://forums.xisto.com/topic/24328-saint-michaels-html-tips-and-tricks-4-been-awhile-so-here-somewhat-new-stuff/ text here','red', 300)";onMouseout="hideddrivetip()">Text Here</a>

GM-University · July 13, 2005

......you can also do the rollover thing when you do the text thing like this...

Put this right under </body>.....

160582[/snapback]

That should have been <body>, not </body>

sonyguy · July 17, 2005

These are really good, I like the first one about the icon, I always wondred about that! Thanks!

sachavdk · July 18, 2005

Here's also a good program for creating icons form bitmaps, gifs,... and it even supports psd. You can also create avi files from animated gifs and series of icons (ie 8bit, 24bit, 32bit(24bit/8bit alphatransparancy), 48*48,32*32,24*24,16*16)...

http://www.gamani.com/
Unfortunately its not free but you can use a non-limited edition for 30 days.
And it's also not to expensive to buy ($39.95) (when you've seen its possibilities you know why )

PS: there are also older versions available for download. Check that you download version 4.0.2 (4.0)

Dragonfly · July 18, 2005

Nice tutorial on the back button. Thanks for sharing, I think people start to hate keep hitting on the back button from the browser top page, but they want to hit where they just finished reading the content. So, this function is becoming more and more important. For favicon I just saved first as png file and then change the extension file as ico it works this way too. And like some have said without link also if we place it in public_html folder it still works. And xcitem dot com site cannot open. It says time out. I think the server is down for now. I'll see next time.

Dart-kun · July 25, 2005

I liked the first trick, to make a famicon, but there is a program in which to do it aswell. Still very good though.

strawberrie · July 25, 2005

Thanks for the quick HTML tips, Saint_Michael! I'm sure they'll be very useful to a lot of webmasters/mistresses XD out there...@Tyssen: The site you provided is really helpful in creating favicons! Thanks~

Saint_Michael · July 25, 2005

no problem as here to help out, might do another one later on.

Sign In

Saint-michaels Html Tips And Tricks #4 been awhile so here somewhat new stuff

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information