[RESOLU]CSS ou script pour pb spécifique rollover ?

Bonjour à tous,

J'aurais bien besoin de votre avis et surtout de vos lumières pour un pb de rollover dans un thème fait maison pour joomla et structuré comme suit :


2 blocs : 1 et 2

Dans le bloc 1 viendront s'afficher selon statut l'image 2 ou l'image 4

Dans le bloc 2, un bloc left et un bloc right :

- 1 bloc left pour affichage image 1 normal/survol (la même) ou image 1 inactive
- 1 bloc right pour affichage image 3 normal/survol (la même) ou image 3 inactive

Je souhaiterais arriver à ce résultat pour le rollover :

1- Affichage par défaut =

Image 1 + image 2 statut normal (donc visible)
Image 3 statut inactive (opacité 10%) et image 4 invisible
[B]+ affichage du menu left[/B]





2- Quand menu left affiché, survol bloc right =

Image 3 + image 4 statut normal (donc visible)
Image 1 statut inactive (opacité 10%) et image 2 invisible





3- Quand clic sur bloc right =

Image 3 + image 4 statut normal (donc visible)
Image 1 statut inactive (opacité 10%) et image 2 invisible
[B]+ affichage du menu right[/B]





4- Quand menu right affiché, survol bloc left =

Image 1 + image 2 statut normal (donc visible)
Image 3 statut inactive (opacité 10%) et image 4 invisible





5- Quand clic sur bloc left (retour affichage par défaut) =

Image 1 + image 2 statut normal (donc visible)
Image 3 statut inactive (opacité 10%) et image 4 invisible
+ affichage du menu left




Ca fait plusieurs jours que je tourne le CSS dans tous les sens, en mettant des id aux liens, en créant des classes, en partageant les images entre l'index du template et la CSS,... bref je rame car le fait qu'il y ait des images dans un bloc et dans un autre me pose souci.

Je me demandais donc si c'était faisable rien qu'en CSS ou s'il fallait plutôt passer par un script ou autre chose à laquelle je ne pense pas d'ailleurs !

Merci pour vos lumières et vos conseils
Modifié par valols (22 Nov 2010 - 17:48)

J'ai bien du mal à comprendre exactement ce que tu veux...

Mais si je comprends bien, tu veux que le rollover d'un liens modifie une autre section de la page?

Alors, si c'est bien cela, tu devras utiliser Javascript.


(Mais je ne suis vraiment pas certains d'avoir bien compris...)

Bonsoir Vaxilart et merci pour ton intervention.

Eh bien en fait, si tu pars de la première image, où sont affichés par défaut, l'image 1 et l'image 2, respectivement dans le left et dans le bloc 1, je voudrais au survol du bloc right, que :

- s'affiche l'image 3 du bloc right en opacity 100%
- s'affiche l'image 4 dans le bloc 1 (à la place de l'image 2)
- et que l'image 1 du bloc left passe en opacity 10%

Et inversement lors du survol du bloc left quand c'est le right qui est actif...

Je sais ça paraît un peu complexe mais le rendu est finalement simple.

Le souci c'est que les images ne dépendent pas des mm blocs donc effectivement je doute que ça soit possible rien qu'en CSS mais je voulais avoir vos avis, parce qu'après tout, je ne connais pas tout du CSS...loin de là

Et encore moins en javascript, alors si vous avez des pistes vers lesquelles je peux m'orienter... ça serait avec grand plaisir

Merci tout plein

Alors définitivement, il faut passer par du Javascript (ou avec Jquery; c'est plus simple selon moi).

Pour apprendre, je ne connais qu'un seul bon site sur le sujet (et c'est en anglais):

http://www.w3schools.com/


Niveau ressources française, il y a bien le DVD Elephorm Jquery/Ajax fait par Dew d'Alsacréations qui est vraiment une excellente source pour apprendre.

Merci Vaxilart,

Je vais regarder ça de plus près cet aprèm
Te tiens au courant
@ +

Eh bien voilà, c'est plutôt concluant tout ça
A deux exceptions près, ça fonctionne nickel.
Merci pour tes conseils Vaxilart.

Je vais aller voir du côté du forum JS pour exposer mes deux derniers soucis que je n'arrive pas à résoudre. Si tu veux m'y rejoindre

Encore merci bcp !
Modifié par valols (22 Nov 2010 - 18:18)