Tuto pour le générateur de boutons en relief et roll over

Publié le par nessa

Suite à l'article script sans java script pour faire des roll over d'image  au survol d'image où je vous expliquais comment changer n'importe quelle image

au survol de votre pointeur voici un super générateur avec lequel vous allez faire des boutons en relief et un roll over

Allez sur le site  http://fr.cooltext.com/ 

 

Pour  cet exemple j'ai  choisis le design "hippie"

Tapez votre texte , nom de rubrique .... en dessous de "Text"

Vous obtenez  cette page çi-dessous 

Maintenant il faut  modifier votre bouton suivant l'image çi-dessous.

Lorsque vous aurez modifié selon vos désirs le bouton, la dernière étape est celle en  bas à droite sur l'image çi-dessus "other", vous allez choisir l'effet que donnera le roll over au survol du bouton; puis vous  cliquez sur "render Button"

´`·.·´`´`·.·´`´`·.·´`´`·.·´`

On obtient 3 images voir image çi-dessous :si vous n'êtes pas satisfait, cliquez sur "modifier ce logo" en bas à droite.

je vous conseille d'enregistrez les images et de ne pas télécharger (risques de virus) en cliquant droit (puis cliquer  "enregistrez l'image sous ") et de nommer les imagespuis soit vous hébergez vos images sur un hébergeur tel que imageshack soit vous rangez ces images dans vos documents pour récupérer les urls (adresse des images).

tuto-bouton-roll-over.jpg

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 



Attention ces images sont temporaires

au bout de quelques heures elles vont disparaitre

d'où l'intérêt de les enregistrer ...

voici mes 2 images 

clic-ici-1.png

 

clic-ici-2-au-survol.png

et voici leurs adresses urls respectives

http://idata.over-blog.com/2/41/88/79/aide-ob/clic-ici-1.png

http://idata.over-blog.com/2/41/88/79/aide-ob/clic-ici-2-au-survol.png

(pour les récupérer je suis passée en mode html  et  j'ai fait un copié-collé)

´`·.·´`´`·.·´`´`·.·´`´`·.·´`

puis je remplace ces urls dans le script çi-dessous 

<img  src="url logo 1" onmouseover="this.src='url logo 2 au survol';" onmouseout="this.src=''url logo 1;" />

ce qui donne 

<img  src="http://idata.over-blog.com/2/41/88/79/aide-ob/clic-ici-1.png" onmouseover="this.src='http://idata.over-blog.com/2/41/88/79/aide-ob/clic-ici-2-au-survol.png';" onmouseout="this.src='http://idata.over-blog.com/2/41/88/79/aide-ob/clic-ici-1.png';" />

 je copie le script çi-dessus et je le  colle en mode source html ce qui donne 
 

Vous pouvez tester  en survolant l'image si vous n'observez pas d'effet il est peut être temps de mettre à jour votre navigateur ...

Après il suffit juste de rajouter un lien comme n'importe quelle image ...

allez cliquez maintenant  si vous voulez rigolez un peu 

Partager cet article

Commenter cet article

Isa 19/04/2012 22:32

oh bah ton lien est plus sympa que le mien !!!!
bises.

Soulef amour de cuisine 04/12/2010 22:18



merci ma chere pour ce magnifique tuto, ca m'a beaucoup aider a bien arranger mes bouttons, gros bisous tu es un amour



Ava 04/10/2010 23:16


eh bien dis donc, tu ne postes plus beaucoup d'articles, tu fais la grêve sur le tas !
Ils ne sont même pas aimables au forum technique : c'est bien du piratage... greuh !
Ce n'est qu'un blog : bien obligée de faire la "philosophe".. c'est fou. bonne nuit !


Helliot 04/10/2010 15:12


au boulot je ne peux pas cliquer sur tes images marquées clic


Miangaly 04/10/2010 12:25


On peut dire que tu as un très joli blog ! C'est fou ce que tu connais comme trucs et astuces on dirait !
Je te souhaite une belle semaine !


dalila 04/10/2010 01:25


slt nessa,un peti coucou,bon lundi ma chere,bizzzz


mamalilou 03/10/2010 22:54


ah bah oui, pour sûr, ça donne la pêche le chat qui rit!!!
doux bisous et belle semaine à toi


Ava 03/10/2010 22:48


CLIC, CLIC, ayé le modo a compris son erreur sur mon message pour le bug, il croyait qu'il s'agissait encore de la même histoire ! nous allons attendre maintenant le diagnostic.
J'ai la fleme de faire tes petits clics et pourtant, cela le fait ! bonne soirée


Cl@ude 03/10/2010 18:49


QU'EST CE QUE TU AS FAIS????
bizarre ta fenêtre, c'est pas terrible je trouve avec les émoticones en bas ????
bon chacun son truc :010:


cathy 03/10/2010 14:26


Bon alors je ne sais pas ou tu installes le script moi perso dans le module qui se trouve tout en haut je crois me souvenir La barre Ob dans l'html
la je vais manger je vois ca après


fanfan 03/10/2010 13:44


Pour moi, c'est presque du chinois!!
Je n'ai pas la patience pour faire tout cela !
Le site toutimages est vraiment dangereux! Heureusement que je n'y suis jamais allée
Bon dimanche; bises


CaThy 03/10/2010 12:32


Coucou!!
Alors je t'envoie le code de la 3ème bannière















Pour ce qui est du lien de lali je ne vois pas ou il se situe alors si tu pouvais faire une capture d'écran et de m'envoyer son url je verrais ce que je peux te faire...
Bisous
Cathy


Nettoue 03/10/2010 12:25


je veux parler du lien que tu laisses avec ton commentaire. et par lequel je viens habituellement chez-toi !Et aussi de celui de mes liens amis.
On me répond ce blog n'existe pas ! On doit le dire à d'autres aussi ma douce et tu devrais vérifier...
Bisous et mon dimanche

Il me faut donc te chercher par Google. Cela fait deux ou trois jours.


thierry042 03/10/2010 11:12


En ce dimanche je passe vous souhaiter une très bonne journée ensoleillé et un grand BONJOUR
très intéressant j'aime bien la suite le chat ?


annak 03/10/2010 10:49


Bonjour Nessa :)
Pour ton pb de fenêtre commentaire, essaye de rajouter
.diablog fieldset p{display:none;}
et de modifier ainsi cette ligne :
.diablog {padding-bottom:300px!important;background:url(http://idata.over-blog.com/2/41/88/79/aide-ob/BLe-smiley.jpg);background-position:bottom center;background-repeat:no-repeat;}


Monazimba 03/10/2010 10:41


Hellooo Nessa, un ptit air d'été indien ce matin ds ma savane j'espère que ds ta jolie country aussi... bon dimanche :) bisous Mona


cricket1513 03/10/2010 09:50


j'essaierai de le faire
si j'ai un peu de temps
pas trop le temps de me pencher dessus
mais c'est toujours très bien expliqué ;)
gros bisous
B
O
N
DI
MAN
CHE
Christ’ailes


tatarinette:0071: 03/10/2010 09:30


Bonjour ma chère Nessa... Quand je disais que over se fout de nous!!!!!Un problème qu'ils ont préférer ignorer!!!!Alors a quoi sert le forum???? Abérant!!!le vent du sud souffle bien fort ici..la
pluie va arriver..mais je vais profiter du soleil..et d'une hausse de température ce dimanche..parce que demain..le parapluie sera de rigueur!!!!Bisous et rès bon dimanche..


Kelly 03/10/2010 08:03


beaucoup de temps a passer pour préparer cet article
Hier ,un peu moins de pluie, pas trop froid et du soleil.
*, je te souhaite un très bon dimanche


Sonya972 02/10/2010 23:07


c'est super intéressant
ces petites astuces sont les bienvenues
je te souhaite un très bon weekend
bisous


☼♥ Lajemy ♥♪ 02/10/2010 23:00


Merci pour le tuto même si là c'est même pas la peine de songer à essayer de changer quoi que ce soit sur le blog tant j'ai de temps à y consacrer lol ! gros bisous


Chaudronnette 02/10/2010 21:30


sympa ce générateur de boutons
bis chaudronnette


tatarinette:0071: 02/10/2010 19:52


Bonsoir Nessa..Super interressant ton article..je vais le potasser demain..la pluie arrive donc pas de balade!!!Pour l'analyse anti virus j'ai un module complémentaire d'analyse de liens qui est
visible dans dans ma barre outils.Je peux cliquer dessus et analyser le lien..mais je n'ai pas de réponse immédiate..Karspeski reçoit l'info..si je peux dire.. et si je vais sur un site a risque
j'ai une alerte rouge..ça m'arrive souvent quand je cherche des images sur des blogs centerblog.Toujours est il que j'ai fait une analyse complète de l'ordinateur..rien a signaler!
J'ai eu un module de Mac Affee une fois..site advistor..pour les recherches c'était super..je sais qu'il est gratuit mais je ne le retrouve plus..Tous les sites de confiance sont marqués en vert,
en rouge pour les risques et en jaune pour ceux inconnus..
Je récupèr de ma grosse semaine..je suis capout..out of order!!!!
Bisous Nessa..a demain!!
PS; Pour Criket je vois que le virus se propage!!!


PEARL 02/10/2010 19:45


Bonsoir Nessa
Tu as toujours de bonnes idées à nous proposer, merci du partage et passe une très bonne soirée. je t'ai envoyé un sos par mail privé lol!! bisous* et douce nuit ma fée.


Ava 02/10/2010 18:45


re-coucou : je trouve que les personnes du forum technique ne sont pas réactives face au problème que je traverse.
C'est bien la peine d'avoir un abonnement premium. Je ne sais si je dois réinstaller ou non les articles... quel cauchemar !
quand on voit tout le travail pour mettre au point un blog, cela dégoûte, on a besoin de sécurité.
bisous


Nettoue 02/10/2010 18:19


Un bisous et une bonne soirée nessa. Tes liens ne fonctionne pas, j'ai du remonter loin en arrière. As-tu un problème .
Je t'embrasse ma belle et bon dimanche


mentale 02/10/2010 17:47


Toutoune va de mieux en mieux, d'heures en heures!!

Merci pour tes paroles réconfortantes et

mon coucou du jour!


soakette la sardine 02/10/2010 16:37


oh trop classe ce tuto !!!!!


chatbada :0075: 02/10/2010 16:05


Coucou ma Belle ,
Je suis désolée par ce qui t'arrive ... j'espère que tu réussiras à avoir gain de cause ... l doit bien y avoir des preuvres tout de même ... tiens moi au courant ...
Tu vis seule avec ton fils ? Si tu me juges trop indiscrète ,je comprendrai ...
Ton article est bien intéressant ...mais comme , je ne parle pas l'informatique ...j'ai du mal à tout saisir ...tu m'connais désormais ...(rire) ...
Je vais faire attention pour l'histoire du virus toutimage ... Merci .
Bon après-midi et bon dimanche pour demain ...
Bon courage !
Je t'embrasse .


C@TiMiNi_60 02/10/2010 12:58


Bon j'en ai fait un nouveau, mais bon ca n'ira pas car il est beaucoup trop coloré pour aller avec ton fond de blog
il n'apparait pas dans sa totalité car je l'ai fait a la largeur du tien et mon espace blog est moins large j'en ai fait avec et sans les petites étoiles
Ce qui serait bien en faites c'est que tu me donnes les éléments que tu voudrais dedans
Viens jeter un oeil juste pour me dire ce que tu en penses
le tout dernier est le plus simple et le moins lourd!!!


Ava 02/10/2010 12:04


ce n'est pas le moment que je fasse joujou, j'ai un gros bu sur mon blog ! et l'équipe technique semble toujours aussi peu réactive sur overblog.
bisous


bernadette 02/10/2010 11:42


re re coucou Nessa , mon code fonctionne , il court LOL
bisous
bernadette


bernadette 02/10/2010 11:38


re kikou Nessa
teléphone moi , je te donne mon mot de passe pour le code
là je pense que ça pourrait marcher !!!
bisous
bernadette


:0010: Krio 02/10/2010 09:44


un coucou pour profiter de tes astuces !
je te souhaite de passer un excellent week end !
bises


LADY MARIANNE 02/10/2010 09:33


bonjour NESSA
interressant - ce serait bien pour écrire un com etc
mais bien complexe comme manip
bon week-end bises Lady Marianne


cricket1513 02/10/2010 08:36


et un zoli oiseau
qui se met

au survol.. à la place du papillon .

bon j'espère avoir résolu le problème avec le message que vous avez eu toi et fathia et apparemment Eliane aussi puisqu'elle m'a mis ce matin "chouette ton blog est clean" .
J'ai viré le calendrier de tout images.
J'avais vu tes articles dessus pour les saints etc.
mais je ne savais mm plus que j'avais pris le calendrier là bas.
J'ai eu peur d'avoir pris mes boutons que j'aodre; mais non ouf !!
! je préfére ça.
gros bisous et merci de m'avoir également prévenue du problème.
C'est ça vers 20h j'ai dû supprimer juste avant après avoir lu le message de fathia.
bisous et bon samedi
nous chez papy
christelle


Bienvenue chez "gégouska" 02/10/2010 08:01


Je viens te souhaiter un bon week end gros bisous


Sancie 02/10/2010 07:55


Merci pour ce tuto.
Passe un très bon samedi
Gros bisous


Kelly 02/10/2010 07:41


de belles explications , avec ça plus d'excuses pour ne pas avoir de bels effets,
** bonne journée, nous c'est avec la pluie, il faut après tout


bernadette 02/10/2010 07:13


coucou Nessa , impossible de t'envoyer le code , tout me revient , je te l'ai téléphoner , mais je vois que tu n'as pas reçu non plus
alors , je te le met ici
38BEE629
voilà ma belle ,
j'avoue ne pas trop avoir compris pour le bouton , mais c'est pas grave
bonne journée
bisous
bernadette