[Resolu]Lien image survol

Bonsoir à tous
Je suis contente de pouvoir poster mon premier message sur ce forum car le site d'Alsa m'a toujours beaucoup éclairé... mais aujourd'hui j'aurai besoin de la lumière de ces membes

Ayant décidé de laché la création de site par des tableaux tout moche, je me suis mise au css. Cependant j'ai un petit soucis. Mon menu est composé d'images, qui au survol change (classique quoi).
J'ai voulu évité d'utiliser les traditionnels onmouseover,onmouseout dans mon img src, et j'me suis dis tiens pourquoi ne pas faire ça

.img2{ width:266px;
	height:74px;
	background-image:url('../img/tab2.jpg');
	background-repeat:no-repeat;
}

.img2:hover{ background-image:url('../img/tab2_bis.jpg');
}

Sauf que maintenant, grande dégourdie que je suis, je réalise comment mes les liens vers mes pseudos frames?

Cela est sans doute une question de débutante, mais je n'ai pas trouvé de réponse sur gougole

Merci d'avoir pris le temps de me lire

Nephtys
Modifié par Nephtys (19 Aug 2007 - 14:23)

Bonjour et bienvenue,

Comment faisais-tu précédemment ?
Dans le code HTML.
Avec des <a>.
Et des “target”.
Non ?

As-tu essayé ?
 
Modifié par Gihef (19 Aug 2007 - 03:53)

Bonjour Nephtys et bienvenue,

Il ne faut pas confondre mise en page (CSS), structure ((X)HTML) et comportement (JS).

La réaction d'un élément au survol est du domaine du comportement donc laisser cette tache à Javascript est à priori la chose à faire. Cela dit, bien souvent, on passe par CSS via la pseudo-classe hover parce que plus simple à mettre en place et compatible avec un très grand nombre de navigateurs. Si en revanche, on passe par JS, on s'expose à quelques soucis (aléatoires) avec Safari (qui une fois corrigés, rendent la chose TRES lourde).

Dans un cas comme dans l'autre, cela n'influe en rien sur la manière dont tu fais tes liens.

Gihef a écrit :
Et des “target”.

Sur des pseudo-frames ? pourquoi target ? Ca n'a rien d'obligatoire.

Une petite précision :

Pour que l'effet soit aussi disponible au clavier, il vaut mieux faire ceci :

<a href="lien.htm">lien</a>

a
{
    color: black;
}
a:hover, /* Au survol */
a:focus, /* A la prise de focus */
a:active /* A la prise de focus pour IE (à placer en commentaires conditionnels) */
{
    color: red;
}

plop, encore moi !

Décidemment, il y a des choses à dire...

Les images de ton menu font-elles office de background ou de contenu pour tes liens ?

Si tu es dans le second cas, alors, il faut passer par Javascript pour obtenir l'effet souhaité (et non pas mettre l'image en background du lien ce qui rendrait ce dernier incompréhensible pour ceux qui ne disposent pas de CSS)

Gihef a écrit :
Bonjour et bienvenue,

Comment faisais-tu précédemment ?

Grosso molo, je fesais de cette manière http://www.izisoftware.com/forum/forum_posts.asp?TID=1297

Je n'utilise pas de target, je reste toujours sur mon index.php, il n'y a que mon div contenu qui change

koala64 a écrit :
plop, encore moi !

Décidemment, il y a des choses à dire...

Les images de ton menu font-elles office de background ou de contenu pour tes liens ?

De contenu c'est obligé, si elles étaient en background, j'aurai du utiliser "map" pour qu'elle soit cliquable, et alors le changement au survol n'aurait pas pu être fait, non?

Je ne comprend pas la remarque que tu as fais sur la clavier, tu pourrais me donner quelques précisions?

a écrit :
Je ne comprend pas la remarque que tu as fais sur la clavier, tu pourrais me donner quelques précisions?

Via la tabulation (ou les touches a et q pour Opera), tu peux parcourir tes liens. Avec le code que je t'ai montré, un lien réagit de la même manière que si on le survolait.

a écrit :
De contenu c'est obligé

Dans ce cas, inutile de s'attarder sur CSS, il n'est pas fait pour cela et ne sait pas faire (à moins de bidouiller des choses inaccessibles).

a écrit :
j'aurai du utiliser "map" pour qu'elle soit cliquable, et alors le changement au survol n'aurait pas pu être fait, non?

C'est toujours possible via JS mais inadapté ici.

Très bien, merci d'avoir pris le temps de me répondre.
Je mets le topic en résolu