28173 sujets

CSS et mise en forme, CSS3

[RESOLU] Changer des images-liens en fonction d'un style

Bonjour.

Voilà je plante le décor... Je tourne sous deux ou trois skins différents.
J'ai par exemple quelques liens représentés par une image.

Exemple, j'ai un lien qui donne accès à une page RSS représenté par un logo RSS orange.
Je me demandais si je pouvais en fonction du skin choisi par l'utilisateur appeler une autre image pour ce lien, par exemple un logo RSS bleu pour aller avec les tons du skins.

Je ne vois pas comment changer cette image. Il me semble que seule la fonction background-image peut marcher.
Le seul truc que j'ai trouvé est de faire un appel d'image en background et d'inserer dans la page directement une image png vide par dessus ce fond. Du coup je visualises le fond et peux cliquer sur l'image sans souci.
Alors déjà est-ce que cette solution est envisageable ?

Merci
Modifié par PhilouMinety (20 Jun 2007 - 20:17)
Salut Smiley cligne ,

pourquoi ne pas utiliser un test en PHP en fonction du skin choisi ? A priori le même test que celui qui est utilisé pour choisir le skin et qui servirait à choisir l'image Smiley langue

je suis pas sûr d'être très clair Smiley rolleyes
euh... non lol

Je ne peux pas faire le test si je n'arrive pas à insérer l'image par ma feuille de style.
Si tu parles du test en feintant par l'utilisation d'un background-image et d'une image vide par dessus, ca a l'air de marcher, j'ai regardé sous Firefox et IE. Je peux cliquer sur l'image vide sans souci tout en ne voyant que mon fond image.

Mais la question que je me pose, est-ce que c'est là mon seul moyen ?
Si tu veux au départ, j'avais mis un logo rss directement sur la page du site (<img src=".....) mais à l'époque j'utilisais du blanc en fond pour le gros du site, maintenant j'aimerais mettres des couleurs plus vives et un le même logo ne rend plus aussi bien du coup, voir même très moche sur certaines couleurs lol. C'est donc pour ca que j'aimerais avoir une image-lien différente en fonction de mes skins.
C'est donc sur la feuille de style que je bloque.
Re',

bon ben ça se confirme : j'ai pas été clair Smiley ravi

En supposant que l'utilisateur sélectionne son skin avec un formulaire et que tu le sauvegardes dans un cookie, ça pourrait donner ça :
<?php
// Choix du style
if (isset($_POST['style']))	// est-ce que le visiteur a demandé un changement de style ?
{	// Si oui on change le style et on écrit un cookie pour la prochaine visite
$style = $_POST['style'];	
$expire = 365*24*3600;  // on définit la durée du cookie, (ici 1 an)
setcookie("moncookie",$style,time()+$expire);  // on l'écrit
}
elseif (isset($_COOKIE['moncookie']))	// Sinon est-ce qu'il existe déjà un cookie ?
{
$style = $_COOKIE['moncookie'];
}
else	// Sinon valeur par défaut
{
$style = 'orange';
}?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test images en fonction du skin</title>
<link rel="stylesheet" type="text/css" href="include/css/styles.css" />
<?php 
switch ($style) {	
	case "orange" :
		echo ('<link rel="stylesheet" type="text/css" href="include/css/style_orange.css" />');
	break;
	
	case "bleu" :
		echo ('<link rel="stylesheet" type="text/css" href="include/css/style_bleu.css" />');
		break;
}
?>
</head>
<body>
<?php 
switch ($style) {	
	case "orange" :
		echo ("<a href='fluxrss.php'><img src='templates/images/fluxorange.jpg' title='Flux RSS'></a>");
	break;
	
	case "bleu" :
		echo ("<a href='fluxrss.php'><img src='templates/images/fluxbleu.jpg' title='Flux RSS'></a>");
		break;
}
?>
<form method="post" action="">
<input type="radio" name="style" value="orange" <?php if($style=="orange"  or !$style){echo 'checked="checked"' ;} ?>> Orange<br>
<input type="radio" name="style" value="bleu" <?php if($style=="bleu"){echo 'checked="checked"';} ?>> Bleu<br><br>
<input type="submit" name="switcher" value="Changer le style" /><br><br>
</form>
</body>
</html>

Mais bon, si ça marche comme tu veux avec ta méthode Smiley biggol
Modifié par Heyoan (19 Jun 2007 - 22:06)
ah ok je vois tu lances l'image directement lors du choix du style.
Mais je suis pas sur du résultat de ton img src. Si il est placé sur un endroit bien précis et dans une page bien précise (exemple en bas de mes news), je ne vois pas comment mettre ca en place...

Je passes par un switcher en fait, tu cliques sur l'image du skin, ca appelles la feuille de style concernée et voilà.
Je vois ce que tu veux dire oué mais je vois pas trop comment mettre ca en place sur une page.

Oui ma méthode a l'air de passer lol mais bon est-ce que c'est autorisé cette forme de gruge codesque ? certains le font peut etre...
Modifié par PhilouMinety (19 Jun 2007 - 22:07)
Heu, j'ai un petit doute : tu codes toute la page ou tu utilises un CMS ?

Parce que si tu codes entièrement le switch peut se trouver n'importe où dans la page (footer compris Smiley smile ).

Sinon pour te dire si ta méthode est correcte ou non, je suis pas une sommité des "bonnes pratiques" CSS Smiley biggol
Non aucun CMS, je code tout seul.

Mon switch se trouve dans mon header mais je suis d'accord avec ce que tu dis. Je gère tout directement par la feuille de style.

Or toi finalement tu appelles l'image par le php lorsque l'utilisateur choisi son skin. Je vois ce que tu veux faire mais bon disons que je doive changer pas mal d'images, ca peut faire très long après.

Mon logo rss se trouve sur ma page d'accueil. L'image est commune aux skins étant donné qu'elle se mariait très bien avec les couleurs de ces derniers. Sur cette image, j'ai crée un lien vers une page.
Maintenant si je veux un style plus "agressif" au niveau couleurs, cette image passera très bien sur les autres skins mais pas sur le nouveau. D'où appeler différentes images.
Alors après est-ce que c'est possible en CSS, ca j'en sais rien car j'y arrives pas lol

Merci de ton aide en tout cas. Je vais voir si d'autres vont aller dans ton sens et me dire que ma technique de grugeur est horrible et fait honte à tous les bon practiciens du CSS Smiley lol
Modifié par PhilouMinety (19 Jun 2007 - 22:34)
Ça me rappelle ce post dans lequel Marvin et Lanza proposent des solutions qui pourraient t'aider...

Par contre il me semble que les images dont tu parles ne sont pas décoratives et ne devraient donc pas se trouver dans le CSS en background mais bien dans le code html...

C'est vrai que ma méthode risque d'être un peu fastidieuse mais il y a moyen de la simplifier. Par exemple en t'arrangeant pour que les noms des images finissent toujours par le nom du style (comme fluxrss_orange.jpg et fluxrss_bleu.jpg) tu n'aurais plus qu'à mettre :
<a href='fluxrss.php'><img src='templates/images/fluxrss_<?php echo $style ?>.jpg' title='Flux RSS'></a>


A+
Heyoan a écrit :

Par contre il me semble que les images dont tu parles ne sont pas décoratives et ne devraient donc pas se trouver dans le CSS en background mais bien dans le code html...


oui voilà mes images ne sont pas dérocatives. Ce sont des liens.

ok merci je vais voir les différentes solutions que tu me proposes. Si il y en a d'autres je suis preneur.
A ta place je placerais toutes les images qui sont appelées à changer dans des dossiers distincts portant le nom du skin correspondant.

Ensuite dans ta page tu as chaque fois une variable php avec le nom du skin choisi. Et dans les chemins de tes images, tu insères d'abord cette variable (qui correspond au dossier voulu).

Quelque chose comme:
echo '<img src="'.$path.'/monimage.jpg" alt="..." />';


Ou sinon tu peux aussi préfixer le nom de tes fichiers. Du genre blue_menuBack.gif pour le fond de ton menu pour le skin bleu.
Modifié par <nicolas> (20 Jun 2007 - 09:37)
Oui c'est ce que j'ai fait pour les skins, un dossier pour un skin.

Ok je vois en fait je glisse la variable directement avec l'insertion de l'image.
Pour les fonds ya aucun souci en fait, mon site marche déjà bien avec le css mais j'avais envie de remettre ca bien à plat.

Bon je vais voir ca et je vous tiens au courant.
Merci.
Bonne aprem.
Ok ca marche par le php. Merci pour vos solutions. Finalement je comprends pas pourquoi j'y avais pensé alors que j'ai d'autres trucs qui marchent comme ça, allez comprendre Smiley langue

Merci encore !

Ciao
PhilouMinety a écrit :
Ok ca marche par le php. Merci pour vos solutions. Finalement je comprends pas pourquoi j'y avais pensé alors que j'ai d'autres trucs qui marchent comme ça, allez comprendre Smiley langue

Merci encore !

Ciao


Ici c'est résolu et non réglé que l'on indique dans le sujet Smiley cligne
arf si près d'avoir fait une parfaite impression... et bien non tant pis pour moi Smiley langue

c'est changé Smiley cligne
Modifié par PhilouMinety (20 Jun 2007 - 20:16)
PhilouMinety a écrit :
arf si près d'avoir fait une parfaite impression... et bien non tant pis pour moi Smiley langue

c'est changé Smiley cligne


C'est parfait ainsi Smiley biggrin et comme tu prends soin de suivre tes sujets, c'est déjà une très bonne impression Smiley cligne .

<message pedago-sublimano-machin>A ceux qui débutent sur ce forum (et les autres Smiley cligne : prenez-en de la graine)</message pedago-sublimano-machin>
Sujet clos
Aller à