Code pour texte qui suit le curseur

Fermé
nicolas123g Messages postés 2 Date d'inscription samedi 18 janvier 2014 Statut Membre Dernière intervention 18 janvier 2014 - 18 janv. 2014 à 21:31
 mohamedlevy - 18 janv. 2014 à 23:20
Bonjour tout le monde,
J'essaie desespérement de modifier le code html de mon tumblr afin d'y ajouter une petite phrase qui suivrait la souris. J'ai essayé avec différents codes trouvés sur internet. A chaque fois, cela fonctionne dans l'aperçu mais une fois sur le site, les lettres de la phrase semblent "coincées" les unes sur les autres dans le coin supérieur gauche. Elles ne bougent pas.

Je suis là-dessus de puis plusieurs jours donc si quelqu'un avait une idée de ce que j'ai mal fait, cela m'aiderait beaucoup. C'est peut-être simplement une histoire de mauvais emplacement ou autre. Voici donc le code complet du tumblr + les code en question tel que je l'ai inséré (en gras ici). Merci.


<html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<link href='http://static.tumblr.com/twte3d7/DHIm5wmgi/stylesheet.css' rel='stylesheet' type='text/css'>

<!--

.d8888b. 888b d888 8888888b. 888
d88P Y88b 8888b d8888 888 Y88b 888
Y88b. 88888b.d88888 888 888 888
"Y888b. 888Y88888P888 888 d88P 888
"Y88b. 888 Y888P 888 8888888P" 888
"888 888 Y8P 888 888 888
Y88b d88P 888 " 888 888 888
"Y8888P" 888 888 888 88888888

Disassemble 3.0 Theme for Tumblr by Georgia Harris
www.smpldesign.co.uk

-->

<!-- DEFAULT COLORS -->
<meta name="color:Background" content="#ffffff"/>
<meta name="color:Text" content="#000000"/>
<meta name="color:Video Corner Fold" content="red">
<meta name="font:Font" content="'BrownBold'">
<meta name="if:Show Captions" content="0"/>
<meta name="if:Uppercase Links" content="0">
<meta name="if:Fade On Hover" content="0">
<meta name="if:Show Tags on Index Page" content="0">


<style type="text/css">
body {
background-color:{color:Background};
font-family:Arial;
font-weight:light;
color:{color:Text};
font-size:13.5px;
line-height:18px;
}
a {
padding-bottom:0px;
color:{color:Text};
text-decoration:none;
border-bottom:0px;
}
img {
border: none;
border : 0;
outline:none;
}
a img {
outline: none;
}
iframe#tumblr_controls {
display:none;
}
#wrapper {
{block:PermalinkPage}
width:580px;
{/block:PermalinkPage}
position:relative;
margin: 50px auto;
}
#post {
padding:40px;
}
#post img {
width:100%;
}
#post img:hover {
{block:IndexPage}
{block:IfFadeOnHover}
opacity:0.5;
{/block:IfFadeOnHover}
{/block:IndexPage}
}
#post embed, #post iframe {
width:100% !important;
}
#post .photoset a:first-child {
display:block !important;
border:0 !important;
padding:0 !important;
}
#post .photoset a {
display:none;
}
.title {
width:100%;
text-align:center;
margin:auto;
position:fixed;
top:20px;
z-index:5000;
}
.follow {
position:fixed;
top:20px;
right:20px;
z-index:5000;
}
.archive {
position:fixed;
top:20px;
left:20px;
z-index:5000;
}
.message {
position:fixed;
bottom:20px;
left:20px;
z-index:5000;
}
.random {
position:fixed;
bottom:20px;
right:20px;
z-index:5000;
}
#toTop {
width:100%;
text-align:center;
margin:auto;
z-index:5000;
position:fixed;
display:none;
bottom:20px;
cursor:pointer;
}
.player {
background:#000;
}
ul.chat {
list-style-type:none;
padding:0;
margin:0;
}
#infscr-loading {
display:none !important;
}

.corner {
top:6px;
right:40px;
position:absolute;
padding:1em 1.5em;
margin:2em auto;
color:#fff;
overflow:hidden;
z-index:4000;
}
.corner:before {
content:"";
position:absolute;
top:0px;
right:0px;
border-width:0 25px 25px 0;
border-style:solid;
border-color:#fff #fff {color:Video Corner Fold} {color:Video Corner Fold};
background:#fff;
display:block; width:0; /* Firefox 3.0 damage limitation */
}
{CustomCSS}

</style>

<style>
.spanstyle {
position:absolute;
visibility:visible;
top:-50px;
font-size:8pt;
font-family:Arial;
font-weight:bold;
color:#00ffe7;
}
</style>
<script language=JavaScript>

/*

Cursor Trailor Text- By Peter Gehrig (http://www.24fun.ch/

SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
URL du script : http://www.editeurjavascript.com/scripts/scripts_textes_1_78.php

*/

var x,y
var step=10
var flag=0

var message=' hello world '
message=message.split("")

var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50
}

var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos[i]=-50
}
function handlerMM(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;
flag=1
}

function makesnake() {
if (flag==1 && document.getElementById) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y

for (i=0; i<message.length-1; i++) {
var thisspan = document.getElementById('span'+(i)).style;
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
var timer=setTimeout("makesnake()",50)
}

</script>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/twte3d7/4Wjm5wj58/disassemble_v3.js"></script>

<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
</head>

<body>

{block:IfUppercaseLinks}<div style="text-transform:uppercase">{/block:IfUppercaseLinks}
<div class="title"><a href="/">{Title}</a></div>
<div class="archive"><a href="archive">Archive</a></div>
<div class="message"><a href="/ask">Message</a></div>
<div class="follow">{block:PermalinkPage}{block:Posts}<a href="{ReblogURL}" target="_blank">Reblog</a> / {/block:Posts}{/block:PermalinkPage}<a href="https://www.tumblr.com/privacy/consent?redirect=https%3A%2F%2Fwww.tumblr.com%2Ffollow%2F{Name}">Follow</a></div>
<div class="random"><a href="/random">Random</a></div>
<div id="toTop">Back to top</div>
{block:IfUppercaseLinks}</div>{/block:IfUppercaseLinks}

<div id="wrapper">

{block:Posts}
<div id="post"
{block:IndexPage}
{block:Post1}style="width:380px"{/block:Post1}
{block:Post2}style="width:410px"{/block:Post2}
{block:Post3}style="width:500px"{/block:Post3}
{block:Post4}style="width:290px"{/block:Post4}
{block:Post5}style="width:320px"{/block:Post5}
{block:Post6}style="width:460px"{/block:Post6}
{block:Post7}style="width:530px"{/block:Post7}
{block:Post8}style="width:280px"{/block:Post8}
{block:Post9}style="width:340px"{/block:Post9}
{block:Post10}style="width:400px"{/block:Post10}
{block:Post11}style="width:260px"{/block:Post11}
{block:Post12}style="width:370px"{/block:Post12}
{block:Post13}style="width:520px"{/block:Post13}
{block:Post14}style="width:310px"{/block:Post14}
{block:Post15}style="width:250px"{/block:Post15}
{/block:IndexPage}
{block:PermalinkPage}style="width:500px"{/block:PermalinkPage}
>

{block:Text}
{block:Title}<a href="{Permalink}">{Title}</a>{/block:Title}
{Body}
{/block:Text}

{block:Link}
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}<div class="description">{Description}</div>{/block:Description}
{/block:Link}

{block:Quote}
<a style="border:0 !important" href="{Permalink}">"{Quote}"</a>
{block:Source}
<p>— {Source}</p>
{/block:Source}
{/block:Quote}

{block:Photo}
{block:IndexPage}<a href="{Permalink}"><div style="border:none"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" border="0"/></div></a>{/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}<div style="border:none"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></div>{LinkCloseTag}{/block:PermalinkPage}
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Photo}

{block:Chat}
{block:Title}<h2>{Title}</h2>{/block:Title}
<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul>
{/block:Chat}

{block:Video}
{block:IndexPage}<a href="{Permalink}"><div class="corner"></div></a>{/block:IndexPage}
<div id="video">
{Video-500}
</div>
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Video}

{block:Photoset}
{block:IndexPage}<div class="photoset">{block:Photos}<a href="{Permalink}"><img src="{PhotoURL-HighRes}"></a>{/block:Photos}</div>{/block:IndexPage}
{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Photoset}

{block:Audio}
{block:AlbumArt}<a href="{Permalink}"><img src="{AlbumArtURL}"></a>{/block:AlbumArt}
<div class="player">{AudioPlayerBlack}</div>
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Audio}

{block:IfShowTagsOnIndexPage}{block:IndexPage}{/block:IndexPage}{/block:IfShowTagsOnIndexPage}{block:PermalinkPage}{/block:PermalinkPage}

</div>
{/block:Posts}

{block:NextPage}<div id="page-nav"><a href="{NextPage}"></a>{/block:NextPage}

</div>

<script language=JavaScript>
for (i=0;i<=message.length-1;i++) {
document.write("<DIV id=span"+i+" class=spanstyle>")
document.write(message[i])
document.write("</DIV>")
}

if (document.getElementById)
{
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = handlerMM;
}

window.onload = makesnake;
</script>

</body>
</html>
A voir également:

2 réponses

Bonsoir,

nul besoin de lire votre code pour savoir que vous n'y arriverez pas.

Vous voulez modifier un programme qui contient de l'AJAX(asynchronous javascript and xml) et vous parlez de choses qui n'existe pas:

"J'essaie desespérement de modifier le code html de mon tumblr afin d'y ajouter une petite phrase qui suivrait la souris. "

Ne sera certainement pas de l'HTML, par contre essayez avec javascript qui est un langage de programmation et utilisé sur le www car permet facilement de gérer l'interactivité et les événements. HTML ce sont des balises qui permettent d'avoir du texte, des images, différents éléments(bref le contenu de la page web). Un événement en informatique c'est qu'il se passe quelque chose:

la logique en programmation c'est:
quand la position de la souris(événement) bouge le cadre avec le texte doit bouger aussi. Concrètement à partir des positions en abscisse et ordonné de la souris on calcule la position du cadre texte, et le programme doit fonctionner en permenance(enfin pour chaque position de la souris).


Donc une fois que vous êtes clair avec HTML et javascript vous pouvez essayer ceci:

http://www.editeurjavascript.com/scripts/search.php?asked=texte+suit+la+souris&dest=1/

au mieux construire vous même votre propre script:

http://www.toutjavascript.com/main/index.php3
0
nicolas123g Messages postés 2 Date d'inscription samedi 18 janvier 2014 Statut Membre Dernière intervention 18 janvier 2014
18 janv. 2014 à 22:29
Merci de votre réponse. Je sais que je ne suis pas tout à fait au point au niveau du vocabulaire. J'ai dit html car sur tumblr, le bouton de personnalisation s'appelle "edit html". Toujours est-il que le code pour ce que je veux faire est à insérer entre les balises de cette page. Et j'ai justement utilisé l'editeur javascript que vous venez de m'envoyer pour créer le script. Et ça ne fonctionne pas...
0
Re,
et vous avez appris où comment et où placer le javascript?

Tumblr permets il de placer son propre javascript(rien n'est impossible mais c'est surprenant)?

Si vous vous contenter de copier coller un bout de programme sans comprendre ce n'est guère étonnant que ça ne marche pas:

Donc admettons que vous ayez les fonctions javascript suivantes:


var x,y
var step=10
var flag=0

var message=' hello world '
message=message.split("")

var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50
}

var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos[i]=-50
}
function handlerMM(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;
flag=1
}

function makesnake() {
if (flag==1 && document.getElementById) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y

for (i=0; i<message.length-1; i++) {
var thisspan = document.getElementById('span'+(i)).style;
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
var timer=setTimeout("makesnake()",50)
}


Et placé au bon endroit(ce qui n'est pas le cas puisque vous les avez mises dans le body HTML(quant je vous disait qu'il vous fallait connaitre HTML, ça servira déjà à savoir ce que vous écrivez et où l'écrire), donc

comme vous devriez le savoir une fonction est faite pour être appelée dans un programme, hors où est appelée cette fonction?

Ce dont vous avez besoin pour vos réponses c'est un cours de HTML suivit de cours de javascript. Je ne souhaite pas me substituer à un cours et vous ai donné plusieurs liens qui vous permettront d'apprendre ce que vous cherchez.

Sinon je peut vous fournir mes tarifs en tant que développeur ou enseignant informatique mais je pense que ceci est à votre portée sans ça, il y a de nombreux documents disponibles en vous servant de Google qui vous permettront d'apprendre ce que vous voulez:

HTML et le javascript.
0