Alternate conent for flash navigation

programming web dev
1

So i have executed what appears to be a carnal sin of contemporary web design. i have created an HTML site with a flash-based navigation.

www.jeffreyrotin.com/index.html

This is proving to be a problem in the beta testing.

So i am wondering if there is a compromise solution that would work like this:

If the flash is installed and legible, display it. If not (instead of the grey box with “click here to get plugin”) an image of the navigation with hotspots to act as the navigation.

I know how to do a Flash detection for the whole site, but that is a technique for the WHOLE site, not a small section of it.

Any thoughts?

Th

2

I have tried dropping in your code to the relevant section of the site, but i am running into a couple problems still.

First of all it does not give me the flash content. And when it does give me the alternate static image content, it has a horrible blue border around it. In case you are wondering the code looks like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Jeffrey Rotin</title>
<META NAME="Title" CONTENT="Jeffrey Rotin - ">
<!-- TemplateEndEditable -->
<META NAME="Description" CONTENT="Jeffrey Rotin - Facilitator, Consultant, Writer">
<META NAME="Keywords" CONTENT="Jeffrey Rotin, Jeff Rotin, Vancouver BC, British Columbia, freelance writer,communications consultant, strategic communications, strategic planning, board governance, not-for-profit, non-profit">
<meta name="lastmod" content="2006-05-15">
<meta name="resource-type" content="document">
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

<link href="../rotin.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div align="center">
  <table width="598" border="0" cellpadding="0" cellspacing="0" background="../ground.jpg">
    <!--DWLayoutTable-->
    <tr>
      <td colspan="3" rowspan="2" align="right" valign="bottom"><!-- TemplateBeginEditable name="section picture" --><img src="" alt="" name="sectionimage" width="183" height="206" id="sectionimage" style="background-color: #990066" /><!-- TemplateEndEditable --></td>
      <td width="4" rowspan="9" valign="top"><img src="../slices/sketch 11a_r1_c5.png" width="2" height="659" /></td>
      <td width="20" height="12"></td>
      <td width="84"></td>
      <td colspan="2" valign="top" class="style11"><div align="right"><a href="http://www.blee-ree-eyed.com" target="_blank">site design - blee-ree-eyed studios </a></div></td>
    </tr>
    <tr>
      <td height="207"></td>
      <td></td>
      <td width="216">&nbsp;</td>
      <td width="26"></td>
    </tr>
    <tr>
      <td height="54" colspan="3" align="right" valign="top"><img src="../slices/jeffery header.png" alt="Jefferey Rotin; Consulting/Communication" width="247" height="54" /></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td width="53" height="8"></td>
      <td width="187" rowspan="2" align="center" valign="middle"><div align="right"><span class="style6"><a href="mailto:jeff@jeffreyrotin.com">jeff@jeffreyrotin.com </a></span></div></td>
      <td width="8"></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td height="9"></td>
      <td></td>
      <td></td>
      <td colspan="2" rowspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
        <!--DWLayoutTable-->
        <tr>
          <td width="302" height="29" valign="top"><h1 align="left" class="style4"><!-- TemplateBeginEditable name="top heading" -->Top Heading <!-- TemplateEndEditable --></h1></td>
          </tr>
        
      </table></td>
      <td></td>
    </tr>
    <tr>
      <td colspan="3" rowspan="2" align="right" valign="top">
<div id="flash">
<object type="application/x-shockwave-flash" data="nav bar.swf" width="230" height="250"> 
    <param name="movie" value="../nav bar.swf" />   
    <div id="navigation"> 
    <img src="../images/navstatic.png" width="230" height="290" usemap="#Map"/>    </div> 
</object>
</div>
</td>
	  </td>
      <td height="33"></td>
      <td></td>
    </tr>
    <tr>
      <td height="217">&nbsp;</td>
      <td colspan="2" rowspan="2" valign="top"><!-- TemplateBeginEditable name="body" -->
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <!--DWLayoutTable-->
          <tr>
            <td width="302" height="469">&nbsp;</td>
          </tr>
        </table>
      <!-- TemplateEndEditable --></td>
      <td></td>
    </tr>
    <tr>
      <td height="265">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td></td>
    </tr>
    <tr>
      <td height="222">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>
<map name="NavMap" id="Map">
<area shape="rect" coords="53,22,211,40" href="../strategic communications.html" />
<area shape="rect" coords="141,40,211,57" href="../facilitation.html" />
<area shape="rect" coords="141,57,212,73" href="../consulting.html" />
<area shape="rect" coords="161,71,212,86" href="../writing.html" />
<area shape="rect" coords="145,104,209,122" href="../branding.html" />
<area shape="rect" coords="170,121,209,137" href="../radio.html" />
<area shape="rect" coords="175,136,208,152" href="../print.html" />
<area shape="rect" coords="151,151,207,166" href="../publicity.html" />
<area shape="rect" coords="169,166,223,187" href="../profile.html" />
<area shape="rect" coords="32,203,207,220" href="../not-for-profit.html" />
<area shape="rect" coords="141,220,206,235" href="../corporate.html" />
<area shape="rect" coords="127,238,227,257" href="../testimonials.html" />
<area shape="rect" coords="144,256,228,276" href="../resources.html" />
<area shape="rect" coords="163,275,226,295" href="../contact.html" />
</map>
</html>
3

I have tried dropping in your code to the relevant section of the site, but i am running into a couple problems still.

First of all it does not give me the flash content. And when it does give me the alternate static image content, it has a horrible blue border around it. In case you are wondering the code looks like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Jeffrey Rotin</title>
<META NAME="Title" CONTENT="Jeffrey Rotin - ">
<!-- TemplateEndEditable -->
<META NAME="Description" CONTENT="Jeffrey Rotin - Facilitator, Consultant, Writer">
<META NAME="Keywords" CONTENT="Jeffrey Rotin, Jeff Rotin, Vancouver BC, British Columbia, freelance writer,communications consultant, strategic communications, strategic planning, board governance, not-for-profit, non-profit">
<meta name="lastmod" content="2006-05-15">
<meta name="resource-type" content="document">
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

<link href="../rotin.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div align="center">
  <table width="598" border="0" cellpadding="0" cellspacing="0" background="../ground.jpg">
    <!--DWLayoutTable-->
    <tr>
      <td colspan="3" rowspan="2" align="right" valign="bottom"><!-- TemplateBeginEditable name="section picture" --><img src="" alt="" name="sectionimage" width="183" height="206" id="sectionimage" style="background-color: #990066" /><!-- TemplateEndEditable --></td>
      <td width="4" rowspan="9" valign="top"><img src="../slices/sketch 11a_r1_c5.png" width="2" height="659" /></td>
      <td width="20" height="12"></td>
      <td width="84"></td>
      <td colspan="2" valign="top" class="style11"><div align="right"><a href="http://www.blee-ree-eyed.com" target="_blank">site design - blee-ree-eyed studios </a></div></td>
    </tr>
    <tr>
      <td height="207"></td>
      <td></td>
      <td width="216">&nbsp;</td>
      <td width="26"></td>
    </tr>
    <tr>
      <td height="54" colspan="3" align="right" valign="top"><img src="../slices/jeffery header.png" alt="Jefferey Rotin; Consulting/Communication" width="247" height="54" /></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td width="53" height="8"></td>
      <td width="187" rowspan="2" align="center" valign="middle"><div align="right"><span class="style6"><a href="mailto:jeff@jeffreyrotin.com">jeff@jeffreyrotin.com </a></span></div></td>
      <td width="8"></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td height="9"></td>
      <td></td>
      <td></td>
      <td colspan="2" rowspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
        <!--DWLayoutTable-->
        <tr>
          <td width="302" height="29" valign="top"><h1 align="left" class="style4"><!-- TemplateBeginEditable name="top heading" -->Top Heading <!-- TemplateEndEditable --></h1></td>
          </tr>
        
      </table></td>
      <td></td>
    </tr>
    <tr>
      <td colspan="3" rowspan="2" align="right" valign="top">
<div id="flash">
<object type="application/x-shockwave-flash" data="nav bar.swf" width="230" height="250"> 
    <param name="movie" value="../nav bar.swf" />   
    <div id="navigation"> 
    <img src="../images/navstatic.png" width="230" height="290" usemap="#Map"/>    </div> 
</object>
</div>
</td>
	  </td>
      <td height="33"></td>
      <td></td>
    </tr>
    <tr>
      <td height="217">&nbsp;</td>
      <td colspan="2" rowspan="2" valign="top"><!-- TemplateBeginEditable name="body" -->
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <!--DWLayoutTable-->
          <tr>
            <td width="302" height="469">&nbsp;</td>
          </tr>
        </table>
      <!-- TemplateEndEditable --></td>
      <td></td>
    </tr>
    <tr>
      <td height="265">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td></td>
    </tr>
    <tr>
      <td height="222">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>
<map name="NavMap" id="Map">
<area shape="rect" coords="53,22,211,40" href="../strategic communications.html" />
<area shape="rect" coords="141,40,211,57" href="../facilitation.html" />
<area shape="rect" coords="141,57,212,73" href="../consulting.html" />
<area shape="rect" coords="161,71,212,86" href="../writing.html" />
<area shape="rect" coords="145,104,209,122" href="../branding.html" />
<area shape="rect" coords="170,121,209,137" href="../radio.html" />
<area shape="rect" coords="175,136,208,152" href="../print.html" />
<area shape="rect" coords="151,151,207,166" href="../publicity.html" />
<area shape="rect" coords="169,166,223,187" href="../profile.html" />
<area shape="rect" coords="32,203,207,220" href="../not-for-profit.html" />
<area shape="rect" coords="141,220,206,235" href="../corporate.html" />
<area shape="rect" coords="127,238,227,257" href="../testimonials.html" />
<area shape="rect" coords="144,256,228,276" href="../resources.html" />
<area shape="rect" coords="163,275,226,295" href="../contact.html" />
</map>
</html>