[Résolu]Span & Rollover

Bonjour à tous.

Ca faisait longtemps ^^ !

J'utilise des "span" dans mes liens de menu pour faire apparaitre au survol une image différente selon chaque lien.

J'aimerai que l'image correspondant au lien en question "reste" visible lorsque l'on visite cette page, donc quand ce lien est "actif".



Je veux simplement que mon image reste en place quand la page est active !

Voici le code html :

<div class="menu">
<ul class="menugauche">
<li><a href="index.php?page=pres" title="Pr&eacute;sentation" tabindex="20">Pr&eacute;sentation<span><img src="visuels/presentation.png" alt="Presentation"/></span></a></li>
<li><a href="index.php?page=prod" title="Produits et Services" tabindex="24">Produits et Services<span><img src="visuels/prod.png" alt="Produits et Services"/></span></a></li>
<li><a href="index.php?page=creag" title="Cr&eacute;ation graphique" tabindex="28">Cr&eacute;ation graphique<span><img src="visuels/crea.png" alt="Cr&eacute;ation graphique"/></span></a></li>
<li><a href="index.php?page=tarifs" title="Tarifs et Devis" tabindex="32">Tarifs et Devis<span><img src="visuels/tarifs.png" alt="Tarifs et Devis"/></span></a></li>
<li><a href="index.php?page=contact" title="Contact" tabindex="36" accesskey="7">Contact<span><img src="visuels/contact.png" alt="Contact"/></span></a></li>
<li><a href="index.php?page=liens" title="Liens" tabindex="40">Liens<span><img src="visuels/links.png" alt="Liens"/></span></a></li>
</ul>
</div>

Et le CSS :

a span { /* définition de la balise <span> inclue dans <a> */
	display: none;
}
a:hover span {
	display: inline;
	position: absolute;
	top: 245px;
	right: 40px;
	width: 90px;
	height: 80px;
}
.menugauche a {
	color: #402d20;
}
.menugauche a:visited {
	color: #e54b17;
	font-style: italic;
}
.menugauche a:active/*ie*/, a:focus/*gecko*/ {
	color: #59BF26;
	font-style: italic;
}

Avez vous des idées ou solutions ?

Merkiii
Modifié par yank (18 Jul 2007 - 15:03)

Ce que je ferais pour ma part, c'est plutôt:
- avoir une image (balise <img>) correspondant à la page en cours (disant donc «accueil», «produits et services», etc.) avec un attribut alt qui va bien, séparée du menu, à placer au centre de ton image d'écran (qui sera une simple image de fond);
- utiliser Javascript pour modifier l'image au survol des liens (Javascript c'est bon mangez-en, et c'est quand même plus pratique que les bidouilles CSS pour ce genre d'effet).

Avec Javascript désactivé: le petit écran affiche le titre de la page, sous la forme d'une image avec texte alternatif. Si c'est cette image qui doit véhiculer l'information principale sur la page, placer l'image dans un h1.
Avec Javascript activé: même chose que précédemment, mais en plus on utilise cette zone de la page pour mettre en valeur la destination de chaque lien. Par contre, on ne modifiera pas le alt de l'image, vu que c'est de la «déco informative» pas indispensable...

Florent V. a écrit :
Ce que je ferais pour ma part, c'est plutôt:
- avoir une image (balise <img>) correspondant à la page en cours (disant donc «accueil», «produits et services», etc.) avec un attribut alt qui va bien, séparée du menu, à placer au centre de ton image d'écran (qui sera une simple image de fond);
- utiliser Javascript pour modifier l'image au survol des liens (Javascript c'est bon mangez-en, et c'est quand même plus pratique que les bidouilles CSS pour ce genre d'effet).

Je comprends le principe, mais que veux tu dire par :

a écrit :
séparée du menu, à placer au centre de ton image d'écran (qui sera une simple image de fond

a écrit :

Par contre, on ne modifiera pas le alt de l'image, vu que c'est de la «déco informative» pas indispensable...

Bien sur !

Je pense que c'est le même principe que pour mes puces à gauche ... Logiquement j'aimerai qu'elle reste toute verte lorsque l le lien est activé et pas seulement en survolé (hover)

...

Je ne connais pas la méthode non plus ...

Effectivement en javascript c'est plus "simple" mais j'aimerai savoir si cela est possible en css.

Et en utilisant cela :

a:active span/*ie*/, a:focus span/*gecko*/ {
}

dans la css ?

Salut,

Pour que ce type d'effet en css, il faut rajouter un poil de php juste de quoi tester une variable et affecter une class.

ghost a écrit :
Salut,

Pour que ce type d'effet en css, il faut rajouter un poil de php juste de quoi tester une variable et affecter une class.

ça m'intéresse !

Aurais tu un lien vers un tuto ou autre ?

merci pour l'idée

yank a écrit :
Effectivement en javascript c'est plus "simple" mais j'aimerai savoir si cela est possible en css.

Pour l'effet de rollover, c'est vaguement possible en CSS, mais c'est de la bidouille, et les CSS ne sont à vrai dire pas faites pour ça. Donc pour un résultat de qualité on privilégiera Javascript.

En CSS compatible IE6, on fera quelque chose à base de positionnement absolu d'un élément contenu dans un lien, ou alors contenu dans un li si on ne vise pas la compatibilité IE6. On aura peut-être quelques difficultés avec tel ou tel navigateur, mais ça doit être jouable.

Ensuite, pour la partie «afficher par défaut l'image correspondant à la page en cours», ça ne peut pas se faire en CSS, et mieux vaut passer directement par le code HTML. Par exemple:

<h1>Navigation</h1>
<ul>
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ul>

<h1><img src="vignette-prodservices.png" alt="Produits et services" /></h1>

... descriptif des produits et services ...

Bon, le h1 n'est indispensable que si la vignette correspond au principal moyen d'identifier le sujet de la page. Si on a aussi un titre sous une forme plus classique, il faut voir s'il est pertinent de faire un <p> avec image+texte alternatif, ou si on peut se contenter d'une image à l'attribut alt vide, voire d'une image de fond pour un bloc «décoratif». Ça dépendra donc du reste de la page.

Re,

Tu peux faire plus simple en plaçant directement ton style dans le code dans le menu de la page concernée, mais je pense que tu dois travailler en include pour ton menu, dans ce cas, il faut attribuer une variable à chaque page et les réinitialiser via un include avant l'include de ton menu

<?php
$page1_active = "";
$page2_active = "";
$page3_active = "";
?>

Ensuite tu affectes le style à la page1 par exemple

<?php
$page1_active = 'class="classe_active"';
?>

Ton menu

<a <?php echo $page1_active;?> href="#">page 1</a>
<a <?php echo $page2_active;?> href="#">page 2</a>
<a <?php echo $page3_active;?> href="#">page 3</a>

En ayant pris soin de créer dans ton css la classe active qui généralement doit être la même que ton a:hover span ....

Donc si ta page n'est pas active, le lien dans ton menu restera:

<a  href="#">page 1</a>

Si elle l'est:

<a class="classe_active" href="#">page 1</a>

Je sais pas si j'ai été clair sur le coup mais c'est en gros ce principe.
Modifié par ghost (13 Jul 2007 - 16:32)

J'ai mal au crâne d'un coup ... Oui effectivement je travaille en include ...

Donc je comprends plus ou moins ce que tu veux dire, je pense que je vais essayer dans cette voie même si au premier abord ça à l'air un peu folklo !

Re,

Non c'est simple et très stable, le truc c'est d'en avoir compris le mécanisme après ça s'adapte à chaque besoin et évite souvent des usines à gaz css pas vraiment portables et lourdes en maintenance.
On oublie souvent cette possibilité de base en php permettant "d'écrire" ou non des lignes de code en fonction d'une variable et pourtant c'est bien plus simple souvent que du JS permettant par exemple d'occulter un bloc ou non...

Je pense que le probleme viens du faite que ton include de ta page 1 viens apres l'apparition de ton menu, donc il ne peux pas se mettre a jour.

Je te conseil une variante.

tu fait un switch sur les nom de ta page en affectant ton code :

<?php
$page1_active = 'class="classe_active"';
?>

mais tu fais tout cela avant ton menu fait le quand tu apres avoir mit tes variables a null.

par exemple :

<div class="menu">

<?php

$page1_active = "";

$page2_active = "";

$page3_active = "";

$page4_active = "";

$page5_active = "";

$page6_active = "";
switch ($_GET['page']) {
case 'pres';
$page1_active = 'class="classe_active"';;
break;
}

?>

voilà

Super !

Ca fonctionne enfin !

Merci pour l'astuce

Par contre, comment faire maintenant pour que ce soit mon image qui s'affiche et non pas le "alt" ?

J'ai trouvé ! C'est bon !



Je vérifie mais je pense que ça fonctionne !

Gniii ... faux espoir, en fait ça fonctionne sur le premier lien : page 1 mais pas sur le reste ...

Ayé C'est bon

Je ne sais pas si c'est trés correct du point de vue php mais ça fonctionne ...

case 'pres';
$page1_active = 'class="image"';;
break;
case 'prod';
$page2_active = 'class="image"';;
break;
case 'creag';
$page3_active = 'class="image"';;
break;
case 'tarifs';
$page4_active = 'class="image"';;
break;
case 'contact';
$page5_active = 'class="image"';;
break;
... etc ...

Génial

Merci pour tout

Par curiosité et pour savoir le faire, comment faire pour mettre l'image 1 par défaut lorsqu'on arrive sur le site?

Je vais essayer de trouver mais si vous avez une piste
Modifié par yank (16 Jul 2007 - 17:54)