This site has been archived and you can no longer log in or post new messages. For up-to-date community resources please visit

eZ Community » Forums » Setup & design » image rollovers

image rollovers

image rollovers

Friday 14 September 2012 10:35:06 am - 3 replies

I need to include image rollovers within the content area of my site.  Can someone tell me how I can do this please?  It needs to be a simple process that a non-technical editor can follow.


Wednesday 19 September 2012 4:20:55 am

If I was going to do something like this (and I wouldnt), I would:

1. build the code in something like dreamweaver first
2. Upload the images for the rollover into Ezpublish in some "blind" location.
3. Copy their paths: eg
4. Insert the absolute image path references into the code you are using in step 1.
5. In your content area in Ezpublish, use the "Insert Literal Text" tool in the GUI to put in a container which you can paste your code into, the same way that you would insert a youtube video.

Probably not something a non-technical editor could do, which is probably why the question hasn't been answered  : )

Thursday 20 September 2012 11:55:26 am

Hi Andy,

Can you be more specific around the kind of image roll-over?  Do you want an image to be swapped for another, or something else?

Does this need to be in the Rich text editor, or are other mechanisms ok?

Assuming you're just wanting 2 images to swap on hover state, this can be done with CSS only (example); and you could do this with:

  1. Classes (plus custom tags?) in the rich text editor
  2. Object Relations datatype (possibly easiest for you and the editor)

If you need to use background images, you can use this technique for creating dynamic CSS in eZ Publish.

Hope this helps,

Wednesday 10 October 2012 1:39:53 pm

If the editor can select the image for each instance of the word or phrase, I'd add a custom datatype, which could then be embedded in an XML block, or referenced as a related object (as suggested by Geoff).  The custom datatype would include the text, an image, and perhaps a caption for the image.  Its template would include a class that could trigger display on mouseover, using CSS or JavaScript.

If every instance of the word or phrase displays the same image, I'd consider a bit of Ajax that had a JSON list of words and images which could scan the text on the page, add spans with classes to indicate the content and an event handler for each class.  The images could be outside of eZ, but then the content editors would not have any control over them.  Linking the images to the text by filename should be possible, for example, hovering over "rocks" would display "rocks.jpg".


You must be logged in to post messages in this topic!

36 542 Users on board!

Forums menu

Proudly Developed with from