JQuery et select html

[lasconi06]

Bonjour à tous,

J'aurais besoin d'un petit coup de pouce. Je viens juste de m'inscrire et c'est mon premier post, même si je consulte assez régulièrement ce site.

Je voudrais qu'au survol des options d'un select, une image placée à côté puisse changer automatiquement. L'idée est d'afficher des coloris (sous forme d'image) au survol des options, sans que l'internaute ait besoin de cliquer sur l'option pour que l'image change.

J'ai fait le bout de code ci-dessous, mais curieusement il ne fonctionne que sous FF. Ni IE, ni GoogleChrome, ni Opera, etc... ne marche.

Si quelqu'un à une idée pour corriger ce script ou tout simplement pour m'indiquer une autre façon de faire, je suis preneur. Merci à tous.

HTML:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<ul id="imgcouleur">
	<?php foreach ($couleurs as $couleur): ?>
	<li id="couleur<?php echo $couleur->couleurs_id; ?>"><img src="<?php echo _PATH_; ?>/uploaded/couleurs/<?php echo $couleur->couleurs_image; ?>" alt="" /></li>
	<?php endforeach; ?>
</ul>
 
<p>
	<label for="couleurs_id"><?php echo __('Coloris'); ?> :</label>
	<select id="couleurs_id" name="option_couleur">
		<?php foreach ($couleurs as $key => $couleur): ?>
		<option class="couleurs_vals" value="<?php echo $couleur->couleurs_id; ?>"<?php echo $key==0 ? ' selected="selected"' : ''; ?>><?php echo $couleur->couleurs_libelle; ?></option>
		<?php endforeach; ?>
	</select>
</p>

JQUERY :

Code :

1
2
3
4
5
6
7
8
9
10
 
$(document).ready(function(){
	// Modification de la couleur
	$("ul#imgcouleur > li").hide();
	$("li#couleur"+$("#couleurs_id").val()).show();
	$(".couleurs_vals").mouseover(function() {
		$("ul#imgcouleur > li").hide();
		$("li#couleur"+$(this).val()).show();
	});
});