rolloverbutton

D-au 26 posts 76 karma points

Nov 11, 2010 @ 05:26

Hi Guys,

Hopefully this is not a repost...

I actually had some problem in creating rolloverbuttons in umbraco. The way it suppose to work was if the button was clicked, it would lead to a different page (obviously) and then become inactive on that certain page.

I've been doing a little bit of searching for a while and found out that using "cogworks" package would get me the closest result on doing this. However, I'm planning to assign individual images to those buttons instead of decorated text link. So is there any other better approach to achieve this result? Thanks

Copy Link

Folkert 82 posts 212 karma points

Nov 11, 2010 @ 09:11

You can just use xslt for the best effect I think. If you're on the page itself, just render a span tag,otherwise the elements is rendered as anchor.

pseudo code:

choose
if currentpage.nodeName == @nodeName
<span>nodeName</span>
otherwise
<a href="#">nodeName</a>

Copy Link

D-au 26 posts 76 karma points

Nov 12, 2010 @ 03:11

Thanks for the reply Folkert

The pseudo code looks great, its just that I'm awfully new to this and having a hard time figuring out how to implement them into Xslt. Expecially on configuring the XPath

Just say if my umbraco Content is looking like this:

Content:

*Page1 (with id 1111)

*subpage1

*Page2 (with id 2222)

And my latest code is:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet 
  version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
 xmlns:msxml="urn:schemas-microsoft-com:xslt"
   xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" 
  exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">
 
<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:template match="/">
 
<xsl:if test="$currentPage/node/@id = '1111'">
 <div class="nav">
 
<!---render1st button--->
       <xsl:choose>
 
<!---if currentpage.nodeName == @nodeName-->
         <xsl:when test="$currentPage/@id = $currentPage/node/data [@id = '1111']">
<!------<span>nodeName</span> ---->
                   <span><img src="/images/page1btnroll_on.jpg" width="172" height="66" border="0" /></span>
            </xsl:when>
          <xsl:otherwise>
<!------<a href="#">nodeName</a>---->
                <a href="{umbraco.library:NiceUrl($currentPage/node/data [@id = '1111])}" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','/images/page1btn.jpg',1)">
                 <img src="/images/page1btnroll.jpg" name="Image2" width="172" height="66" border="0" id="Image1" />
              </a>
         </xsl:otherwise>
     </xsl:choose>
 
 
<!---render2nd button--->
     <xsl:choose>
<!---if currentpage.nodeName == @nodeName-->
         <xsl:when test="$currentPage/@id = $currentPage/node/data [@id = '2222']">
<!------<span>nodeName</span> ---->
                    <span><img src="/images/page2btnroll_on.jpg" width="172" height="66" border="0" /></span>
            </xsl:when>
          <xsl:otherwise>
<!------<a href="#">nodeName</a>---->
              <a href="{umbraco.library:NiceUrl($currentPage/node/data [@id = '2222'])}" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','/images/page2btn.jpg',1)">
                    <img src="/images/page2btnroll.jpg" name="Image2" width="172" height="66" border="0" id="Image2" />
              </a>
         </xsl:otherwise>
     </xsl:choose>
 
</div>
</xsl:if>
</xsl:template>
</xsl:stylesheet>

it renders blank, which indicating the path is incorrect. On the original code instead of @id the $currentPage/node/data is being defined by @alias.

Probably my other silly question besides regarding the path would be....

How to define the @alias of individual page? is it the same as the name of the page ("Page2") or it has to be defined somewhere else?

Copy Link

D-au 26 posts 76 karma points

Dec 03, 2010 @ 02:25

Hi, just thought that I should close this old post




<xsl:choose>
<xsl:when test="$currentPage/@id = '1111' ">
<div id="btnidwrap1">
<img src="images/buttonmain_01.jpg" name="Image118" width="96" height="51" border="0" id="Image118" />
</div>
</xsl:when>
<xsl:otherwise>
<div id="btnidwrap1">
        <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image118','','images/buttonmainroll_01.jpg',1)"><img src="images/buttonmain_01.jpg" name="Image118" width="96" height="51" border="0" id="Image118" /></a>        </div>
</xsl:otherwise>
</xsl:choose>
<xsl:choose>
<xsl:when test="$currentPage/@id = '2222' ">
<div id="btnidwrap1">
<img src="images/buttonmain_02.jpg" name="Image119" width="96" height="51" border="0" id="Image119" />
</div>
</xsl:when>
<xsl:otherwise>
<div id="btnidwrap1">
        <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image119','','images/buttonmainroll_02.jpg',1)"><img src="images/buttonmain_02.jpg" name="Image119" width="96" height="51" border="0" id="Image119" /></a>        </div>
</xsl:otherwise>
</xsl:choose>

Thanks

Copy Link

is working on a reply...

Flag this post as spam?

Rolloverbutton

Content: