Bonjour à tous et à toutes !!!
Connaissez-vous la technique CSS dite de “l’ascenseur” ou des “portes coulissantes” ? non, et bien tant mieux car aujourd’hui nous allons aborder cette technique afin de mieux comprendre son principe de fonctionnement.
Cette technique à l’avantage d’éliminer le léger (tout dépend de la qualité de votre connexion) temps d’attente qu’il faudrait pour charger la deuxième image utiliser pour le rollover avec une intégration Javascript dans le genre :
Pour commencer il vous faut créer une image qui servira de bouton, d’onglet, ou ….. euh une image à laquelle vous voulez appliquer un effet de rollover .
Pour notre exemple j’ai choisi un beau bouton “on/off” créer par mes soins 
merci qui …?
Voilà le l’image du bouton “ON” une fois l’étape de création fini :
Bien entendu pour créer un effet de RollOver il nous faut obligatoirement deux image, en principe on reprend la même image à laquelle on applique une couleur différente pour créer notre effet, si ce n’est pas le cas et que vous souhaitez utiliser une autre image, essayer de respecter au maximum la taille de vos images, une première ou deuxième image de taille différente (plus grande ou moins grande) créera forcement un effet plutot bizarre, donc “Be Carefull” !!! Voici notre deuxième image “OFF” qui créera notre effet de RollOver :
Maintenant il va falloir regarder dans les proprièté de notre image, relever la taille en hauteur (ici 125px) et en largeur (ici 125px) et créer une nouvelle image vide de la taille de nos deux images reunis, c’est à dire 250px de hauteur et 125 px de largeur (celle ci ne change pas), faites attention à bien respecter précisément le positionnement des deux images dans cette nouvelle image !!! Ce qui donne ceci avec note exemple :
Comme vous pouvez le voir nous avons positionné l’image du bouton “OFF” en haut et l’image du bouton “ON” en bas, mais cela importe peu, vous pouvez sans problème faire le contraire car l’effet de Rollover se fera dans le fichier CSS avec les propriètés “bottom” ou “top” !!!
Donc maintenant que nous avons créer nos images il va falloir créer notre feuille de style (CSS) pour notre effet, je vais donc vous donnez un exemple avec des explications rapides sur l’implémentation CSS de notre effet de RollOver :
Premièrement il va falloir créer une “Class” pour notre bouton en tenant compte qu’elle va être réutiliser plusieurs fois dans notre site, contrairement à une “ID” qui elle est à usage unique :
class = .pushbt
id = #pushbt
Exemple CSS 1 :
.pushbtmin { ici nous donnons un nom de class à notre bouton normal .
background-color: transparent ; ici nous indiquons la couleur de fond de notre image, la transparence ne fonctionne que sur les images GIF ou PNG qui ont été sauvegarder en conséquence biensur.
background-image: url(PushBT_2.png) ; ici nous indiquons le chemin vers notre image.
background-position: center bottom; ici nous indiquons la position, le premier coïncide à la positon verticale et la deuxième à la position horizontale, ici vous pouvez voir “bottom” donc l’image sera positionnée sur le bouton “ON”.
background-repeat: no-repeat ; ici nous indiquons si l’image se répète ou non.
display:block; ici nous indiquons la manière utilisé pour positionner notre image. pour un effet de RollOver nous utiliserons presque toujours le positionnement de type “Block”.
height:125px; ici nous indiquons la largeur de notre image.
line-height:250px; ici nous indiquons la hauteur de notre image.
margin:0px auto; ici nous employons une astuce pour centrer le tout sur IExplorer.
text-align:center; ici nous indiquons le positionnement du texte sur le bouton si il y en a biensur.
width:250px; ici nous indiquons la taille de notre block.
}
puis le code CSS qui indique que notre bouton change au survol :
a.pushbtmin:hover { ici nous réutilisons le nom de class de notre bouton et indiquons son comportement.
background-color:transparent ; ici nous indiquons la couleur de fond de notre image.
background-image: url(PushBT_2.png); ici nous indiquons le chemin de notre image.
background-repeat:no-repeat; ici nous indiquons si l’image se répète ou non.
background-position:center top; et ici nous indiquons la position de notre image, vous pouvez voir ici “top” qui indique qu’au survol l’image affichera ce qui se trouve en haut de l’image, c’est a dire le bouton “OFF”.
}
Voilà pour notre première explication, la deuxième va consisté à comprendre comment insérer notre bouton sur la page html.
Pour l’insérer directement dans la page html, il faudra juste placer le code CSS dans la partie “head” de notre page comme ceci :
<script type=”text/css”>
.pushbtmin {
background: transparent url(PushBT_2.png) no-repeat scroll center bottom;
display:block;
height:125px;
line-height:250px;
margin:0px auto;
text-align:center;
width:250px;
}
</script>
Personnellement je n’apprécie pas trop cette technique car pour un site entièrement en html nous serions obligé d’ajouter ce code css sur chaque page, donc préférer la deuxième solution qui consiste à directement faire appel à la feuille de style, comme ci dessous :
<link type=”text/css“ rel=”stylesheet“ href=”btpush.css“> — le “href ” coïncide evidemment au chemin de notre fichier css
Maintenant il nous faut insérer le code nécessaire pour afficher notre bouton et son effet de RollOver dans la page html :
<a class=”pushbtmin“ alt=”texte qui s’affiche au survol du bouton“ target=”_blank“ href=”http://www.masta64.deviantart.com“>
Vous pouvez avoir un aperçu du résultat en cliquant ici, et vous pouvez télécharger les fichier source en cliquant ici !!!
Ce billet vous a plu ?
