Changement d'image au survol d'un lien généré en php/smarty

Bonjour,

Je suis en train de créer un site de vente en ligne sur Prestashop. J'ai fini mon thème, l'intégration du design est vraiment très simple.

Mais là je bloque, je ne suis pas une pro du développement... On va dire que j'aime autant le webdesign que la programmation, les 2 m'intéressent énormément mais pour ce qui est prog je me débrouille mais avec du mal quand même...

C'est pourquoi j'ai besoin d'un petit coup de pouce, car là il s'agit de faire une belle salade mixte de html, css, smarty et javascript.

J'ai plusieurs catégories, contenant elles-mêmes des sous-catégories, contenant elles aussi des sous-sous catégories.
Plutôt qu'un long discours voici une copie d'écran de mon site (category.tpl)
[img=http://www.heberger-image.fr/data/vignettes/31943_capture_subcategories.jpg]

A gauche la photo de la moto correspond à l'image de la catégorie "Sportive", fille de "Ducati".

Sous "Sportive" se trouvent les modèles plus précis de motos (donc mes sous-sous catégories, ou catégories petites filles).

Je veux que quand je survole "748 848 ..." à gauche s'affiche l'image de ce modèle de moto (donc l'image de la catégorie petite fille).

Jusque là rien de compliqué, j'ai réussi à faire cela avec du Javascript. Le problème est que comme mes liens sont générés par une boucle foreach, quand je survole "749" il m'affiche la photo de la "748" et non pas celle de la "749", et cela avec n'importe quel autre modèle il n'y a que la première qui apparait et pas celle qui correspond.

Pourquoi il n'affiche pas la bonne image ? surtout que $child.id_category est égal à $child.id_image.

Quelqu'un peut me donner, ne serais-ce que des pistes ? J'ai déjà essayer pas mal de trucs mais là je ne sais vraiment plus comment m'en sortir.

Mon code Javascript :

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

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

Et la partie où se génèrent les liens avec les images des sous-sous-catégories :

{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'}
   					<br/>
   					<b>Id catégorie : {$child.id_category}</b><br/>
   					<b>Id img : {$child.id_image}</b>
   					</a>
   					
   					{if $child.id_image}
   					<img id="image" src="{$link->getCatImageLink($child.link_rewrite, $child.id_image)}" alt="" />
   					</div>
   					{/if}
   					
   					{if $smarty.foreach.children.last}{else}<br/>{/if}
				{/foreach}

Le css (j'ai aussi essayé en faisant appel uniquement au css mais ça ne fonctionne pas pour ce cas):

.model_moto img{
	border:1px solid red;
	float:left;
	width:305px;
	position:absolute;
	margin-top:-55px;
	background-color:white;
	display:none;
}

Quelqu'un a déjà fait ça ? a une idée ?

Je vous remercie d'avance.

Madeline