Affichage d'une image en fonction de la position du curseur sur le menu

**Sanyi** · 21/07/2008, 19h24

Bonjour à tous,

Voilà j'aimerais faire un chtit truc sympa sur mon site mais j'ai pas trouvé de source qui s'en rapprochait. Si vous connaisez une adresse ..

Voila: J'aimerais centrer sur ma page un tableau avec deux colonnes (jusque là tout va bien!lol)

La colonne de droite va contenir un menu (environ 5 liens) et dans la colonne de gauche, je voudrais faire apparaitre une image différente à chaque fois que le curseur passe sur un nouveau lien dans le menu.

Enfaite un espece d'onglet, mais jai rien trouvé qui pourrait à priori correspondre. (apres 3h de recherche

)

Alors je demande votre aide!

Merci,

**Sanyi** · 22/07/2008, 21h47

Uep effectivement mais j'aimerais le faire en css.

Le onmouseover ne me pose pas particulierement probleme, là ou je coince c'est que l'image de la cellule gauche doit changer quand le curseur passe sur la cellule de droite..

That's the question

**htr999** · 22/07/2008, 22h38

tu ne peux pas seulement faire avec css.
voici un exemple avec javascript ET css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
<head>
<style>
ul {
	padding: 0px;
	list-style-type: none;
}
</style>
<script>
	function over(obj, link) {
		obj.style.color = "#FF0000";
		var e = document.getElementById("illus");
		e.src = link;
	}
	function out(obj) {
		obj.style.color = "#0000FF";		
	}
</script>
</head>
<body>
	<div>
		<div style="float: left; height: 100%; padding: 10px;">
			<img src="http://bateaux.bois.free.fr/fond/nature-eau.jpg" width="100" height="100" id="illus"/>
		</div>
		<div>
			<ul id="menu">
				<li><a href="javascript:void(0)" onmouseover="over(this, 'http://www.skinbase.org/files/archive/shots/301/nature_wallpapers-001_copy.jpg');" onmouseout="out(this);">1er lien</a></li>
				<li><a href="javascript:void(0)" onmouseover="over(this, 'http://fr.ohmyglobe.com/fileadmin/vpl/photos_vpl/large/2006-11-01-10-43-43-nature.jpg');" onmouseout="out(this);">1er lien</a></li>
				<li><a href="javascript:void(0)" onmouseover="over(this, 'http://www.hugpassions.ch/clicnature/nature/nature_1.jpg');" onmouseout="out(this);">1er lien</a></li>
				<li><a href="javascript:void(0)" onmouseover="over(this, 'http://www.kriyayoga.com/wallpapers/widescreen_wallpapers/tropical_island_photos/tropical_island_nature_scenery-dsc02501.jpg');" onmouseout="out(this);">1er lien</a></li>
				<li><a href="javascript:void(0)" onmouseover="over(this, 'http://bateaux.bois.free.fr/fond/nature-eau.jpg');" onmouseout="out(this);">1er lien</a></li>
			</ul>
		</div>
	</div>
</body>
</html>

**Sanyi** · 22/07/2008, 23h34

Génial, exactement l'effet désiré ya plus qu'a travailler le graphique.

Merci beaucoup à toi HTR999

**Dude1205** · 29/07/2008, 09h17

Salut,
je n'ai rien teste mais je suis convaincu qu'il y a moyen de s'en sortir sans javascript.
tu mets l'image que tu veux faire apparaitre dans ta colonne de gauche à l'interieur des liens qui sont censés les faire apparaitre (ceux de la colonne de droite). Autrement dit, la balise image à l'intérieur de la balise <a> et le tout dans la colonne de droite.
L'idée est la meme que pour les menus déroulant en css. Les images sont au départ en display:none et au passage de la souris sur le lien, les images apparaissent. Celles ci sont en position:absolute et apparaissent dans la colonne de gauche

.
Ne pas oublier le position:relative sur tes liens.

Bon courage

**kaari kosaku** · 29/07/2008, 12h56

Toujours même ptit problème, marche que sous IE7 ou FF.
Donc même si c'est possible c'est moins accessible que en JS

**Dude1205** · 31/07/2008, 08h17

Qu'est-ce qui ne marche que sous ie7 et firefox ?
Dis moi si je me trompe mais le hover sur un <a> en tout cas marche partout.
Le seul reproche que je vois à faire à ce genre de méthodes est que ce n'est pas vraiment le but du css de gérer le comportement des éléments mais je ne vois pas pourquoi ca ne marcherait pas

. Les menus déroulants en css utilisent ce principe et fonctionnent quasiment partout (ie5.5 opera, safari...).

**rems033** · 31/07/2008, 08h31

de toute manière il existe un hack nommé hover.htc (faire appel a gogol)
Ce hack permet de gérer la propriété hover sur des navigateurs comme IE6

Affichage d'une image en fonction de la position du curseur sur le menu

Positionnement en CSS

Discussions similaires

Partager

Partager