Le principe est de créer une image qui est répète 2 fois l'une au dessus de l'autre, le premier représentant l'état normal; le second celui lors du survol.
Pour mettre une image purement décorative.
Utiliser un element div vide et lui affecter un fond et une taille en css.
<div id="img_deco"> </div>
Nous avons vu dans un précédent billet des scripts js pour les liens externes, un petit exemple ici avec du css et une image
Code HTML
<a href="http://www.w3.org/" class="extern">Lien d'exemple</a>
Feuille de style :
a.extern {
background-image: url(extern.png);
background-repeat: no-repeat;
background-position: center right;
padding-right: 18px;
}Code HTML :
<a href="http://www.w3.org/" class="extern2">Lien d'exemple</a>
Feuille de style :
a.extern2:after {
content: ' *' url(extern.png);
}
Cadres
fin cadre
Le temps que je crée la mienne, allez donc voire listamatic.
Exemple de site dont j'ai réalisé le design avec un style switcher: night-tech.
C'est le site d'un amis qui fait de la vente de produits lumineux.
fichier switch.php
if ( isset($_GET['style']) && ($_GET['style']=='blue' || $_GET['style']=='pink')) {
$style=$_GET['style'];
setcookie('sitestyle', $style, time()+60*60*24*30);
}
header("Location: ".$_SERVER['HTTP_REFERER']);
fichier utils.php
function linkstyle() {
if (isset($_COOKIE['sitestyle'])) {
if ($_COOKIE['sitestyle']=='pink') {
echo '<link href="styles/menu_r.css" rel="stylesheet" type="text/css">';
} elseif ($_COOKIE['sitestyle']=='blue') {
echo '<link href="styles/menu_b.css" rel="stylesheet" type="text/css">';
}
} else {
echo '<link href="styles/menu_b.css" rel="stylesheet" type="text/css">';
}
}
$activeblue='style="border: 2px solid #999;"';
$activepink='';
if (isset($_COOKIE['sitestyle']) && $_COOKIE['sitestyle']=='pink') {
$activeblue='';
$activepink='style="border: 2px solid #999;"';
}
Dans le fichier qui doit changer de style
<?php require_once('utils.php'); ?>
<?php echo linkstyle(); ?>