如何使用xml/xsl/javascript在注释文本和图像之间创建web视图

我想在本例中创建类似的内容：

在这种情况下，注释显示为鼠标悬停在轮廓上的框，框显示注释在相对图像上的位置。我认为这也可以通过一些javascript技巧来实现，如上面的示例所示。可能会从xsl为每个标记p生成一个新的标记范围，其中属性引用onMouseOver与javascript函数连接

在我的xml结构中，我使用了传真元素来显示图像，还使用了带坐标和xml:id的区域元素来定义文本部分。这些分区元素表示曲面元素内部的区域（可能连接到某些文本）

您可以在此处看到我的xml/xsl结构：

大约我认为我必须生成如下内容：

<div id="contenitore-immagine">
        <img class="dimensioni" src="tavole/1.jpg">
           <div class="zone" id="line1">
           </div>
           <div class="zone" id="line2">
           </div>
           <div class="zone" id="line3">
           </div>
           <div class="zone" id="line4">
           </div>
        <div id="contenitore-testo-annotato">
           <ul class="ul-testo-annotato">
              <li class="li-testo-annotato">
                 <span onMouseOver="showLine('line1')" onMouseOut="hideLine('line1')">   
                    <p class="p-testo-annotato">My text...</p>
                 </span>
              </li>
           </ul>
<ul class="ul-testo-annotato">
              <li class="li-testo-annotato">
                 <span onMouseOver="showLine('line2')" onMouseOut="hideLine('line2')">   
                    <p class="p-testo-annotato">My text...</p>
                 </span>
              </li>
           </ul>
<ul class="ul-testo-annotato">
              <li class="li-testo-annotato">
                 <span onMouseOver="showLine('line3')" onMouseOut="hideLine('line3')">   
                    <p class="p-testo-annotato">My text...</p>
                 </span>
              </li>
           </ul>
<ul class="ul-testo-annotato">
              <li class="li-testo-annotato">
                 <span onMouseOver="showLine('line4')" onMouseOut="hideLine('line4')">   
                    <p class="p-testo-annotato">My text...</p>
                 </span>
              </li>
           </ul>
        </div>
<div id="contenitore-immagine">
        <img class="dimensioni" src="tavole/2.jpg">
           <div class="zone" id="line5">
           </div>
           <div class="zone" id="line6">
           </div>
           <div class="zone" id="line7">
           </div>
           <div class="zone" id="line8">
           </div>
<div id="contenitore-testo-annotato">
           <ul class="ul-testo-annotato">
              <li class="li-testo-annotato">
                 <span onMouseOver="showLine('line5')" onMouseOut="hideLine('line5')">   
                    <p class="p-testo-annotato">My text...</p>
                 </span>
              </li>
           </ul>
<ul class="ul-testo-annotato">
              <li class="li-testo-annotato">
                 <span onMouseOver="showLine('line6')" onMouseOut="hideLine('line6')">   
                    <p class="p-testo-annotato">My text...</p>
                 </span>
              </li>
           </ul>
<ul class="ul-testo-annotato">
              <li class="li-testo-annotato">
                 <span onMouseOver="showLine('line7')" onMouseOut="hideLine('line7')">   
                    <p class="p-testo-annotato">My text...</p>
                 </span>
              </li>
           </ul>
<ul class="ul-testo-annotato">
              <li class="li-testo-annotato">
                 <span onMouseOver="showLine('line8')" onMouseOut="hideLine('line8')">   
                    <p class="p-testo-annotato">My text...</p>
                 </span>
              </li>
           </ul>
        </div>

我的文本




我的文本




我的文本




我的文本




我的文本




我的文本




我的文本




我的文本

因为我必须从xml/xsl文件生成html。但是，当我知道必须生成哪种javascript/html结构时，这并不是一个真正的问题。顺便提一下：您应该将

contenitore immagine

更改为类，而不是

id

-

id

s必须是唯一的，所以您当前的输出HTML是无效的，但正如您从我的xml文件中看到的，每个表面元素都有不同的xml:id。也许我可以用一个类来代替anid属性。对我来说，通过xslt包含外部js文件不是问题。这很容易做到。问题是使用正确的javascript函数从我的xml结构生成正确的html，让web视图正常工作。@JLRishe您有什么解决方案吗？。。