更新DIV与悬停XML内容 [英] Updating DIV with XML content on hover
问题描述
什么我想要做的概念相当简单。我有公司标志的通过XSLT从XML文档加载的网格,每个都有自己的独特联系的公司的介绍。
The concept of what I'm trying to do is fairly simple. I have a grid of company logos loaded through XSLT from an XML document, each with their own unique links to the company profiles.
我在页面上一个单独的分区,基本上是一个preVIEW框。我想要做的是这样的:
I have a separate div on the page, essentially a "preview" box. What I want to do is this:
我摇了一个标志,它加载了公司的名称和简短描述到preVIEW股利。此内容是通过XML加载。
I roll over a logo, and it loads the name of the company and a short description into the preview div. This content is loaded through XML.
我一直插科打诨与jQuery的load()函数,改变目标文件加载悬停—并且它几乎得到了我想要的,但它加载整个目标XML文档进的div
I have been messing around with the Jquery load() function, changing the target document to load on Hover—and it almost gets what I want, but it loads the whole target XML document into the div.
我怎么能分开这一目标XML数据转换成单独的div? (这是我的风格不同)
我想我会利用Ajax技术在某些方面。我要加载的<名称>
节点进入name_div,而<说明>
节点进入description_div ,并让它们在悬停更新。在此先感谢您的帮助!
How can I separate this target XML data into separate divs? (which I have styled differently)
I'd assume I would make use of Ajax in some way. I want to load the <name>
node into the name_div, and the <desc>
node into the description_div, and have them update on hover. Thanks in advance for the help!
下面是在code我正在与一些例子:
Here are some examples of the code I'm working with:
portfolio.xml文件(该文件是我的主要页面,显示网格和preVIEW格,例如使用了3家公司):
portfolio.xml file (this file is my main page, displaying the grid and preview div, example uses 3 companies):
<portfolio>
<company>
<name>ABC Company</name>
<sdesc>Consumer products</sdesc>
<logo-thumb>abcco.jpg</logo-thumb>
<link>abcco.xml</link>
</company>
<company>
<name>DEF Company</name>
<sdesc>Communications firm</sdesc>
<logo-thumb>defco.jpg</logo-thumb>
<link>defco.xml</link>
</company>
<company>
<name>GHI Corporation</name>
<sdesc>Electronic products</sdesc>
<logo-thumb>ghico.jpg</logo-thumb>
<link>ghico.xml</link>
</company>
</portfolio>
下面的XSLT显示了$页面上的C $ C:
The following XSLT displays that code on the page:
<xsl:for-each select="portfolio/company">
<xsl:sort select="name" />
<div class="invest-port-thumb">
<a>
<xsl:attribute name="href">
<xsl:value-of select="link" />
</xsl:attribute>
<img>
<xsl:attribute name="src">
<xsl:value-of select="logo-thumb" />
</xsl:attribute>
</img>
</a>
</div>
</xsl:for-each>
这是preVIEW格的HTML结构:
This is the HTML structure of the "preview div":
<div id="preview">
<div id="preview-name"> [Name to display here] </div>
<div id="preview-desc"> [Description to display here] </div>
</div>
这3家公司商标被加载到页面中,每个显示从加载链接的图像。预期的效果就是悬停,在preVIEW名分区,并在preVIEW降序排序分区中的内容显示的内容。
All 3 company logos are loaded into the page, each displaying a linked image loaded from . Desired effect is to on hover, display the contents of in the "preview-name" div, and the contents of in the "preview-desc" div.
让我试试更具体一点。下面是一些例子:
Let me try to be a bit more specific. Here are some examples:
portfolio.xml文件(该文件是我的主要页面,显示网格和preVIEW格,例如使用了3家公司):
portfolio.xml file (this file is my main page, displaying the grid and preview div, example uses 3 companies):
<portfolio>
<company>
<name>ABC Company</name>
<sdesc>Consumer products</sdesc>
<logo-thumb>abcco.jpg</logo-thumb>
<link>abcco.xml</link>
</company>
<company>
<name>DEF Company</name>
<sdesc>Communications firm</sdesc>
<logo-thumb>defco.jpg</logo-thumb>
<link>defco.xml</link>
</company>
<company>
<name>GHI Corporation</name>
<sdesc>Electronic products</sdesc>
<logo-thumb>ghico.jpg</logo-thumb>
<link>ghico.xml</link>
</company>
</portfolio>
下面的XSLT显示了$页面上的C $ C:
The following XSLT displays that code on the page:
<xsl:for-each select="portfolio/company">
<xsl:sort select="name" />
<div class="invest-port-thumb">
<a>
<xsl:attribute name="href">
<xsl:value-of select="link" />
</xsl:attribute>
<img>
<xsl:attribute name="src">
<xsl:value-of select="logo-thumb" />
</xsl:attribute>
</img>
</a>
</div>
</xsl:for-each>
这是preVIEW格的HTML结构:
This is the HTML structure of the "preview div":
<div id="preview">
<div id="preview-name"> [Name to display here] </div>
<div id="preview-desc"> [Description to display here] </div>
</div>
这3家公司商标被加载到页面中,每个显示从&LT加载链接的图像;标志拇指&GT;
。预期的效果就是悬停,显示的内容&LT;名称&gt;
中的preVIEW名分区,而内容&LT; SDESC&GT;
中的preVIEW降序排序DIV
All 3 company logos are loaded into the page, each displaying a linked image loaded from <logo-thumb>
. Desired effect is to on hover, display the contents of <name>
in the "preview-name" div, and the contents of <sdesc>
in the "preview-desc" div.
推荐答案
preserving页面的语义和样式表的结构,我尝试做这样的事情:
Preserving the semantics of your page and the structure of your stylesheet, I try to do something like this:
<xsl:for-each select="portfolio/company">
<xsl:sort select="name" />
<div class="invest-port-thumb">
<a href="{link}"><img src="{logo-thumb}" /></a>
<div class="preview">
<div class="preview-name"><xsl:value-of select="name" /></div>
<div class="preview-desc"><xsl:value-of select="sdesc" /></div>
</div>
</div>
</xsl:for-each>
然后,在CSS样式表,你可以使用:悬停
伪类和 +
组合子来显示或隐藏preVIEW。有ARA一些问题crossbrowser兼容性。您应该检查斯图尼科尔斯网站更好的语义和CSS的例子。
Then, in CSS stylesheet, you can use :hover
pseudoclass and +
combinator to show or hide preview. There ara some problems with crossbrowser compatibility. You should check Stu Nicholls site for better semantics and CSS examples.
这篇关于更新DIV与悬停XML内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!