Cool Banners Revisited
I've had the cool auto-built banners up on our family blog for four months now. I noticed that I kept clicking on the pictures when I wanted to see the collection associated with it, to no avail. So last night I set out to make it work.
I vaguely remembered something about image maps in HTML, and after some Googling, found it the right syntax. The trick was to build the image map dynamically when the banner loaded, and to build a map for each banner. More googling on what functions I needed, and I was off to the races.
The following javascript functions.js.txt (1 KB) goes with the RandomLogo() (from the first banner blog) function inside the <HEAD> tag. Random logo gets replaced as well, as I needed a global variable for which banner had been selected - I wanted to add the map at the end of the page loading so that there wouldn't be a pause while the banner map script loaded, and so I needed to have the banner # selected be a global variable. Next step is to add the below snippet to the bottom of each page with a logo (this adds the appropriate map to the banner): <SCRIPT language="JavaScript"> Also, replace the banner image at the top of the pages with the following (which adds an image map with no areas to the banner): <MAP name="logomap"></MAP> I updated newbanner.php to generate a script file mapX.js for each newlogoX.jpg that was generated. These scripts map all the image areas and link back to the original set associated with the image. A sample auto-generated script: map = getMap(document.images.item("logoimage")); Note that the final line adds a map for the bottom 20 pixels all the way across that links back to the blog home page. To be honest, I don't know what would happen if there wasn't some extra bottom pixels the way I do my banners - I haven't tested it. Here is the newbanner.php code. The other files etc are found in the previous blog. newbanner.php.txt (8 KB)
<!--
AddMap();
//-->
</SCRIPT>
<span style="margin-left:4px" id="bannerimage" >
<img border=0 style="margin-top:4px" name="logoimage" usemap="#logomap">
<SCRIPT language="JavaScript">
<!--
RandomLogo();
//-->
</SCRIPT>
addArea( map, "0,0,136,110","http://www.theeislers.com/Collections/2005-05-14_Here_Chicken_Chicken_Chicken", "Here Chicken Chicken Chicken" );
addArea( map, "136,0,294,110","http://www.theeislers.com/Collections/2005-09-09_Outside_At_Em_at_6am", "Outside & At 'Em at 6am!" );
addArea( map, "294,0,430,110","http://www.theeislers.com/Collections/2005-09-10_Rock_Piling", "Rock Piling" );
addArea( map, "430,0,588,110","http://www.theeislers.com/Collections/2005-04-06_Angus_and_Earl", "Angus and Earl" );
addArea( map, "588,0,746,110","http://www.theeislers.com/Collections/2005-02-17_Fun_with_Towels_and_Masks", "Fun with Towels and Masks" );
addArea( map, "746,0,904,110","http://www.theeislers.com/Collections/2004_12_07_Two_Brothers_Having_Fun", "Two Brothers Having Fun" );
addArea( map, "0,110,969,129","http://theboys.theeislers.com","Home" );
Comments