0

私はサイトにSVG画像マップを持っています-私はSVGをインラインで持っています。次に、代替コンテンツを追加したいので、<object>メソッドを使用し、SVGを外部ファイルに入れて、<object>内に画像タグを配置できるようにすることにしました。問題は、SVGのonmouseover、onmouseoutパラメーターからJavaScript関数を呼び出していることです。これらのJS関数はJQueryを使用しています。関数は正常に呼び出されますが、$が定義されていません。JQueryが読み込まれています...

ここにテストページがあります： http ：//www.kollegetown.com/themes/kollegetown/test.htm

コンソールを開くと、ホットスポットをロールオーバーすると、$が定義されていないというエラーが表示されます。

どんなアイデアでもありがたいです。

4

2 に答える 2

0

もちろん、jQuery をロードする必要があります。次の行を SVG に追加します。

<script type="text/javascript" xlink:href="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"/>

それは仕事をするはずです。

于 2012-12-04T20:16:09.890 に答える
0

私の意見では、より洗練された解決策は、jQuery の代わりに CSS3 アニメーションを使用することです ( Tinkerbin を参照)。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="956px" height="745px" >
  <style type="text/css">
    a > image {
      opacity: 0;
      pointer-events:none;
      transition: opacity .25s ease-in-out;
      -moz-transition: opacity .25s ease-in-out;
      -webkit-transition: opacity .25s ease-in-out;
    }

    a > polygon {
      opacity:0;
    }

    a:hover > image {
      pointer-events:auto;
      display:inline;
      opacity: 1;
    }
  </style>

  <image x="0" y="0" width="956" height="745" xlink:href="http://www.kollegetown.com/themes/kollegetown/images/img1.jpg" />

  <!-- stadium/team -->
  <a xlink:href="/team" target="new">
  <image id="team" x="63" y="284" width="204" height="365" xlink:href="http://www.kollegetown.com/themes/kollegetown/images/homeRollover_team.jpg"/>
    <polygon points="189 383, 185 345, 155 316, 209 281, 211 244, 289 210, 291 241, 348 245, 397 290, 391 299, 344 276, 345 369, 365 385, 330 404, 313 438"/>                   
  </a>

  <!-- corporate -->            
  <a xlink:href="/corporate" target="new">
  <image id="corp" x="33" y="29" width="356" height="221" xlink:href="http://www.kollegetown.com/themes/kollegetown/images/homeRollover_corporate.jpg"/>
    <polygon points="18 126, 86 125, 186 180, 190 271, 99 327, 31 330, 18 321"/>                    
  </a>

  <!-- campus shops -->
  <a xlink:href="/campusbooster" target="new">
  <image id="shops" x="423" y="186" width="497" height="213" xlink:href="http://www.kollegetown.com/themes/kollegetown/images/homeRollover_shops.jpg"/>
    <polygon points="425 60, 427 209, 470 226, 469 246, 483 251, 506 235, 534 244, 595 214, 600 191, 612 188, 621 201, 633 196, 631 23, 624 17, 504 17"/>                   
  </a>

  <!-- art gallery / design -->
  <a xlink:href="/designs" target="new">
  <image id="design" x="496" y="407" width="331" height="321" xlink:href="http://www.kollegetown.com/themes/kollegetown/images/homeRollover_gallery.jpg"/>
    <polygon points="503 509, 438 547, 440 691, 481 710, 482 729, 647 729, 647 582"/>
  </a>

</svg>

Opera には不具合があり、ホバー時のマウス イベントに対して過大な画像を感知しません。ただし、ユーザーは建物をクリックしてリンクをたどることができます。IE9 をテストできませんでした (Win7 Notebook の問題)。

于 2012-12-05T14:13:39.077 に答える