[résolu] Roll over distant CSS

Hummm...
J'ai bien parcouru les différents posts et topics des forums avant de poster et n'ai pas été capable de trouver réponse à ma question. Mais étant novice, peut être ma formulation n'était elle pas bonne...
Si vous lisez ce post et que vous vous dites "Encore un coui..on pas foutu de voir une botte de foin qui cache une aiguille", prenez juste quelques secondes pour me réorienter !

Sinon, voici mon souci... Avec mon pauvre vocabulaire de profane.
Je souhaiterais créer un roll over distant sur une image via CSS. Je m'explique : créer n roll over sur une image en CSS, pas de souci. Mais faire apparaitre une image à l'autre bout de l'écran au survol d'une miniature... Est-ce possible ? J'ai trouvé le moyen de le faire via javascript, mais étant donné que des utilisateurs bloquent les codes js, ça n'est peut-être pas une super idée pour un book de présentation de mes travaux...

Est-il possible via CSS de changer le contenu image d'une ou, mieux, d'une balise div ?

Quand vous aurez fini de rigoler de ma naïveté et de mon incompétence, pourrez vous prendre quelques minutes pour me répondre ?

Merci d'avance !
Modifié par CreaphicD (24 May 2010 - 16:55)

Bonjour,

La solution en JS est, si bien codée, certainement la plus stable et aussi la plus logique (HTML balise, CSS présente, JS anime). Le taux de personne désactivant JS est compris entre 0 et 1%, donc tant que le contenu reste accessible sans JS (par exemple, si tu dois masquer des éléments pour les faire apparaitre avec JS, le masquage est fait avec JS et non CSS).


Et non, je ne pense pas qu'il soit possible de faire apparaitre/disparaitre un élément ne se trouvant pas dans l'élément survolé (CSS ne permettant pas de "remonter" au parent précédent).

Merci pour ta réponse Laurie-Anne... Elle est malheureusement celle que je craignais de lire.

Car mon problème vient du fait que si js est désactivé, les images deviennent inaccessibles... Donc le site n'a plus aucun intérêt.
Je crois qu'il va falloir que je repense tout ce site de présentation...

Je vais peut être laisser ce post ouvert un peu plus longtemps, si ça ne pose pas de souci... Sait-on jamais.

Je le changerai dès demain en résolu au cas où la discussion n'avancerait pas.
Merci encore, en tout cas !

Bonjour creaphic,

C'est vrai que certaine entreprise, et surement quelques utilisateurs aiment bien désactiver le JS. Je le considère, pour ma part, comme un gadget. Il ne sert juste qu'à embellir mes sites.

Mais j'image plusieurs solutions à ton problème :

- Pourquoi pas l'ActionScript(flash) mais cela pose à peu près le même problème que JS : est-ce que le plugin est installé ET à jour ><

- Une autre serai de proposer une parade en php à la désactivation du javascript. Je m'explique :
tu laisse la possibilité au visiteur de cliquez sur les miniatures, ensuite tu recharge ta page en conservant l'ID de l'image cliquée et tu la charges dans le block où elle s'affiche en taille réelle.

Ainsi tu perd l'effet si le JS est désactivé mais la navigation est toujours possible
Modifié par wooebmaster (20 May 2010 - 12:11)

wooebmaster a écrit :
- Une autre serai de proposer une parade en php à la désactivation du javascript. Je m'explique :
tu laisse la possibilité au visiteur de cliquez sur les miniatures, ensuite tu recharge ta page en conservant l'ID de l'image cliquée et tu la charges dans le block où elle s'affiche en taille réelle.

Cela s'appelle du JavaScript non intrusif, c'est ce que l'on considère généralement comme "bien codé".

Au risque de faire rigoler tout le monde et incendier.
Lorsqu'on ne peut ni JS (interdit en société), ni PHP (stand alone, taille, pas de réseau, ...), les iframes (XHTML DTD Transitional) ou les frames avec frameset peuvent apporter une réponse (XHTML DTD frameset)
Inconvénients:
Design très très contraignant. Une fois qu'on a fait les partages en cadres, il faut désempiler les niveaux de partages pour revenir en arrière.
Les historiques de navigation peuvent être perturbés. (c'est de moins en moins vrai (IE et FF)).
Le référencement n'est pas top. Il faut (absolument) commencer par une page sans frame.
Ce n'est pas dans l'orthodoxie un viewport = une page
Avantage:
Dans une partie de l'écran un (i)frame avec une page avec une <a href target>, permet de changer la page (la href) dans une autre partie de l'écran définie (le target) par un autre (i)frame.
(note: <iframe> et pas <object> car on utilise target et entre <iframe> et <frameset> tout dépend du design: iframe nécessite une définition précise en pixel (à ma connaissance), frameset permet des designs qui s'étendent automatiquement à la taille du viewport (utilisation de '*' dans la définition du frameset).
A mon avis, sauf contraintes évoquées au début, il vaut mieux éviter, à moins de souhaiter montrer, pour une présentation, que l'on connait aussi.
Bon maintenant les puristes peuvent se défouler!!!

Tout d'abord merci de vous être penchés sur mon cas !

@wooebmaster : l'idée était en fait de tout charger dans une page et qu'une fois sur le site, pas besoin de lien vers l'extérieur, de simples roll over auraient permis de visionner l'ensemble des travaux dans une taille relativement correcte, optimisée pour ne pas prendre trop de temps au chargement mais permettant d'avoir un aperçu d'une qualité acceptable.
Je n'ai rien contre le js car je pars d'une compo basée sur l'accordéon de mootools. Mais dans le cas de l'accordéon, si le js est désactivé, le site est tout de même visionnable bien qu'esthétiquement pas terrible. Dans le cas des roll overs ça ne peut pas aller vu que l'idée était de précharger les images sans les afficher (ex : <img src="images/image_over.jpg" style="display: none">) et de les faire apparaitre successivement toutes au même emplacement en utilisant le système du roll over... Un truc relativement simple à faire sous Flash comme tu le suggères mais je n'ai pas Flash et ne souhaite pas l'utiliser.

@sellig : les quelques contacts que j'ai pu avoir avec des "connaisseurs" m'ont franchement déconseillé d'utiliser les frameset... Sans pour autant m'expliquer pourquoi !!! J'ai vaguement cru comprendre qu'il était question de compatibilité avec certains navigateurs, mais pas plus.
Quant à l'Iframe... Je vais creuser de ce côté à moins que d'autres personnes lisant ce post ne me le déconseillent définitivement.

Et puis php... Cette histoire va un peu trop loin pour moi et mes misérables ambitions !

Les principaux problèmes des frame (et des iframe) ne concernent pas la compatibilité (je ne vois d'ailleurs aucun problème de compatibilité avec les frames) mais l'accessibilité et le référencement de la page.

La solution JS reste la plus sûre.

a écrit :
J'ai vaguement cru comprendre qu'il était question de compatibilité avec certains navigateurs, mais pas plus.

Finalement, il semblerait que je n'avais rien compris du tout...

a écrit :
Laurie-Anne # 20 May 2010 - 14:57:26
Les principaux problèmes des frame (et des iframe) ne concernent pas la compatibilité (je ne vois d'ailleurs aucun problème de compatibilité avec les frames) mais l'accessibilité et le référencement de la page.

Mais si ce que tu dis est juste, Laurie-Anne, alors mon problème semble réglé : si l'accessibilité fait partie de mes préoccupations, le référencement pas du tout ! Moins mon portfolio sera repérable sur le net, plus je serai content... Je n'ai pas honte de ce qu'il y a dedans ni n'en suis particulièrement fier, mais je préfèrerais éviter de retrouver mes créas aux 4 coins de la planète et préfère ne donner accès au dit portfolio qu'aux personnes de mon choix.

Je vais donc creuser du côté des frames... Si j'ai compris ce que j'en ai lu depuis le post de Sellig, le principe est d'afficher une page distante dans une frame contenue dans une page (suis-je bien clair, là ?). A ce moment là il ne s'agirait plus de roll over mais de "on click". Le but quand même du roll over était (j'ai un peu honte de l'avouer) de trouver un moyen de protéger mes boulots du surfeur lambda qui ne sait pas trifouiller dans un code et qui ne pourra pas se contenter de faire un clic droit.
J'essaye de m'interdire d'interdire ou d'obliger (js qui bloque le clic droit par exemple ou obligation d'activer le js pour voir mon site) mais j'ai bien l'intention de mettre des bâtons dans quelques roues !

Encore une fois je ne surestime pas mon travail... Mais je ne supporte pas de voir des créatifs volés trop facilement, qu'il s'agisse de moi ou d'autres !!! Je sais pertinemment qu'il est impossible de protéger complètement des images contre le vol... Mais je sais aussi qu'un gros watermark bien placé ne va pas détourner que les pillards à la petite semaine.

Alors faute de mieux... Je cherche.

Finalement je crois avoir réussi à faire ma soupe avec les infos que vous m'avez envoyées.
Merci encore pour le coup de pouce !!!