大嫂 >>
<< wHizz Notes的目标
yworks.com的圆形按钮的实现

Author Zhou Renjian Create@ 2005-01-02 20:35
whizz Note icon

效果参考:http://www.yworks.com/en/sitemap.htm

function yWorks_SwapImage(img_name_, img_index_)
{
  if(document.images)
  {
    document.images[img_name_].src = document.yWorksDocumentImages[img_index_].src;
  }
}
function yWorks_GenerateMainNavigator(win_)
{
  var geckoGap = 49;

  if (win_.location.search != "?Print")
  {
      win_.document.writeln(
        '<a href="' + yWorksDocumentRoot + 'index.htm" target="_top"><img src="' + yWorksDocumentRoot + 'images/_.gif" width="280" height="49" border="0" alt="yWorks homepage"></a><br><img src="' + yWorksDocumentRoot + 'images/nav_transparent.gif" width="295" height="269" usemap="#MapNavigator" border="0" name="ImageNavigator">' +

        '<map name="MapNavigator">' +
          '<area shape="circle" coords="176,218,27" href="' + yWorksLocalizedRoot + 'company.htm" alt="' + yWorksCompany + '" title="' + yWorksCompany + '" onMouseOut="yWorks_SwapImage(\'ImageNavigator\',0)" onMouseOver="yWorks_SwapImage(\'ImageNavigator\',1)" target="_top">' +
          '<area shape="circle" coords="119,228,27" href="' + yWorksLocalizedRoot + 'services.htm" alt="' + yWorksServices + '" title="' + yWorksServices + '" onMouseOut="yWorks_SwapImage(\'ImageNavigator\',0)" onMouseOver="yWorks_SwapImage(\'ImageNavigator\',2)" target="_top">' +
          '<area shape="circle" coords="66,205,27" href="' + yWorksLocalizedRoot + 'products.htm" alt="' + yWorksProducts + '" title="' + yWorksProducts + '" onMouseOut="yWorks_SwapImage(\'ImageNavigator\',0)" onMouseOver="yWorks_SwapImage(\'ImageNavigator\',3)" target="_top">' +
          '<area shape="circle" coords="38,155,27" href="' + yWorksLocalizedRoot + 'news.htm" alt="' + yWorksNews + '" title="' + yWorksNews + '" onMouseOut="yWorks_SwapImage(\'ImageNavigator\',0)" onMouseOver="yWorks_SwapImage(\'ImageNavigator\',4)" target="_top">' +
          '<area shape="circle" coords="44,98,27" href="' + yWorksLocalizedRoot + 'sitemap.htm" alt="' + yWorksSitemap + '" title="' + yWorksSitemap + '" onMouseOut="yWorks_SwapImage(\'ImageNavigator\',0)" onMouseOver="yWorks_SwapImage(\'ImageNavigator\',5)" target="_top">' +
          '<area shape="circle" coords="84,56,27" href="' + yWorksLocalizedRoot + 'contact.htm" alt="' + yWorksContact + '" title="' + yWorksContact + '" onMouseOut="yWorks_SwapImage(\'ImageNavigator\',0)" onMouseOver="yWorks_SwapImage(\'ImageNavigator\',6)" target="_top">' +
        '</map>');
  }
win_.document.writeln('<img src="' + yWorksDocumentRoot + 'images/_.gif" width="10" height="1" alt="" border="0">');
}

关键在于<map>...<area shape="circle" coords="38,155,27" href="..."/>..</map>

本记录所在类别:
本记录相关记录: