28112 sujets

CSS et mise en forme, CSS3

[RESOLU] Basculer d'un DIV à un autre au passage de la souris

Pages :
(reprise du message précédent)

bonjour,

le js, c'est bien pour corriger le "li:hover h1 a img" ? Dans ce cas, car je ne connais rien au js, il va falloir que j'ouvre un autre topic pour comprendre les bases... Ne vaut-il mieux pas que j'abandonne le hover CSS au profis du js. Ou faut-il créer une condition pour que le js ne fonctionne qu'avec IE6?

le js va t-il avoir la même compatibilité que le css? JE pense que le probleme du js, c'est surtout pour les navigateurs qui ne l'affiche pas.... je me trompe?

bonne journée à tous
Salut,

Pour mon site perso, j'ai réalisé quasiment exactement ce que tu veux:
Une image clickable
Un hover qui affiche du texte dessus via JS (avec la bibliothèque jQuery)
L'image reste clickable même avec le hover actif

N'ayant pas le code en ce moment, je ne peux pas le mettre maintenant mais si ça t'interresse, je peut le faire ce soir.
J'étais justement en train de poster dans la section JS pour apprendre les bases et voir si ca exitait.

Il y a moyen de voir ton site perso en question?

As tu utilisé le JS pour tous les navig ou juste pour IE6?

Arrives tu à bien être référencé par Google sachant que tu n'as pas de texte? Ma crainte pour un site avec que des photos c'est de na pas etre bien référencé...
Modifié par pika28 (09 Oct 2009 - 13:42)
Salut,

Pour le JS, c'est très simple avec jQuery (quand on connait surtout).
En plus ça résoud en général le pb avec IE car IE6 ne sais pas faire de hover CSS sur un bloc.

Pour faire le hover avec jQuery cela se passe comme ceci:
1) Action sur un bloc (DIV, SPAN, etc.) via un click ou un survol
2) le JS va modifier la propriété (en général display dans le cas d'un hover) de l'élément que l'on veux activer.

Concernant le référencement, je ne sais pas trop vu que ce n'est pas ma priorité, c'est juste un site perso.
Deplus, Google va voir les liens et visiter automatiquement les pages liée donc si les titres sont explicites ce doit être bon.

Pour le site c'est le site de mon profil (le petit bouton "www" en bas de ce post)
Je viens de voir ton site, c'est pas tout à fait ce que je recherche mais j'ai cru comprendre qu'avec le JS, on pouvais faire pas mal de chose.

Le problème, c'est que j'ai jamais écris le moindre code de JS... JE ne connais ni les bases, ni les balises, etc....

Je pense que comme pour le CSS, on peut soir l'intégrer dans le HTML ou alors faire un fichier à part, le lier comme un fichier CSS et faire appel à des fonctions vis à vis des ID, je suis sur la bonne piste?

Merci

Peut-on échanger par MSN?
Je viens de lire un tuto sur la mise en place de moutools et un autre sur jquery afin de comprendre les bases. Si j'ai bien compris, ce sont des librairie avec des fonctions propre à chacune qui résume d'autre fonction pour simplifier le JS.

Si je repart sur l'hypothèque de deux DIV class="text" et class="img" :

- Je superpose img sur text avec z-index=1 en CSS ?

- Je masque img avec JS avec onmouse ?

- Si j'ai bien compris le principe des Jquery et compagnnie, pas besoin de jquery juste pour la fonction onmouse... ?

Merci à vous
salut

Pour afficher / masquer des div , je te conseille d'utiliser dreamweaver, ya un comportement " afficher /masquer des éléments " ( via javascript ) qui est parfaite pour ça, et sans aucune connaissance de prog.
Bonsoir ,
il n'est peut-être pas nécessaire de chargé un framework js , pour juste compensé un défaut de IE6 si tu tiens a gardé l'effet actuel.

tu trouveras quelques exemple simple de bases :
http://fr.selfhtml.org/javascript/objets/document.htm
( c'est viellot , certains trucs sont de l'histoires , mais bon , ça va te permettre de degrossir un peu et de commencer a y voir un peu plus clair Smiley smile ).

Voici un exemple (brut et basic) , qui devrait te permettre de comprendre et de tester comment on peut se promener dans le document :
http://gcyrillus.free.fr/essai/ConceptDeco_lihover.htm

Notes les commentaires Conditionnel qui ne servent ce js qu'a IE6 .

GC
Merci encore pour cette avancé,

Par contre, quitte à passer en JS, je vais tout passé en JS.

Je voudrais revenir à mon idée première, c'est à dire deux div superposé car, plus simple pour pour faire la mise en page. L'idée c'est de reprendre la même trame pour chaque page mais certaine vignettes qui fusionnent.

Je vais essayer de comprendre le bout de code que tu as mis GC et de l'adapter pour une class div...

Merci
regarde, les boutons des différentes rubriques de mon site, les taches qui apparaissent au rollover sont fait avec cette technique ( avec dreamweaver ):

http://xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

je te donne le javascript :

function MM_showHideLayers() {
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible' : (v=='hide')?'hidden':v; }
obj.visibility=v; }
}

et pour appeller cette fonction, dans le html :

<div class="home" id="home"><a href="home.html"><img src="images/menu/menu/home.png" alt="home" border="0" ;onmouseover="MM_showHideLayers('home_over','','show')" onmouseout="MM_showHideLayers('home_over','','hide')"/></a></div>

enfin j'espère que c'est ça que tu cherches à faire

Smiley lol
Modifié par SnowAddict (11 Oct 2009 - 00:35)
Sympa ton menu, il est design...

tu verra l'effet que je souhaite... L'effet fonctionne pour le moment avec du CSS mais ne fonctionne pas sous IE6 sauf avec le code JS de GC en conditionnel...

Je voudrais repartir avec mon idée première, deux bloc DIV l'un sur l'autre avec celui contient l'img qui se cache avec onmouseover et qui revient avec onmouseout...

Je vais créer un topic spécial dans la section Java pour développer plus sur le sujet... Je le post dès que c'est fait.

Merci
Modifié par pika28 (12 Jan 2010 - 19:14)
Ben écoutes, suffit de superposer 2 div, et d'afficher / masquer au rollover / rollout.

Un exemple vite fait en 2 min :

http://snowaddict06.free.fr/test.html

J'ai mis un comportement sur la div rouge " afficher la div bleue au rollover " , et sur la div bleue un comportement "masquer la div bleue onmouseout ". Du coup ça crée l'effet souhaité.

le code :

javascript ( à mettre entre les head ou en fichier externe Smiley cligne ) :

<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible': (v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>

le code html :

<head>
<style type="text/css">
<!--
.div {
position:absolute;
left:17px;
top:17px;
width:258px;
height:182px;
z-index:1;
background-color: #FF0000;
}

.div_over {
position:absolute;
left:17px;
top:17px;
width:258px;
height:182px;
z-index:2;
background-color: #0000FF;
visibility:hidden;
}
-->
</style>

</head>
<body>

<div class="div" id="div" onmouseover="MM_showHideLayers('div_over','','show')"></div>

<div class="div_over" id="div_over" onmouseout="MM_showHideLayers('div_over','','hide')"></div>

</body>

en + ça fonctionne sous IE ( enfin peut être pas les anciennes versions )
Modifié par SnowAddict (10 Oct 2009 - 16:34)
Super, avec ca si je n'arrive pas, je change de hobbies.... lol

Dernière question avant la mise en pratique, peut extraire le JS dans un fichier à part ainsi que les code en gras pour les div?

<div class="div" id="div" onmouseover="MM_showHideLayers('div_over','','show')"></div>
<div class="div_over" id="div_over" onmouseout="MM_showHideLayers('div_over','','hide')"></div>

Niveau accessibilité, même si le JS est désactive, le titre étant sur l'img, ca ne devrait pas poser de problème...
Tu peut extraire uniquement le javascript entre les head dans un fichier séparé. Ce que tu surlignes en gars dans la div doit absolument figurer dans ta balise div, sinon il ne sait pas quelle fonction aller chercher.

Et si le javascript est désactivé, ça ne marchera pas. Mais bon, de manière générale, dans tous les navigateur javascript est activé par défaut.
Modifié par SnowAddict (10 Oct 2009 - 17:43)
de rien Smiley cligne

Tu peut aussi mettre le css en externe au fait, c'est + propre Smiley cligne

Tiens moi au courant sur l'avancée.
Modifié par SnowAddict (10 Oct 2009 - 17:54)
Je suis en train de tester ca ne marche pas, mais je suis pressé et pas le temps de vérifier...

Je m'y remets lundi.

Bon week end à tous...
Pages :
Sujet clos
Aller à