Code Play
Posted Monday, 04/15/24
I recently decided to expand my culinary articles (now sold in e-book format) as free offerings online. The latest addition is The Pirates Table. I originally wrote the piece in 2013, and recall how enjoyable it was to research.
It was also fun to design and assemble the web pages for the online free version, which took me about four days. I'd forgotten how to implement code that changes an image from one color to another, which is termed the "hover effect." First, I created the two images in question and then used the following in the code of the web page:
<center><a href="home.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/ptablewhite1.jpg',1)"> <img src="images/ptablered1.jpg" alt="Food Fare Culinary Collection: The Pirates Table. Click image to enter website." name="Image2" width="848" height="98" border="0"></a></p></center>
The above code signifies the images used and applies the swap on hover, while the following is placed in the <head> of the web page:
<script language="JavaScript" type="text/JavaScript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script>
It looks like Greek to the untrained eye, but it works. :)
More about The Pirates Table:
The Pirates Table is Book #36 in the Food Fare Culinary Collection.
The Pirates Table contains a brief history of pirates and piracy, pirates in popular legend, facts about pirate ships, weapons, codes of conduct, sea-faring recipes, pirate terminology, pirates in the movies, and links for further study.
The Pirates Table is available at Amazon, Barnes & Noble and Kobo Books. It is also offered as a PDF download and is freely available online.
Tags:
Web Design;
Writing & Editing