|
I have tried to make this page as easy as possible.
However with several possible browsers available the only way I can provide
examples is to use the source currently on this page. For that reason it is
going to require you have some experence with Notepad, HTML, and Copy / Paste
commands. There are two possible scripting options offered. One is someone
easier and does not preload images. The second version preloads images and is
a bit more complex coding. This is not to say even the easier one is without
pitfalls. Any changes to the script show will more than likely generate Script
error messages. For this reason I STRONGLY suggest you back up your page
before you do any editing. This page and the JAVA scripting here is not
intended for webpage makers
who rely on things like Yahoo Pagebuilder for making their webpages.
It contains JAVA scripting that can be a problem to get to work correctly on
some severs and using some HTML editing software. That being said, I will say
someone with a moderate knowledge of HTML and Webpage authoring, plus the
ability to copy and paste, should be able to use the scripting here in most
cases. If you have other scripting loaded on your page already, the possiblity
of problems and conflicts increases greatly. So I assume no liabity for the
use of the scripts here. They work well for me, and are the same scripts used
elsewhere on this site. I have tried to make this page as straight forward as
possible to allow someone to use copy and paste on it as much as they can.
This is the Easy NON Preload version... ---> 
<a href="http://www.geocities.com/easy_2_confuse_gt" target="_blank" onmouseover="support.src='jo_button2a.jpg'" onouseout="support.src='jo_button2.jpg'"><img src="jo_button2.jpg" alt="Joanna's Lil Help Page" border="0" width="75" height="41" name="support" id="support" /></a> Copy and paste the above code directly. Do not insert any spaces. Source has been altered to display on screen so you can copy and paste directly from this page to notepad or your page. ( Also get copies of both button images below.) Close This Browser Window |
|
This is the example for the preloaded version. An Example of Roll Over image and link.... --- >
Note, this section you will need to use parts of actual source of this page. You should have some experence with HTML editing before you proceed to use this version. Preloading images requires a bit more complex coding. Basic instructions READ THEM ALL BEFORE YOU START! BACK UP YOUR PAGE BEFORE YOU BEGIN!!! This means make a copy of it under a name such as Index_back.htm or whatever. Please do not email me and say my code wrecked your webpage because you did not back up the page before you started. The reason why I strongly suggest this backup is I have no way of knowing what your page looks like at this point and what other possible HTML/JAVA scripting is being used. So adding this may place a conflict and/or error on the page. If you have backed up the page all you are out is a bit of time. If you have backed up and are content you can recover if this code does not work for you, here is how to add this. RIGHT CLICK your MOUSE on this page. It should in most cases open a NOTEPAD screen with the source for this in it. If you are not seeing NOTEPAD you should open a NOTEPAD window now and select the source and paste it into the NOTEPAD screen. Still no source for the page? on most browsers there is a VIEW and then Source command that will do the same thing. Then in both cases select SAVE AS and put the code where you know it will be possible to locate it again. Right click on the images below and save copies of each image using the name they currently have, in the same folder you put the source code for this page. Exit this webpage and proceed to your favorite Web page editor, provided it is a text type editor. ( see Arachnophila link on previous page if you need an editor ) If it is not proceed to your website host and open their advanced HTML editor which in most cases is much like a notepad screen. Then the text you saved should also still be open on your screen but if it isn't locate it and open it again. Copy and paste the part between " <script language="Javascript"> " and the </script> . Be sure to include the greater and less than symbols into the header section of your webpage. ( this is between the <head> and </head> tags ) Next you should see added in the BODY tag, onLoad="MM_preloadImages('jo_button2a.jpg')" Starting with onload and ending with the " it must be inserted into the existing body tag used on your page. Please refer to the body tag above to see an example. Be sure you include quotes, less than and any semi-color! IMPORTANT! ( if your page already has onload included in the BODY tag, for most I recommend aborting this installation as it will require far detailed instructions than I can give here at this point. If you are a bit more daring, generally you can lump more than one ONLOAD commands together by seperating them with a semi- colon. If you wish email me the body tag and/or the URL to your page and it is possible I can email an edited version back which may or may not work.) If that is not possible I recommand the use of the plain button on the previous page. After you have inserted the tag, then proceed to copy the "<a href= " part of the above example to your page where you wish the link to appear at, as long as it is between the opening and closing BODY Tags. Then upload the button ( both images below ) you have saved from my webpage to your website. The results should be a preloaded Rollover image with a link to my webpage. Here is why I like an editor. You should test your page before you save it at your site. Some site editors allow this, some do not. Once you test it if you get an error it is likely there is conflict in the body tag or with another mouseover image loaded. This is why I recommanded a backup, save the work as a test page and your existing page should remain in tact. If not, then resort to the backup page by remaining it to the page you you started with.
75 wide by 41 high - jo_button2.jpg
75 wide by 41 high - jo_button2a.jpg
Additional instructions.... Want the button larger or smaller? Change the pixel sizes in the height and width statements on the a href tag. Just try to maintain something close to the current height - width ratio or the image will be distorted.. Don't want the link to open a new browser window? Remove the target="_blank" part of the tag. These Roll over images are "weak Java" scripting. They are set up to preload the image on most browsers. They work well with Netscapes Java Engine, and Sun Microsystems JAVA engine. They also work but not as well with Microsoft's Virtual Machine JAVA engine. I have not tested the operation on other engines. Some performance of the Internet Explorer roll over depends on the version of Internet Explorer also. The 6.0b version handles the roll overs better than the 5.x versions which seems to loose track of preloaded images easily and as such often delays there display to the point it is no longer worthwhile to preload them. Persons visiting your webpage would need to have JAVA 1.2 enabled to be able to make use of the roll over. Text of the instructions ( without JAVA Sources ) For easier print out if required. ( This does not include the JAVA scripting just the text from above minus all HTML tags. On some browser it would not appear anyway even in TXT format. Use the instructions above to view the scripting sections of this page. ) Close This Browser Window |
12-20-01