|
I f you were to touch your cursor on any image on this page instead of getting the "Normal" alt tag discription, you will notice that it scrolls messages instead. This is a very eye catching, subtle effect to add you your page.
W e have tested the code in IE5.5, IE6, Netscape4.08 and Netscape7.0. This script worked well in all platforms with the exception of Netscape4.08 and Netscape7.0 where it will "Not" work.
A fter we looked at the script line by line, we can show you how to add as many images with this effect as you want, how to add a link with it and also how to add an email link.
D epending on your knowledge of HTML and java scripts, it is not a very hard script to make work on your site with the default one basic image. A good solid background in HTML and java scripts would not hurt for adding all the other types of image effects.
T he first part of the code you paste into the <HEAD> section of your document and there are "No" reconfigurations to be made in this section.,/font>
N ow with the second part of the script that is pasted into the <BODY> section. It is "slightly" more involved if you want more than the default number of one image to have the scrolling marquee effect on the mouseover.
W e will show you all the different configurations to add a link to the image, add an email link to the image and also add text with an image. Since there are many different variations of this script that can be introduced other than the default part of the <BODY> section we will put the reconfigurations under each different example.
Default Body Section Of Code.
This Is For One Image Only, No Links!
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50
0);width:150px;background-color:gold;z-index:10"></div>
<div align="CENTER" name="divTest" onMouseover="showtip2(this,event,'Be sure to check out our other JavaScripts!');" onMouseout="hidetip2();" STYLE="cursor: hand">
<TABLE border="0" cellpadding="0" cellspacing="0"><TR><TD COLSPAN="7">
<IMG SRC="/img/animated-tooltip/1.gif" WIDTH="100" HEIGHT="39" BORDER="0"><p>
</TABLE>
</p></div>
Reconfigured Body Section Of Code.
This Is For One Image Only, No Links!
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50
0);width:150px;background-color:black;z-index:10"></div>
<div align="CENTER" name="divTest" onMouseover="showtip2(this,event,'Add Your Discription Or Anything Else Here');" onMouseout="hidetip2();" STYLE="cursor: hand">
<TABLE border="0" cellpadding="0" cellspacing="0"><TR><TD COLSPAN="7">
<IMG SRC="Your Path To Your Image" WIDTH="100" HEIGHT="39" BORDER="0"><p>
</TABLE>
</p></div>
<div align="CENTER" name="divTest" onMouseover="showtip2(this,event,'This is an
image that is attached to a URL address that will open in a new window');"
onMouseout="hidetip2();" STYLE="cursor: hand">
<TABLE border="0" cellpadding="0" cellspacing="0"><TR><TD COLSPAN="7"><a
href="Your URL Address Goes Here"target="_blank"><IMG SRC="Your Path To Your Image Goes Here" WIDTH="201" HEIGHT="24" BORDER="0"><p>
</TABLE>
<p></div>
T he bove is the section of code you need to paste anywhere in the <BODY> section to get an image with a link.
<div align="CENTER" name="divTest" onMouseover="showtip2(this,event,'This is some text on top with an image that attaches to an email link');"
onMouseout="hidetip2();" STYLE="cursor: hand">
<font face="georgia,arial,helvetica" size="-2"color="#ba55dc">
This Site Was Built And Is Maintained Exclusively by</font><br>
<TABLE border="0" cellpadding="0" cellspacing="0"><TR><TD COLSPAN="7"><a
href="mailto:Your Email Address Here"><IMG SRC="Your Path To Your Image Goes Here" WIDTH="201" HEIGHT="24" BORDER="0"><p>
</TABLE>
</p></div>
T he above is the section of code you need to paste anywhere in the <BODY> section to get an image with email and text.
<div align="CENTER" name="divTest" onMouseover="showtip2(this,event,'This is an image attached to an email link');"
onMouseout="hidetip2();" STYLE="cursor: hand">
<TABLE border="0" cellpadding="0" cellspacing="0"><TR><TD COLSPAN="7"><a
href="mailto:Your Email Address Here"><IMG SRC="Your Path To Your Image Goes Here" WIDTH="201" HEIGHT="24" BORDER="0"><p>
</TABLE>
</p></div>
T he above is the section of code you need to paste anywhere in the <BODY> section to get an image with email
<div align="CENTER" name="divTest" onMouseover="showtip2(this,event,'This is an image attached to an email link with a preset subject');"
onMouseout="hidetip2();" STYLE="cursor: hand">
<TABLE border="0" cellpadding="0" cellspacing="0"><TR><TD COLSPAN="7"><a
href="mailto:Your Email Address Here?subject=Your Subject Here"><IMG SRC="Your Path To Your Image Goes Here" WIDTH="201" HEIGHT="24" BORDER="0"><p>
</TABLE>
</p></div>
T he above is the section of code you need to paste anywhere in the <BODY> section to get an image with email and a preset subject.
On A Few final Notes
F or this script to work properly you paste the complete <BODY> section only once. To add more images with different effects just use the section of code from above reconfigure it to reflect your image(s), link(s) and or email address(s) and paste it where you want the image(s) to go.
B e sure when adding images that you do have the "Height"and "Width" attributes in every image.
1) Do not use a "Custom" comet cursor with this script.
2) If you notice within the code that there is an attribute for a "Hand" cursor. The "Custom" cursor at times is in conflict with the script and at times the script will be very slow in responding.
3) Also if you will notice all through this script it makes use of the single ' instead of the usual ".
3a) If you are going to use within your message(s) the single apostrophe ' you must write it this way or you will get an error message.
3b) The Consigliere\'s™ Web Design
4) Also you cannot use quotations " marks at all within the messages no matter if you use the same \" as with the single apostrophe. It Will Not Work!.
5) You will get an undetermined string constant error message.
W
e hope this tutorial will assist you in adding this script to your site. If you do have any problems, feel free to contact us. If you would like to add this effect to your pages, grab the below link and you are there.
[ Get Code Here ]
Search Our Site By Individual letter
[ A ]
[ B ]
[ C ]
[ D ]
[ E ]
[ F ]
[ G ]
[ H ]
[ I ]
[ J-K ]
[ L ] |
Little Tips Directory [ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] [ Page 7 ] |
[ Index Page 1 ]
[ Index Page 2 ]
[ Index Page 3 ]
[ Index Page 4 ]
[ Index Page 5 ] [ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ] [ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ] [ News Letter Archives ]
[ Navigation Page ]
[ Archives Of Published Material ] |
If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today
This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.
Copyright © Consigliere Ltd., All Rights Reserved. 2001-