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

Repost0

Commenter cet article

I
oh bah ton lien est plus sympa que le mien !!!!<br /> bises.
Répondre
S
<br /> <br /> merci ma chere pour ce magnifique tuto, ca m'a beaucoup aider a bien arranger mes bouttons, gros bisous tu es un amour<br /> <br /> <br /> <br />
Répondre
A
<br /> eh bien dis donc, tu ne postes plus beaucoup d'articles, tu fais la grêve sur le tas !<br /> Ils ne sont même pas aimables au forum technique : c'est bien du piratage... greuh !<br /> Ce n'est qu'un blog : bien obligée de faire la "philosophe".. c'est fou. bonne nuit !<br /> <br /> <br />
Répondre
H
<br /> au boulot je ne peux pas cliquer sur tes images marquées clic<br /> <br /> <br />
Répondre
M
<br /> On peut dire que tu as un très joli blog ! C'est fou ce que tu connais comme trucs et astuces on dirait !<br /> Je te souhaite une belle semaine !<br /> <br /> <br />
Répondre
D
<br /> slt nessa,un peti coucou,bon lundi ma chere,bizzzz<br /> <br /> <br />
Répondre
M
<br /> ah bah oui, pour sûr, ça donne la pêche le chat qui rit!!!<br /> doux bisous et belle semaine à toi<br /> <br /> <br />
Répondre
A
<br /> 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.<br /> J'ai la fleme de faire tes petits clics et pourtant, cela le fait ! bonne soirée<br /> <br /> <br />
Répondre
C
<br /> QU'EST CE QUE TU AS FAIS????<br /> bizarre ta fenêtre, c'est pas terrible je trouve avec les émoticones en bas ????<br /> bon chacun son truc :010:<br /> <br /> <br />
Répondre
C
<br /> 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<br /> la je vais manger je vois ca après<br /> <br /> <br />
Répondre
F
<br /> Pour moi, c'est presque du chinois!!<br /> Je n'ai pas la patience pour faire tout cela !<br /> Le site toutimages est vraiment dangereux! Heureusement que je n'y suis jamais allée<br /> Bon dimanche; bises<br /> <br /> <br />
Répondre
C
<br /> Coucou!!<br /> Alors je t'envoie le code de la 3ème bannière<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> 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...<br /> Bisous<br /> Cathy<br /> <br /> <br />
Répondre
N
<br /> 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.<br /> On me répond ce blog n'existe pas ! On doit le dire à d'autres aussi ma douce et tu devrais vérifier...<br /> Bisous et mon dimanche<br /> <br /> Il me faut donc te chercher par Google. Cela fait deux ou trois jours.<br /> <br /> <br />
Répondre
T
<br /> En ce dimanche je passe vous souhaiter une très bonne journée ensoleillé et un grand BONJOUR<br /> très intéressant j'aime bien la suite le chat ?<br /> <br /> <br />
Répondre
A
<br /> Bonjour Nessa :)<br /> Pour ton pb de fenêtre commentaire, essaye de rajouter<br /> .diablog fieldset p{display:none;}<br /> et de modifier ainsi cette ligne :<br /> .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;}<br /> <br /> <br />
Répondre
M
<br /> 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<br /> <br /> <br />
Répondre
C
<br /> j'essaierai de le faire<br /> si j'ai un peu de temps<br /> pas trop le temps de me pencher dessus<br /> mais c'est toujours très bien expliqué ;)<br /> gros bisous<br /> B<br /> O<br /> N<br /> DI<br /> MAN<br /> CHE<br /> Christ’ailes<br /> <br /> <br />
Répondre
T
<br /> 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<br /> 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..<br /> <br /> <br />
Répondre
K
<br /> beaucoup de temps a passer pour préparer cet article<br /> Hier ,un peu moins de pluie, pas trop froid et du soleil.<br /> *, je te souhaite un très bon dimanche<br /> <br /> <br />
Répondre
S
<br /> c'est super intéressant<br /> ces petites astuces sont les bienvenues<br /> je te souhaite un très bon weekend<br /> bisous<br /> <br /> <br />
Répondre
<br /> 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<br /> <br /> <br />
Répondre
C
<br /> sympa ce générateur de boutons<br /> bis chaudronnette<br /> <br /> <br />
Répondre
T
<br /> 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<br /> 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<br /> 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!<br /> 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,<br /> en rouge pour les risques et en jaune pour ceux inconnus..<br /> Je récupèr de ma grosse semaine..je suis capout..out of order!!!!<br /> Bisous Nessa..a demain!!<br /> PS; Pour Criket je vois que le virus se propage!!!<br /> <br /> <br />
Répondre
P
<br /> Bonsoir Nessa<br /> 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.<br /> <br /> <br />
Répondre
A
<br /> re-coucou : je trouve que les personnes du forum technique ne sont pas réactives face au problème que je traverse.<br /> C'est bien la peine d'avoir un abonnement premium. Je ne sais si je dois réinstaller ou non les articles... quel cauchemar !<br /> quand on voit tout le travail pour mettre au point un blog, cela dégoûte, on a besoin de sécurité.<br /> bisous<br /> <br /> <br />
Répondre
N
<br /> 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 .<br /> Je t'embrasse ma belle et bon dimanche<br /> <br /> <br />
Répondre
M
<br /> Toutoune va de mieux en mieux, d'heures en heures!!<br /> <br /> Merci pour tes paroles réconfortantes et<br /> <br /> mon coucou du jour!<br /> <br /> <br />
Répondre
S
<br /> oh trop classe ce tuto !!!!!<br /> <br /> <br />
Répondre
C
<br /> Coucou ma Belle ,<br /> 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 ...<br /> Tu vis seule avec ton fils ? Si tu me juges trop indiscrète ,je comprendrai ...<br /> 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) ...<br /> Je vais faire attention pour l'histoire du virus toutimage ... Merci .<br /> Bon après-midi et bon dimanche pour demain ...<br /> Bon courage !<br /> Je t'embrasse .<br /> <br /> <br />
Répondre
C
<br /> 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<br /> 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<br /> Ce qui serait bien en faites c'est que tu me donnes les éléments que tu voudrais dedans<br /> Viens jeter un oeil juste pour me dire ce que tu en penses<br /> le tout dernier est le plus simple et le moins lourd!!!<br /> <br /> <br />
Répondre
A
<br /> 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.<br /> bisous<br /> <br /> <br />
Répondre
B
<br /> re re coucou Nessa , mon code fonctionne , il court LOL<br /> bisous<br /> bernadette<br /> <br /> <br />
Répondre
B
<br /> re kikou Nessa<br /> teléphone moi , je te donne mon mot de passe pour le code<br /> là je pense que ça pourrait marcher !!!<br /> bisous<br /> bernadette<br /> <br /> <br />
Répondre
:
<br /> un coucou pour profiter de tes astuces !<br /> je te souhaite de passer un excellent week end !<br /> bises<br /> <br /> <br />
Répondre
L
<br /> bonjour NESSA<br /> interressant - ce serait bien pour écrire un com etc<br /> mais bien complexe comme manip<br /> bon week-end bises Lady Marianne<br /> <br /> <br />
Répondre
C
<br /> et un zoli oiseau<br /> qui se met<br /> <br /> au survol.. à la place du papillon .<br /> <br /> 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" .<br /> J'ai viré le calendrier de tout images.<br /> J'avais vu tes articles dessus pour les saints etc.<br /> mais je ne savais mm plus que j'avais pris le calendrier là bas.<br /> J'ai eu peur d'avoir pris mes boutons que j'aodre; mais non ouf !!<br /> ! je préfére ça.<br /> gros bisous et merci de m'avoir également prévenue du problème.<br /> C'est ça vers 20h j'ai dû supprimer juste avant après avoir lu le message de fathia.<br /> bisous et bon samedi<br /> nous chez papy<br /> christelle<br /> <br /> <br />
Répondre
B
<br /> Je viens te souhaiter un bon week end gros bisous<br /> <br /> <br />
Répondre
S
<br /> Merci pour ce tuto.<br /> Passe un très bon samedi<br /> Gros bisous<br /> <br /> <br />
Répondre
K
<br /> de belles explications , avec ça plus d'excuses pour ne pas avoir de bels effets,<br /> ** bonne journée, nous c'est avec la pluie, il faut après tout<br /> <br /> <br />
Répondre
B
<br /> 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<br /> alors , je te le met ici<br /> 38BEE629<br /> voilà ma belle ,<br /> j'avoue ne pas trop avoir compris pour le bouton , mais c'est pas grave<br /> bonne journée<br /> bisous<br /> bernadette<br /> <br /> <br />
Répondre