Are you trying to change the image displayed on an 'img' element when hovering over that element?

Hi Pat,

As you probably know, XSLT will not receive any mousevents, so you need to think about what the final HTML should be - usually, something like this uses an image with a pre- or postfix (e.g. "imageName_over.png"), having the effect handled from JavaScript or even better - with CSS.

Then you need to think about how to specify the image in the backend (it seems like that's also something you'd want) - you could add it as another Upload field on the Image Media Type

If you need JavaScript to take the hover-image from the HTML you could put the URL in a data-attribute, e.g.:

<img src="{$mediaNode/umbracoFile}" data-hoverimg="{$mediaNode/hoverFile}" />

You can then grab the hoverImage using jQuery's data() method:

var hoverImage = $image.data('hoverimg'); // $image is a jQuery object pointing to the <img>

Personally, I'd use CSS for this - but it obviously depends on the situation.

/Chriztian 

Can the above be implemented in the same get media function or is it a case or having another one?

The code in my first post gets the image and then a macro pulls that through to a parent page.

Like Criztian said above, you'll need to think about how you specify the hover image in the back end. Does your image come from a specific Document Type, can you add another property to it to allow you to pick the hover image?

It's difficult to give more specific advice without knowing how this is macro is used in your parent page, the XSLT above seems to be supplying you with a complete 'img' element based on another variable passed in called 'iconServices'. Is icon services a content item? If so, then you could add the hover image property to the Document Type for this item, then your macro can build the 'img' element as above with the both the onmouseover and onmouseout attributes set.

I have a parent page (Services), then several child pages (service 1, 2, 3 etc). The XSLT picks the title, content and image from the child pages and then the macro is pulled through on my parent services page, this generates a list of services on the parent page. They all have the same image as I have given them the same one, but I will be turning them into links at some point but when I do this I want the image to be replaced by a different image (well, on rollover).

Which version of Umbraco are you using?

v4.7.1.1 is what I am using.

Any way of using this within XSLT code itself? Using imagegen too if that helps?

Code I have so far is below:

<xsl:variable name="mediaId" select="iconServices" />
<xsl:if test="$mediaId > 0">
<xsl:variable name="mediaNode" select="umbraco.library:GetMedia($mediaId, 0)" />
<xsl:if test="$mediaNode/umbracoFile">
<img src="/imageGen.ashx?image={$mediaNode/umbracoFile}&width={$mediaNode/umbracoWidth}&height={$mediaNode/umbracoHeight}" height="{$mediaNode/umbracoHeight}" width="{$mediaNode/umbracoWidth}" />
</xsl:if>
</xsl:if>

The issue with the code above is that it looks like you are still dealing with only one media item. You are getting a single media id from iconServices and the requesting that item from the Media library, so you will only ever have a single media item to display (so you won't be able to specify a hover image in the 'img' element).

This is the simplest way to achieve what you are looking to do (this is what I did earlier):

1. Have 2 media picker properties on your Document Type for your 'Service' child pages, 1 for your image one for your Hover image - this will allow you to specify the normal and hover images to use

2. Have something like this in your XSLT:

<xsl:for-each select="$currentPage/* [@isDoc and string(umbracoNaviHide) != '1']">  
  <xsl:if test="./image &gt; 0 and ./imageHover &gt; 0">
    <xsl:variable name="imageNode" select="umbraco.library:GetMedia(./image, 0)" />
    <xsl:variable name="hoverImageNode" select="umbraco.library:GetMedia(./imageHover, 0)" />
    
    <img src="{$imageNode/umbracoFile}"
        onmouseover="javascript:this.src='{$hoverImageNode/umbracoFile}';"
        onmouseout="javascript:this.src='{$imageNode/umbracoFile}';" />
    <br />
  </xsl:if>
</xsl:for-each>

(Note theat my properties on the document type are 'image' and 'imageHover', you'll need to replace with your own)

3. Add the macro that uses this XSLT to your template for your parent page

You may need to tweak the error checking for this as at the moment it ensures that both image and hover image fields are populated (to avoid errors), but you get the idea.

is working on a reply...