Création d'un effet "Rollover" pour des boutons (par exemple) [Archives]

Voir la version complète : Création d'un effet "Rollover" pour des boutons (par exemple)

Allan

29/01/2006, 15h31

"Créer un effet "Rollover" pour des boutons"
(par exemple)

C'est très simple, ce tuto vous aidera à créer un effet dit "Rollerver" ou plus souvent appeler "OnmouseOver" (Qui signifie: Au passage de la souris) qui change d'image au passage de la souris (voir la barre du dessus sur ce forum)

Aller, on commence ;)

Pour procéder, nous allons utiliser un javascript (merci à son auteur: Chris Poole, voici le lien (http://www.dynamicdrive.com/dynamicindex15/domroll.htm) ou l'on peut trouver son script en libre téléchargement)

Commencons par l'intégration de son script dans le template de vBulletin.

1- Dans le template "header", tous au début, ajouter le script:

<script type="text/javascript">

/************************************************** **
* DOM Image rollover:
* by Chris Poole
* http://chrispoole.com
* Script featured on http://www.dynamicdrive.com
* Keep this notice intact to use it :-)
************************************************** **/

function init() {
if (!document.getElementById) return
var imgOriginSrc;
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr.getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].onmouseover = function() {
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
}
imgarr[i].onmouseout = function() {
this.setAttribute('src',imgOriginSrc)
}
}
}
}
onload=init;

</script>
<script language="javascript">

</script>

[I]ATTENTION:
Dans ce script, vous avez pu remarquer ces lignes (ces 4 lignes représente un bouton):

image1on = new Image();
image1on.src = "images/dossier-de-votre-style/misc/votre-image_over.gif";
image1off = new Image();
image1off.src = "images/dossier-de-votre-style/misc/votre-image.gif";

N'oublier pas de remplacer le chemin et le nom de vos images, l'image avec l'extension "_over" sera celle qui sera vu lors du passage de la souris !

Notez que: Vous pouvez ajouter d'autre bouton (images), il suffit d'ajouter les 4 lignes de codes a celle déja présente en prenant soin de remplacer le nom et le chemin de vos images.

2 - Ajouter ensuite vos images dans le templates voulu (souvent dans le template "Navbar")

Pour mon exemple, j'ai crée une barre (voir en haut du forum) ou j'ai ajouter mes images.

Cette partie est délicate pour les gens qui débute car il vous faut trouver l'endroit (ou le créer) ou mettre vos images. Une fois cela trouver, il vous suffit d'ajouter le code suivant:

<a href="http://www.votre-site.com/forum/chemin-de-la-page-qui-sera-ouverte-par-le-bouton" onmouseover="changeimages('image1', 'image1on')" onmouseout="changeimages('image1', 'image1off')"><img src="$stylevar/blabla.gif" name="image1" border="0" id="image1"></a>

[I]ATTENTION: Remplacer le chemin de la page ("http://www.votre-site.com/forum/chemin-de-la-page-qui-sera-ouverte-par-le-bouton") qui sera ouvert lors du clique sur le bouton ainsi que le nom de votre image ($stylevar/nom-de-l-image.gif)-(celle ou la souris ne passe pas !)

[I]Noter que: Vous remarquerez que le nom "image1" se répète souvent, cela correspond à l'ajout des images dans le script vue au dessus. Si vous avez ajouter d'autres boutons, le chiffre doit correspondre aux lignes de l'image ajouter dans le script du template "header"

Exemple:
Partie du script dans le template "header":

image1on = new Image();
image1on.src = "images/mon-style/misc/blabla_over.gif";
image1off = new Image();
image1off.src = "images/dmon-style/misc/blabla.gif";

Ce qui correspondra a:
Partie du code dans le template "navbar"

<a href="http://www.votre-site.com/forum/chemin-de-la-page-qui-sera-ouverte-par-le-bouton" onmouseover="changeimages('image1', 'image1on')" onmouseout="changeimages('image1', 'image1off')"><img src="$stylevar[imgdir_misc]/blabla.gif" name="image1" border="0" id="image1"></a>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
En gros, si vous ajouter des boutons, il faudra remplacer image1 par image2 et ainsi de suite (et n'oublier pas le chemin et le nom de l'image a changer également)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Voila, le résultat de ceci est visible sur toutes les pages de ce forum. (texte dans la barre bleue changeant quand vous passez la souris dessus) il ne vous reste plus qu'a créer vos images sous Photoshop par exemple)

* Bien sur, vous pouvez adapter des images ou du texte a volonté ;)

Devil

29/01/2006, 18h07

Merci de partager ce script très utile, d'ailleurs c'est celui ci que tu utilise également pour Phylo sur ProStyle :) Très Pratique
Bravo!!

panik

30/01/2006, 00h35

Yes effectivement pour donner quelques effets sympathiques c'est trés sympas........

Rysus

30/10/2006, 04h37

Sympa ce ptit effet

j'adhère

Gaetan

04/05/2007, 09h13

merci pour ce tuto allan,
j'aimerais savoir ou je dois mettre le script si je veux appliquer ceci a tout mon forum et pas seulement dans le header.

parce que si je le met sur chaque template ou je vais l'utiliser il va quand meme se retrouver plusieurs fois sur la page vu qu'il va etre dans le header, dans forumhome, forumdisplay etc ....

je sais pas si c'est clair :s

arroser

16/12/2007, 21h22

"Créer un effet "Rollover" pour des boutons"

C'est très simple, ce tuto vous aidera à créer un effet dit "Rollerver" ou plus souvent appeler "OnmouseOver" (Qui signifie: Au passage de la souris) qui change d'image au passage de la souris (voir la barre du dessus sur ce forum)

Aller, on commence ;)

Pour procéder, nous allons utiliser un javascript pour info, l'effet ROLLOVER sans Javascript, tout en css : http://www.peutetreunereponse.net/article-5551133.html

Allan

16/12/2007, 21h37

pour info, l'effet ROLLOVER sans Javascript, tout en css : http://www.peutetreunereponse.net/article-5551133.html
Merci de l'info, c'est très propre en effet ;)

Sofia

16/12/2007, 21h57

pour info, l'effet ROLLOVER sans Javascript, tout en css : http://www.peutetreunereponse.net/article-5551133.html

Il est assez bien fait le site également. Pas mal de chose intéressantes :)

arroser

31/12/2007, 16h09

pour info, l'effet ROLLOVER sans Javascript, tout en css : http://www.peutetreunereponse.net/article-5551133.html
Merci de l'info, c'est très propre en effet ;)

L'avantage est de n'utiliser que les css sans javascript. Plus rapide, plus léger, sans requête sup.

je l'ai adapté à la prochaine version de mon forum.
voici un petit tuto si besoin :
(à laisser ici ou à séparer)

(ici dans cet exemple, la BARRE DE MENUS fait 55 pixels de haut, à vous d'adpater les valeurs)

J'ai donc créé une unique image de 110 pixels de hauteur, appellée "nav_fondcentre.gif", comprenant les deux état du bouton : survolé (+actif), et normal (+visité), uploadée dans le répertoire /images/misc/
[Voir pièce jointe]
Adaptez les valeurs en pixels dans la feuille de style en fonction de votre image.

Ouvrir : Gestionnaire des styles / modifier les templates / Template navigation Chemin >> Navbar

Trouver tout le code compris entre :



[.../...]



remplacer systématiquement la class ""vbmenu_control" par la class "vbmenu_control_2"
(vous pouvez la nommer comme bon vous semble bien sur)

dans la feuille de style, ajouter :
/* ----------- barre de navigation en haut --------------*/
/* ----------remplace le style vbmenu_control --------- */

.vbmenu_control_2
{
color: #FFFFFF;
font: bold .69em tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
text-align: center;
padding: 0;
white-space: nowrap;
height: 55px; /* --hauteur de la cellule-- */
}

.vbmenu_control_2 a:link, .vbmenu_control_2 a:visited
{
color: #fff; /* --couleur du texte : lien-- */
display: block; /* --transforme la cellule en block cliquable-- */
height: 55px;
line-height: 82px; /* --aligne le texte à l'endroit souhaité-- */
text-decoration: none;
background: url(images/misc/nav_fondcentre.gif) repeat-x;
}

.vbmenu_control_2 a:active, .vbmenu_control_2 a:hover
{
color: #2c1705; /* --couleur du texte actif-survolé-- */
text-decoration: none;
background: url(images/misc/nav_fondcentre.gif) 0 -55px; /* --remonte l'image de la moitié de sa hauteur-- */
}

comme toute la zone de la cellule est devenue cliquable, et plus seulement le texte, il faut supprimer les flèches (Recherche, Menu, éventuellement MGC CHATBOX...)

ouvrir template NAVBAR

trouver :
<td id="navbar_search" class="vbmenu_control_2"><a href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[search]</a> <if condition="$show['quicksearch']"><script type="text/javascript"> vbmenu_register("navbar_search"); </script></if></td>
</if>
<if condition="$show['member']">
<td id="usercptools" class="vbmenu_control_2"><a href="$show[nojs_link]#usercptools" accesskey="3">$vbphrase[quick_links]</a> <script type="text/javascript"> vbmenu_register("usercptools"); </script></td>

remplacer par :
<td id="navbar_search" class="vbmenu_control_2"><a href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[search]</a> <if condition="$show['quicksearch']"><script type="text/javascript"> vbmenu_register("navbar_search","0"); </script></if></td>
</if>
<if condition="$show['member']">
<td id="usercptools" class="vbmenu_control_2"><a href="$show[nojs_link]#usercptools" accesskey="3">$vbphrase[quick_links]</a> <script type="text/javascript"> vbmenu_register("usercptools","0"); </script></td>

=> 2 ajouts d'un "0" dans les 2 javascript.
<script type="text/javascript"> vbmenu_register("usercptools","0"); </script>
et <script type="text/javascript"> vbmenu_register("navbar_search","0"); </script>

______________________________________________
/* ---------------------complément : -------------*/
______________________________________________

Si votre nouvelle barre de menu est haute (environs plus de 30 pixels), vous pouvez avoir un décalage lors de l'ouverture des pop up "menu" et "recherche rapide". Voici comment corriger ce défaut :

Cette class doit être identique à la class vBulletin "vbmenu_popup" (disponible dans le panneau de gestion des styles) mais avec l'ajout d'une marge haute négative (ou positive, ça dépend de votre graphisme)

toujours dans le tempalte NAVBAR, trouver tout le code compris entre :

[..../...] et [..../...]



et remplacer chaque class "vbmenu_popup" par "vbmenu_popup_2"

Dans la feuille de style, ajouter :
/* --- pop up "recherche" et "menu" de la barre de navigation ----*/
/* ---- position haute à adapter à l'emplacement du texte ----- */

.vbmenu_popup_2
{
background: #ece3da;
color: #2c1705;
border: 1px solid #2c1705;
margin-top: -5px; : /* --remonte le pop up de 5 pixels-- */
}
adaptez la valeur de "margin-top: +-XYZpx;" en fonction de vos boutons cliquables et de leur hauteur ainsi que de l'emplacement du texte/lien.

______________________________________________
/* -----------------FIN complément : -------------*/
______________________________________________

Ça a été testé dans les dernières versions de : IE, OPERA, FIREFOX (Windows et Linux), FLOCK, SEAMONKEY, SAFARI pour Windows

Source : d'après Pêur (click) (http://www.peutetreunereponse.net/article-5551133.html)
cette solution a été utilisée dans la dernière version de phpBB3, avec un code un peu différent. Source ici pour ceux qui veulent aller plus loin : http://wellstyled.com/css-nopreload-rollovers.html

CSS POWWAAAAAAAAA .... !!!!! :yahoo:

miniatures attachées = état "normal" / état survolé / image unique du bouton

Grand_manitou

01/01/2008, 00h36

Décidément, j'apprends pleins de choses ce soir.

Merci à tous