在sharepoint 2010 Rss Feed WebPart中显示鼠标悬停时的图像 [英] Showing image on mouseover in sharepoint 2010 Rss Feed WebPart

问题描述

每当我在Rss Feed webpart标题上移动鼠标时，我都会显示隐藏图像，当我点击该图像时，特定项目会完全禁用。



这里我的问题是当我将鼠标移动到任何其他标题时，图像只显示在第一个链接上。



请找到我的代码。

 <？  xml     version   =  1.0 ？ > ;  
 <   xsl：stylesheet     version   =  1.0    xmlns：xsl   =  http ：//www.w3.org/1999/XSL/Transform >  
 < ;   xsl：output    方法  =  html   缩进  = 是  /  >  
 <   xsl：param     name   =  TITLE  /  >  
 <   xsl：template    < span class =code-attribute> match   =  rss >  
 <   script     language   =  javascript   延迟  =  true >  
 < ; [CDATA [   
 function showImg（x）{
 document.getElementById（'hideimg' ）.style.visibility ='visible'; 
} 
函数hideImg（x）{
 document.getElementById（'hideimg'）。style.visibility ='hidden'; 
} 
 function hideTitle（x）{
 document.getElementById（'divItem'）。style.display =none; 
} 
  ]]>   
 < ;   / script  >  
 <   div     id   =  titlediv   样式  =  background：#fff; padding：0; font-size ：10px; >  
 <   xsl：for-each    选择  = 频道/项目 >  
 <   div     id   =  divItem >  
 <   a     href   =  {link }    target   =  _ new    onmouseover   =  showImg（this）    onmouseout   = 隐藏Img（this） >  
 <   xsl：value-of     select   =  title    /  >  
 <   img     src     =  ../ photogallery / hide1.png   样式  =  visibility：hidden    height   =  15px    width   =  15px    id   =  hideimg    onclick   =  hideTitle（this）; return false; >  <   / img  >  
 <  < span class =code-leadattribute> / a  >  
 <   br /  >  
 <   xsl：value-of     disable-output-escaping   =  yes   选择  =  description   /  >  
 < ;   br /  >  
 <   / div  >  
 <   / xsl：for-each  >  
 < span class =code-keyword><   / div  > ;  
 <   / xsl：template  >  
 <   xsl：template    匹配  =  description >  
 <   xsl：value-of    选择  = 。  /  >  
 <   br /   >  
 <   / xsl：template  >  
 <   / xsl：stylesheet  >  

请让我在哪里犯错误，在此先感谢。



谢谢，

Nagendra。

解决方案

id 属性在整个文档中应该是唯一的。您正在创建具有相同ID的多个元素（ hideimg 和 divItem ）。当您将该ID传递给 getElementById 时，只会返回第一个匹配的元素。



修复图像是简单 - 您可以使用CSS执行此操作，无需脚本。



修复 hideTitle 功能需要导航从传入元素到祖父母< div> 元素的DOM。你可以使用jQuery，或这个StackOverflow答案 [ ^ ]。

 <   style  >  
<！[CDATA [
 
。 rss-feed  
 {
  background  ：  #fff;  
  padding  < span class =code-keyword>：  0;  
  font-size  ：  10px;  
} 
  a 。 rss-title  >   img  
 {
 可见性 ：  hidden;  
} 
  a 。 rss-title：hover  >   img  
 {
 可见性 ： 可见;  
} 
 
]]> 
 < /   style  >  
 
 <   script    延迟  =  defer >  
<！[CDATA [
 
  function 最近（elem，selector）{
 
  var  matchesSelector = elem.matches || elem.webkitMatchesSelector || elem.mozMatchesSelector || elem.msMatchesSelector; 
 
  while （elem）{
  if （matchesSelector.bind （elem）（选择器））{
  return  elem; 
} 
 
 elem = elem.parentElement; 
} 
 
 返回  false ; 
} 
 
  function  hideTitle（x）{
  var  item = nearest（x， 。rss-item）; 
  if （item）{item.style.display =  无; } 
} 
 
]]> 
 <   /   script  >  
 
 <   div     class   =  rss-feed >  
 <   xsl：for-each     select   = 频道/项目 >  
 <   div     class   =  rss-item >  
 <   a     href   =  {link}    target   =  _ new    class   =  rss-title  >  
 <   xsl：value-of    选择  = 标题    /  >  
 <   img     src     =  ../ photogallery / hide1.png    onclick   =  hideTitle（this）; return false;    /  >  
 <   / a  >  
 <   br     /  >  
 <   xsl：value-of     disable-output-escaping   =  yes   选择  =  description   /  >  
  <   br     /  >  
 <   / div  >  
 <   / xsl ：for-each  >  
 <   / div  >  

< blockquote>嗨理查德，

i我在img标签中调用hide函数

 <   xsl：stylesheet     version   =  1.0    xmlns：xsl   =  http：// www .w3.org / 1999 / XSL / Transform >  
 <   xsl：output    方法  =  html   缩进  = 是    /  >  
 < ;   xsl：param     name   =  TITLE    /  >  
 <   xsl：template     match   =  rss >  
 <  风格 >  
 <！[CDATA [   
 .rss-feed 
 {
背景：#fff; 
填充：0; 
字体大小：10px; 
} 
 a.rss-title> img 
 {
 visibility：hidden; 
} 
 a.rss-title：hover> img 
 {
能见度：可见; 
} 
  ]]>   
 < ;   / style  >  
 <   script     defer   = 延迟 >  
 <！[CDATA [   
 
 function hide（elements）{
 elements = elements.length？要素：[要素]; 
 for（var index = 0; index< elements.length; index ++）{
 elements [index] .style.display =none; 
} 
} 
 
  ]]>   
 <   / script  >  
 
 <   div    < span class =code-attribute> class   =  rss-feed >  
 <   xsl：for-each    选择  = 频道/项 >  
 <   div     id   =  itemlink    class   =  rss-item  >  
 <   a     href   =  {link}     target   = < span class =code-keyword> _ new    class   =  rss-title >  
 <   xsl：value-of    选择  =  title < span class =code-attribute>   /  >  
 <   img     src   =  ../ photogallery / hide1.png    height   =  10px    width   =  10px    onclick   =  hide（this）;返回false;    /  >  
 <   / a  > ;  
 <   br     /  >  
 < ;   xsl：value-of     disable- output-escaping   =  yes   选择  =  description    /  >  
 <   br     /  >  
 <   / div  >  
 <   / xsl：for-each  >  
 <   / div  >  
 <   / xsl：template  >  
 <   xsl：template    匹配  =  description >  
 <   xsl：value-of     select   = 。    /  >  
 <   br     /  >  
 <   / xsl：template  >  
 <   / xsl：stylesheet  >  

谢谢，

Nagendra。

Hi,

Whenever i move my mouse on Rss Feed webpart title i am showing hide image, when i click on that image that specific item disabling perfectly.

Here my problem is when i move mouse to any other titles also image showing only on first link .

Please find the my code.

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" indent="yes"/>
  <xsl:param name="TITLE"/>
  <xsl:template match="rss">
    <script language="javascript" defer="true">
      <![CDATA[
        function showImg(x) {
        document.getElementById('hideimg').style.visibility = 'visible';
        }
        function hideImg(x) {
        document.getElementById('hideimg').style.visibility = 'hidden';
        }
        function hideTitle(x) {
        document.getElementById('divItem').style.display = "none";
        }
    ]]>
    </script>
    <div id="titlediv" style="background:#fff; padding:0; font-size:10px;">
      <xsl:for-each select="channel/item">
        <div id="divItem">
        <a href="{link}" target="_new" onmouseover="showImg(this)" onmouseout="hideImg(this)">
          <xsl:value-of select="title" />
          <img src = "../photogallery/hide1.png" style="visibility:hidden" height="15px" width="15px" id="hideimg" onclick="hideTitle(this);return false;"></img>
        </a>
        <br/>
        <xsl:value-of disable-output-escaping="yes" select="description"/>
        <br/>
        </div>
      </xsl:for-each>
    </div>
  </xsl:template>
  <xsl:template match="description">
    <xsl:value-of select="."/>
    <br/>
  </xsl:template>
</xsl:stylesheet>

Please let me where i did the mistake, Thanks in advance.

Thanks,
Nagendra.

解决方案

The id attribute is supposed to be unique across the entire document. You are creating multiple elements with the same ID (hideimg and divItem). When you pass that ID to getElementById, only the first matching element will be returned.

Fixing the image is simple - you can do this with CSS, with no script required.

Fixing the hideTitle function will require navigating the DOM from the passed-in element to the grandparent <div> element. You could use jQuery for this, or the raw javascript solution from this StackOverflow answer[^].

<style>
<![CDATA[

.rss-feed
{
    background: #fff; 
    padding: 0; 
    font-size:10px;
}
a.rss-title > img
{
    visibility: hidden;
}
a.rss-title:hover > img
{
    visibility: visible;
}

]]>
</style>

<script defer="defer">
<![CDATA[

function closest(elem, selector) {

   var matchesSelector = elem.matches || elem.webkitMatchesSelector || elem.mozMatchesSelector || elem.msMatchesSelector;

    while (elem) {
        if (matchesSelector.bind(elem)(selector)) {
            return elem;
        }
        
        elem = elem.parentElement;
    }
    
    return false;
}

function hideTitle(x) {
    var item = closest(x, ".rss-item");
    if (item) { item.style.display = "none"; }
}

]]>
</script>

<div class="rss-feed">
    <xsl:for-each select="channel/item">
        <div class="rss-item">
            <a href="{link}" target="_new" class="rss-title">
                <xsl:value-of select="title" />
                <img src = "../photogallery/hide1.png" onclick="hideTitle(this);return false;" />
            </a>
            <br />
            <xsl:value-of disable-output-escaping="yes" select="description"/>
            <br />
        </div>
    </xsl:for-each>
</div>

Hi Richard,
i am calling hide function in img tag

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" indent="yes" />
  <xsl:param name="TITLE" />
  <xsl:template match="rss">
    <style>
      <![CDATA[ 
      .rss-feed
      {
          background: #fff; 
          padding: 0; 
          font-size:10px;
      }
      a.rss-title > img
      {
          visibility: hidden;
      }
      a.rss-title:hover > img
      {
          visibility: visible;
      } 
     ]]>
    </style>
    <script defer="defer">
      <![CDATA[

        function hide(elements) {
            elements = elements.length ? elements : [elements];
            for (var index = 0; index < elements.length; index++) {
              elements[index].style.display = "none";
  }
}
  
]]>
    </script>

    <div class="rss-feed">
      <xsl:for-each select="channel/item">
        <div id="itemlink" class="rss-item">
          <a href="{link}" target="_new" class="rss-title">
            <xsl:value-of select="title" />
            <img src="../photogallery/hide1.png" height="10px" width="10px" onclick="hide(this); return false;" />
          </a>
          <br />
          <xsl:value-of disable-output-escaping="yes" select="description" />
          <br />
        </div>
      </xsl:for-each>
    </div>
  </xsl:template>
  <xsl:template match="description">
    <xsl:value-of select="." />
    <br />
  </xsl:template>
</xsl:stylesheet>

Thanks,
Nagendra.

这篇关于在sharepoint 2010 Rss Feed WebPart中显示鼠标悬停时的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！