Thread

Hello

I’m hoping someone might be able to tell me the best way of approaching how to dynamically assign a background image to a span or div element.

Basically I want to create an image menu dynamically and then use simple CSS commands to create a ‘hover’ event (image shift).

I have pasted in my code below, if anyone has some suggestions it would be great - ideally I would like to achieve it without having to use third party add ons etc.

I have set the span element to display block in the pages external stylesheet.

…………...

<div class="folio-menu">
{exp:channel:entries channel="design_folio" orderby="random" sort="desc" limit="10" disable="member_data|categories" paginate="bottom" dynamic="no"}
<ul id="folio-menu-ul">
<li><a href="http://{url_title_path=folio/folio_single/}class=folio-menu-item"><span class="menu-item2"><span class="menu-item-name">{client_name}</span></span></a></li>
</ul>
 {/exp:channel:entries}
</div>

……………

This is how I achieved it by using a standard image element, but I can’t create the hover events etc.

<li><a href="http://{url_title_path=folio/folio_single/}class=folio-menu-item"><span>{folio_thumbnail}<span class="menu-item-name">{client_name}</span></span></a></li>

Thanks all help gratefully accepted 😊

Sorry… struggling to get my code to post into the forum.

Is no one able to help me with this?

What kind of hover effect are you trying to create? Trying to wrap my head around this…

Hi e-man.

Thanks so much for having a look.

Basically all I want to do is create an image shift:

1. The menu is populated by images that are a thumbnail of the galleries that follow when clicked. These images need to be automatically populated by expression engine.

2. I want the user to be able to rollover an image and have it change – I was planning to use a background image assigned to a block element and have its co-ordinates shift to show the alternate image using a CSS rule.

The challenge I have is that it appears that the only way to get Expression Engine to reliably interpret the CSS is to create it using an inline style. From what I have read in the release notes the other ways of getting expression engine to read and interpret the CSS are unreliable. I have had success in testing this with a background colour, however not with the images that I want to populate the menu with.

I’m not sure if its a path/addressing issue or if I have done something wrong in the code shown above.

Thanks

Elliot

Maybe have a look at this tutorial http://jqueryfordesigners.com/image-cross-fade-transition/
that way you can use both images in the markup (that’s easy enough to generate with EE) and fade between them.

Cool, I’ll have a read and see how I get on with this over the next few days- thanks for the hot tip!

Cheers

Elliot