-
Img qui suit le curseur
Une image qui suit votre curseur. Un classique en Javascript !!!
Attention, tout de même, aux éventuelles interférences avec d'autres scripts.
Pour voir, rafraichir la page (F5). Excepté I.E
Il vous faudra copier/coller le code ci-dessous, dans un module simple,
et mettre l'image de votre choix (en rouge dans le script) :<script type="text/javascript">// <![CDATA[
/* Image qui suit la souris */
var x = 0;
var y = 0;if (document.getElementById)
{
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = Pos_Souris;
window.onload = Bouge_Image;
}function Pos_Souris(e)
{
x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
}posX = 0;
posY = 0;
anim = true;
oldpos = "http://ekladata.com/nwOR0-ohdQi_hRkMsaLRwjSm3gg/divers-bd-074.gif";function Bouge_Image()
{
if (document.getElementById && anim)
{
posX = posX+(((x-posX)+20)/15);
posY = posY+(((y-posY)+20)/15);
if(posX<x)
newpos='http://ekladata.com/nwOR0-ohdQi_hRkMsaLRwjSm3gg/divers-bd-074.gif';
else
newpos='http://ekladata.com/nwOR0-ohdQi_hRkMsaLRwjSm3gg/divers-bd-074.gif';
if(newpos!=oldpos)
{
document.tete.src=newpos;
oldpos=newpos;
}
document.getElementById("teteronde").style.top = posY+"px";
document.getElementById("teteronde").style.left = posX+"px";
tempo = setTimeout("Bouge_Image()", 15)
}
}if(document.getElementById)
{
document.write('<div id="teteronde" style="position: absolute">');
document.write('<a href="#" onClick="anim=false;document.getElementById(\'teteronde\').style.visibility = \'hidden\';return(false)">');
document.write('<img style="width:50px;" src="http://ekladata.com/nwOR0-ohdQi_hRkMsaLRwjSm3gg/divers-bd-074.gif" style="border:0px" name="tete" alt="Cliquez ici pour faire disparaître" />');
document.write('</a>');
document.write('</div>');
}
// ]]></script>
-
Commentaires
Bonsoir, je voulais savoir comment on peut faire en sorte que l'image ne suive le curseur que sur un article (comme vous l'avez fait sur cet article)… Merci de me répondre, bonne soirée ! :)Bonsoir PapyrockTest,
Merci beaucoup pour le code, tip top !!!
Je vous souhaite une bonne soirée
ChrisBonjour et merci!!!!! ça marche parfaitement sur mon tout nouveau blog, j'ai vu qu'on pouvait aussi changer la taille de l'image! je suis ravie et je joue avec mon image depuis 15 minutes. Passez une excellente soirée!
Pinkre coucou, j'ai fait exactement les mêmes manipulations que "gentille rebelle", sur sa page d accueil, pb je n'ai pas la main pour enregistrer.
je m explique:
Pour mettre un curseur avec trainée etoile, ou pluie par exemple, je copies les codes javascript du site :
http://www.mf2fm.com/rv/dhtmltinkerbell.php
dans un billet HTML, tu l enregistres, et tu as un curseur avec trainée étoile ou pluie ou autre animation sur le blog.
Elklablog a modifié depuis peu, on n a plus la main pour faire des modifications ni pour enregistrer,
Regardes mon blog avec le lien , merci
http://sudiste1359.eklablog.com/coucou, j'ai parcouru votre blog et conseils.
Depuis peu, avec certaines modifications de ELKLABLOG je suppose, je n arrive plus à modifier/enregistrer des codes javascripts en éditant mon accueil HTML , c était sans problème avant, Est ce normal???
Des conseils à me donner??? merci d avance
http://sudiste1359.eklablog.com/@la gentille rebelle
ok...j'ai laissé un com sur "http://lagentillerebelle1.eklablog.com/"
En fait avec ce script, tu peux mettre 2 images. Une pour déplacement gauche et l'autre pour déplacement droite.
Par exemple pour ton blog avec le curseur "2 oiseaux", il y aurait un oiseau volant à gauche pour déplacement gauche,
et un oiseau volant à droite pour déplacement droite.
Exemple ci-dessous avec des yeux qui tournent à droite ou à gauche (F5 pour rafraichir ) voir les url .gif en jaune:<!-- DEBUT DU SCRIPT -->
<script type="text/javascript">
/*
Image qui suit et regarde la souris
http://www.editeurjavascript.com/scripts/scripts_images_1_66.phpSCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/
var x = 0;
var y = 0;if (document.getElementById)
{
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = Pos_Souris;
window.onload = Bouge_Image;
}function Pos_Souris(e)
{
x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
}posX = 0;
posY = 0;
anim = true;
oldpos = "http://www.editeurjavascript.com/img/img_exemples/gauche.gif";function Bouge_Image()
{
if (document.getElementById && anim)
{
posX = posX+(((x-posX)+20)/15);
posY = posY+(((y-posY)+20)/15);
if(posX<x)
newpos='http://www.editeurjavascript.com/img/img_exemples/droite.gif';
else
newpos='http://www.editeurjavascript.com/img/img_exemples/gauche.gif';
if(newpos!=oldpos)
{
document.tete.src=newpos;
oldpos=newpos;
}
document.getElementById("teteronde").style.top = posY+"px";
document.getElementById("teteronde").style.left = posX+"px";
tempo = setTimeout("Bouge_Image()", 15)
}
}if(document.getElementById)
{
document.write('<div id="teteronde" style="position: absolute">');
document.write('<a href="/image-derriere-souris-a58504337#" onClick="anim=false;document.getElementById(\'teteronde\').style.visibility = \'hidden\';return(false)">');
document.write('<img src="http://www.editeurjavascript.com/img/img_exemples/droite.gif" style="border:0px" name="tete" alt="Cliquez ici pour faire disparaître" />');
document.write('</a>');
document.write('</div>');
}
</script>
<!-- FIN DU SCRIPT -->Il me semble t'avoir proposé de placer le script 'img-curseur' dans un module déjà existant, comme ton module ' Formations ', par exemple. Ainsi plus de souci pour cacher le module...
Pour le code 'modifier le footer', effectivement dans un module y a problème.
En attendant pour ajouter du texte (ou image), place ce code dans module existant:<div style="position:absolute;bottom:5px;left:40%;">Mon-texte-ici</div>
coucou Mike ,non le curseur ne marche qu avec le module apparent qui est au basdans le menu de droite et le footer aussi ca ne marche pas dans un module comme je te l ai écris ca ne marche qu un peu et ca revient comme avant,merci encore
Résolu ton pb 'd'img-qui-suit-curseur' ??? Car je vois que tu as rajouté un code pour cacher l'image....
coucou Mike ,me revoici ,excuse moi de te solliciter a nouveau j ai mis le footer dans le module formation mais rien n y fait ca reste un peu tel que je le voudrai puis ca revient comme avant et pour l image qui suit le curseur quand je la met dans un module on la voit plus et tout aussi bien si je fais un css avec le numero du module pour qu il devienne transparent ,pourrai tu m aider s il te plait a avoir le curseur sans le module,merci Mike,bonne journée
merci encore Mike ,j ai choisi que le curseur pour éviter le décalage de page en ajoutant les flèches,mais je garde tes codes ,je pourrai m en servir prochainement
merci beaucoup pour tout tes conseils et tes codes
bonne journée
Ce décalage provient de 'image-qui-suit-le-curseur' qui est située à droite du curseur.
On peut placer les flèches 'haut-bas' à gauche en remplaçant dans le code CSS:right: -10px; par left: -10px;
Et pour ne pas chevaucher le menu de gauche (facultatif), on réduit la largeur de la page:
Apparence > Modifier le thème > Format blog > Largeur page > 90%
ou en css:#background {width: 90%;}
Merci Mike,j ai juste un souci avec la flèche du bas lorsque je clique la page se décale sur la gauche,ensuite je me demande si je dois pas réviser la largeur du blog pour pouvoir caser les flèches ,donc avant de créer les miennesj aimerai connaitre ton avis ,merci encore de ton aide ,bonne soirée
Pour l'image qui suit le curseur, j'ai visité ton blog > ok > ras !!!
Pour les flèches retour Haut/Bas, voici les codes :
Code html:<!-------- Flèches Haut-Bas --------------->
<div class="hautbas"><a title="Haut" href="#top"><img class="imghaut" src="http://ekladata.com/t7WlBCqQCb7BPYg-g_5Us1zGckI/fleche-bleu-en-hausse-de-icone-6442-96.png" alt="" /><br /></a> <a title="Bas" href="#footer"><img class="imgbas" src="http://data0.eklablog.com/papyrocktest/perso/fleche-bleu-en-baisse-de-icone-7812-96.png" alt="" /></a></div>
Code CSS:
.hautbas {
position: fixed;
right: -10px;
top: 340px;
display: block;
z-index: 99;
transition: 1s;
}
.hautbas img {
width:60px;
}
.imghaut {
opacity: 0.3;
filter:alpha(opacity=50);/* For IE8 and earlier */
box-shadow:0px 0px 0px 0px;
}
.imgbas {
opacity: 0.3;
filter:alpha(opacity=50); /* For IE8 and earlier */
box-shadow:0px 0px 0px 0px;
}
.imghaut:hover {
opacity: 1;
filter:alpha(opacity=100); /* For IE8 and earlier */
-webkit-transition:opacity 1s;
-moz-transition: 1s;
transition: 1s;
}
.imgbas:hover {
opacity: 1;
filter:alpha(opacity=100); /* For IE8 and earlier */
-webkit-transition:opacity 1s;
-moz-transition: 1s;
transition: 1s;
}coucou mike ,ce que je ne comprenais pas c est pourquoi le curseur n allait pas en pleine page ,en étudiant ton code je vois souvent Top et left ,est ce qu il serait possible de l avoir sur tout le blog ?merci Mike de ton aide,et aussi je n arrive pas a accéder a ton lien flèche du haut et du bas pour voir ton code ,j ai une fenetre qui s ouvre en me disant qu il y a une erreur,merci encore
Bah ....y a qu' à pourtant ..!!!
Le javascript doit être activé sur ton blog.
Copier l'URL du curseur (adresse de stockage d'une image), ex avec le code:
http://data0.eklablog.com/gege95/perso/divers_bd_074.gif
ceci est l'url de mon image curseur.
Cette url-image, faut l'insérer à la place des url en rouge dans le code.
Dans un module simple, en mode édition article (html)...
Rafraichir la page (F5) et....c'est tout !!!coucou Mike ,je viens regarder tes conseils surtout pour le curseur,j y arrive pasa bientot,
Si c'est juste pour écouter en boucle le même morceau, voici un exemple :
<object id="dewplayer" width="20" height="20" name="dewplayer" data="http://ekladata.com/v8tejSqezr-T9_7M2T0e4nRQ_Ng/dewplayer-mini.swf" type="application/x-shockwave-flash"><param name="allowScriptAccess" value="never" /><param name="wmode" value="transparent" /><param name="flashvars" value="mp3=http://ekladata.com/papyrocktest.eklablog.com/perso/audio/yonverter%20-vie1wa88moa-.mp3&autostart=1&autoreplay=1" /><param name="src" value="http://ekladata.com/v8tejSqezr-T9_7M2T0e4nRQ_Ng/dewplayer-mini.swf" /></object>
(la longueur "width" est à l'origine = à 200px > width="200")
Merci beaucoup !! ^^
juste une dernière question après je vous laisse tranqu'il .... ^^"
Quand je laisse ma sourie sur l'un de vos visiteur (sans cliquer) le nom du visiteur a changer et le fond est transparent et arrondi j'adore ^^
pourriez vous m'expliquer comment vous avez fait ?
merci ^^
les 2 coins supérieurs sont des images et non des bords....
.window_handle_content {
border-radius: 20px 20px 0px 0px;
}.window_handle_left {
display: none;
}.window_handle_right {
display: none;
}Merci beaucoup pour le code css pour les arrodisement des commentaire ^^
le code a fonctionner ^^
Savez vous le code CSS pour arrondir la fenêtre des visiteur s'il vous plait (pour arrondir les coin en haut a droite et a gauche) ? ^^"
desoler pour toute les question et de vous embèter ^^"
/*--------------- Design commentaires -----------*/
.comment_normal,.comment_admin {
width: 99%;
border: 2px solid #AAA;
border-radius: 25px;
margin-bottom: 10px;
margin-top: 10px;
}
.comment_normal img,.comment_admin img{
border-radius: 15px;
}J'ai déja fait une demande mais je n'ai eu aucune réponce je pense que je vais refaire une demande merci pour le lien ^^
maintenant il faut que j'instale de la musique sur mon blogs ^^
mais je ne comprend pas très bien comment fonctionne deezer et je n'arrive pas du tout a arrondir les fenetre d'information de mes visiteur, arrondir les fenetre des commentair .....
Comment avez vous fait s'il vous plait ?
Salut!
Il faut faire une demande d'activation de javascript, au support ici.
(javascript est un langage informatique spécial internet)
Ajouter un commentaire
bonjour papy merci ton aide jai un petit soucis je jete une bouteille a la mer
je recheche une a une pluie objeys avec mes masque afrique bleu sur ma page de blog
j ai essaye impossible ma maman mis la neige mais cest pas que je veux
voici le modele merci beaucoup de votre aide bonne journee et bon weekend amitie