We have designed some "logolinks" in case anyone wants an attractive(?) way to link to any of our webpages. The logolinks can be easily adapted for differing background, text and mouseover colors. The mouseover effects ( on, over and off ) are supplied with an easy to understand java script. Page positioning is done with a brief CSS "div tag" setup. The logolinks are available in 10 pt and 16 pt sizes. The links are in png fomat and vary from one to three kb in size.
We can supply you with logolinks to match your color requirements.
If you're interested please contact our website manager by E-mail.
If you want to experiment with the javascript you
can download this HTML page along with our
Here is the way they may be put to use.
All you really need are two images of the same size and a java script entry in the body section of your page for each mouseove link:
<HTML>
<BODY>
<script language="JavaScript">
<!-- Hide from old browsers
image_1aon = new Image; image_1aon.src = "1stImageOn.png"
image_1aoff = new Image; image_1aoff.src = "1stImageOff.png";
// FUNCTIONS
function
img_act(imgName) {
imgon = eval(imgName +
"on.src");
document [imgName].src = imgon;
}
function
img_inact(imgName)
{
imgoff = eval(imgName + "off.src");
document [imgName].src = imgoff;
}
// END HIDING FROM OLDER BROWSERS --></script>
<a href="http://www.bluesdejour.com/archie/archie_lee_hooker.html" onmouseover="img_act('image_1a')"
onmouseout="img_inact('image_1a')">
<img src="1stImageOff.png"
border="0" width="174" height="38" name="image_1a">
</a>
</BODY>
</HTML>
Of course you need some HTML language to place the images. We are using CSS.
A style entry for each link in the BODY section is all that is required:
<DIV STYLE="position:absolute;left:48;top:750;">
But we have included a css entry in the HEAD section which makes for a cleaner
show with certain browsers:
<HTML>
<HEAD>
<STYLE TYPE="text/css"><!--
a:link {text-decoration: none;}
a:active {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {color:33cc33; text-decoration: none;}
-->
</style>
</HEAD>
<BODY>
<DIV STYLE="left:48;top:750;width:175;height:38;">
<script language="JavaScript">
<!-- Hide from old browsers
image_2aon = new Image; image_2aon.src = "2ndImageOn.png"
image_2aoff = new Image; image_2aoff.src = "2ndImageOff.png";
// FUNCTIONS
function
img_act(imgName) {
imgon = eval(imgName +
"on.src");
document [imgName].src = imgon;
}
function
img_inact(imgName)
{
imgoff = eval(imgName + "off.src");
document [imgName].src = imgoff;
}
// END HIDING FROM OLDER BROWSERS --></script>
<a href="http://www.bluesdejour.com/boogieman_productions.html" onmouseover="img_act('image_2a')"
onmouseout="img_inact('image_2a')">
<img src="2ndImageOff.png"
border="0" width="175" height="38" name="image_2a">
</a>
</DIV>
</BODY>
</HTML>
A third Image can be added if desired. The third image, mouseOut is demonstrated
by our email link. Use you browser refresh button to restore the 1st image, mouseOff.
<HTML>
<BODY>
<script language="JavaScript">
<!-- Hide from old browsers
image_1aon = new Image; image_1aon.src = "2ndImageOn.png"
image_1aoff = new Image; image_1aoff.src = "3rdImageOut.png";
// FUNCTIONS
function
img_act(imgName) {
imgon = eval(imgName +
"on.src");
document [imgName].src = imgon;
}
function
img_inact(imgName)
{
imgoff = eval(imgName + "off.src");
document [imgName].src = imgoff;
}
// END HIDING FROM OLDER BROWSERS --></script>
<a href="http://www.bluesdejour.com/archie/archie_lee_hooker.html" onmouseover="img_act('image_1a')"
onmouseout="img_inact('image_1a')">
<img src="1stImageOff.png"
border="0" width="174" height="38" name="image_1a">
</a>
</BODY>
</HTML>
End Logo Links
