Jump to content

Changement d'image au survol d'un lien généré dynamiquement


Recommended Posts

Bonjour,

 

Alors je suis sous PS 1.4.8, et j'ai récemment ajouté l'affichage des sous-sous-catégories (voir sur ce topic).

 

Mon objectif :

Au survol de chaque lien de catégorie j'aimerais afficher l'image correspondante à cette catégorie.

 

Problème :

Rien de compliqué, avec du javascript c'est très simple, sauf que c'est simple si on a plusieurs liens et plusieurs images, mais dans mon cas mes liens sont générés de façon dynamique (obligé).

 

Du coup quand je survole mon lien, l'image s'affiche bien, quand je redescend elle disparait. Mais quand je vais sur le lien suivant il affiche la 1ère image et pas celle qu'il faudrait.

 

Bref il m'affiche toujours la même image comme si je n'avais qu'un seul lien et qu'une seule image.

 

Comment faire pour que l'image change ?

 

Si quelqu'un a une idée, j'ai essayé en mettant <img src="{$child.id_category}">, mais c'est dans l'appel à la fonction javascript onmouseover que je ne peux pas mettre la variable smarty. Et même je ne suis pas sure que ça règlerait mon problème.

 

Voici mon code dans le tpl :

   {foreach from=$subcategory.children item=child name=children}
    <div class="model_moto">

    <a onmouseover="javascript:afficher('image');" onmouseout="javascript:cacher('image');"
    href="{$link->getCategoryLink($child.id_category, $child.link_rewrite)|escape:'htmlall':'UTF-8'}"
    id="{$child.id_category}">
    {$child.name|escape:'htmlall':'UTF-8'}
    </a>

    {if $child.id_image}
    <img id="image" src="{$link->getCatImageLink($child.link_rewrite, $child.id_image)}" alt="" />
    {/if}

    {if $smarty.foreach.children.last}{else}<br/>{/if}
    </div>
   {/foreach}

 

 

Et mes 2 fonctions en javascript :

<script type="text/javascript">
function afficher(id)
{   
    document.getElementById(id).style.display="block";

}
function cacher(id)
{
    document.getElementById(id).style.display="none";
}
</script>

 

Est-ce que quelqu'un aurait une idée ? ou des pistes ? J'ai essayé plusieurs méthodes mais là je sèche...

Par contre je ne l'ai qu'en local...

 

Merci d'avance pour vos réponses.

 

Madeline

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...