Sujet Précédent Sujet Suivant

Inserer une fonction javascript dans une page css

Résolu
medas918 Messages postés 45 Date d'inscription lundi 14 juin 2010 Statut Membre Dernière intervention 28 mai 2012 - 28 nov. 2010 à 19:25
medas918 Messages postés 45 Date d'inscription lundi 14 juin 2010 Statut Membre Dernière intervention 28 mai 2012 - 3 déc. 2010 à 14:15 
<script language="JavaScript"> 

alert("bonjour le site est en construction")
</script>
<script language="JavaScript">
 
// fonction de conversion en hexadécimal
var hexa = "0123465789ABCDEF";

function convert_hexa(nb) {
return hexa.charAt(Math.floor(nb/16)) + hexa.charAt(nb%16);
}

// r1,g1,b1 représentent les couleurs de départ (en RGB)
// r2,g2,b2 représentent les couleurs de fin (en RGB)
// texte représente la chaîne à afficher
// size est la taille du dégradé (nombre de lettres au final (avec ajouts d'espace si nécessaire))
// (si < taille du texte, on prend cette dernière)

function degrade(r1,g1,b1,r2,g2,b2,texte,size) {
var nb = texte.length;
var s = nb;
var dt = 1;
if ( size > s ) {
dt = Math.round( ( size - 2 ) / ( nb - 1 ) );
s = dt * ( nb - 1 );
}
dr = ( r2 - r1 ) / s;
dg = ( g2 - g1 ) / s;
db = ( b2 - b1 ) / s;
for ( var i = 0; i <= s; i++ ) {
var t = " ";
var index = i / dt;
if ( index == Math.round(index) ) {
t = texte.charAt(index);
}

// Ecriture de chaque lettre, une par une avec sa propre couleur
document.write('' + t + '');
}
}
</script>


je souhaite que cette fonction soit dans une page css mais je ne sais pas comment faire car si je laisse dans ma page html je dois toujours utilise le marqueur qui est celui-ci:
code=js]<script language="JavaScript">degrade(255,0,0,0,127,255,"page web",0);</script>
/code

donc pour évité faire une balise script et marquer ce que je souhaite je voudrai le mettre dans mon fichier css et que s'applique sur tous les éléments de mon body
est ce possible sinon conseillez moi de faire autrement s'il y a une solution merci beaucoup
et bon courage

10 réponses

Réponse 1 / 10
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
1 déc. 2010 à 22:07
Bonjour,
...j'ai fais comme tu me l'as dit...
pas exactement...j'ai écrit 
<script type="text/javascript">
  writeTitre("je suis en couleur degradée"); //appel de la fonction
</script>
on ne passe qu'un paramètre, le texte...
...on aurait pu écrire 
<script type="text/javascript">
  degrade(255,0,0,0,127,255, "je suis en couleur degradée", 0);
</script>
le résultat est le même, simplement en cas de duplication du même fonction c'est plus light à écrire et si je fait une modif, TOUT les fichiers seront modifiés sans autre modification que la fonction.

Il faut donc bien respecter les paramètres passés à la fonction.

Je note une erreur surement un copier/coller approximatif 
<script type="text/javascript" src="degarde.js">
au lieu de 
<script type="text/javascript" src="degrade.js">


Une dernière remarque, ne mets pas le code que tu mets en commentaire, cela allège la lecture


;O)
3
Réponse 2 / 10
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
29 nov. 2010 à 18:56
Bonjour,
je souhaite que cette fonction soit dans une page css
le mieux c'est de faire l'essai pour voir que cela va planter...

une feuille de style, CSS, c'est
<style type="text/css">

une page javascript, JS, c'est
<script type="text/javascript">
ce sont donc deux choses bien différentes.

pour la suite j'avoue avoir un peu de mal à te suivre, si tu ne veux pas le mettre dans ta page, édites le code généré et mets le directement dans ta page.
;O)
0
Réponse 3 / 10
medas918 Messages postés 45 Date d'inscription lundi 14 juin 2010 Statut Membre Dernière intervention 28 mai 2012
29 nov. 2010 à 20:58
merci de ta réponse mais je connais sa et j'ai essayé
alors je vais t'expliquer ce code en js je l'ai mis dans une page .js
puis je l'appel sur la page en question
exemple 
<html>
<head>
<title>mapage</title>

[code=js]<script type="text/javavscrip src="url/nonfichier.js">


</head>

<h1><script>nonficher("je suis en couleur degradéé);</script><h1>

</html>/code
mais sa ne fonctionne pas je ne sais pas pourquoi ?
0
Réponse 4 / 10
medas918 Messages postés 45 Date d'inscription lundi 14 juin 2010 Statut Membre Dernière intervention 28 mai 2012
29 nov. 2010 à 21:00 
<html>
<head>
<title>mapage</title>

<script type="text/javavscrip src="url/nonfichier.js">

</head> 
 
<h1><script>nonficher("je suis en couleur degradéé);</script><h1> 
 
</html>

mais sa ne fonctionne pas je ne sais pas pourquoi ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 10
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
29 nov. 2010 à 22:06
lorsque l'on écrit 
<script type="text/javavscript" src ="nom_fichier.js">
cela signifie que le navigateur charge le CONTENU du fichier nom_fichier.js.

Le nom du fichier n'a que peu d'importance, il pourrait tout aussi bien s'appelait et_ta_pioche.xxl, ce qui compte ce sont les fonctions qui sont à l'intérieur et dont mises à disposition par leur référence, leur nom en fait.

Si dans ce fichier j'ai une fonction qui s'appelle writeTitre cela me permet de l'utiliser dès que le CONTENU du fichier à été intégré par le navigateur.

Dans ton exemple tu fais référence à une fonction nomficher qui n'existe pas dans ton fichier nomfichier.js, cela ne peut donc en aucun cas fonctionner.

Donc reprenons ton cas.
dans le fichier nomfichier.js je vais trouvé 
// fonction de conversion en hexadécimal
var hexa = "0123465789ABCDEF";
function convert_hexa(nb) {
  return hexa.charAt(Math.floor(nb / 16)) + hexa.charAt(nb % 16);
}
// r1,g1,b1 représentent les couleurs de départ (en RGB)
// r2,g2,b2 représentent les couleurs de fin (en RGB)
// texte représente la chaîne à afficher
// size est la taille du dégradé (nombre de lettres au final (avec ajouts d'espace si nécessaire))
// (si < taille du texte, on prend cette dernière)
function degrade(r1, g1, b1, r2, g2, b2, texte, size) {
  var nb = texte.length;
  var s = nb;
  var dt = 1;
  if (size > s) {
    dt = Math.round((size - 2) / (nb - 1));
    s = dt * (nb - 1);
  }
  dr = (r2 - r1) / s;
  dg = (g2 - g1) / s;
  db = (b2 - b1) / s;
  for (var i = 0; i <= s; i++) {
    var t = " ";
    var index = i / dt;
    if (index == Math.round(index)) {
      t = texte.charAt(index);
    }
    // Ecriture de chaque lettre, une par une avec sa propre couleur
    document.write('' + t + '');
  }
}
//----------------------------------------------------
// Fonction appelee dans le HTML
// cela permet de ne pas reprendre tous les parametres
//----------------------------------------------------
function writeTitre( txt_){
  degrade(255,0,0,0,127,255, txt_,0); //appel de la fonction degrade
}
et c'est tout, pour cet exemple

Ensuite dans ton document, il te suffit de mettre 
<html>
<head>
<title>mapage</title>
<script type="text/javavscript" src = "nomfichier.js">
</head> 
 

<script type="text/javascript">
  writeTitre("je suis en couleur degradée"); //appel de la fonction
</script>

 
Le reste du document...
 
</html>

voila pour le principe...

;O)
0
Réponse 6 / 10
medas918 Messages postés 45 Date d'inscription lundi 14 juin 2010 Statut Membre Dernière intervention 28 mai 2012
1 déc. 2010 à 21:15
merci de ta réponse mais ceci ne fonctionne pas
j'ai fais comme tu me l'as dit je te montre ma page html qui se nomme mangas.html 
<html>
<head>
<title>Mangas</title>
<style type="text/css" media="screen">@import url(mangas.css);</style>

<script language="JavaScript"> 

alert("bonjour le site est en construction")
</script>
<script type="text/javascript" src="degarde.js">
</script>
</head>




<center><script type="text/javavscript">writeTitre(127,255,0,255,236,0,"L'univers des Mangas",0); </script></center>






<script language="JavaScript">writeTitre(255,0,0,0,127,255,"BIENVENUE DANS L'UNIVERS DU MANGAS",0);</script>

<!--






















-->
[Types de Mangas.html <script language="JavaScript">degrade(255,125,0,150,0,120,"Types de Mangas",0);</script>]


[Types d'anime.html <script language="JavaScript">degrade(255,255,0,255,0,0,"Types d'Anime",0);</script>]




</html>

mon fichier javascript qui se nomme degrade.js 
// fonction de conversion en hexadécimal
var hexa = "0123465789ABCDEF";
function convert_hexa(nb) {
  return hexa.charAt(Math.floor(nb / 16)) + hexa.charAt(nb % 16);
}
// r1,g1,b1 représentent les couleurs de départ (en RGB)
// r2,g2,b2 représentent les couleurs de fin (en RGB)
// texte représente la chaîne à afficher
// size est la taille du dégradé (nombre de lettres au final (avec ajouts d'espace si nécessaire))
// (si < taille du texte, on prend cette dernière)
function degrade(r1, g1, b1, r2, g2, b2, texte, size) {
  var nb = texte.length;
  var s = nb;
  var dt = 1;
  if (size > s) {
    dt = Math.round((size - 2) / (nb - 1));
    s = dt * (nb - 1);
  }
  dr = (r2 - r1) / s;
  dg = (g2 - g1) / s;
  db = (b2 - b1) / s;
  for (var i = 0; i <= s; i++) {
    var t = " ";
    var index = i / dt;
    if (index == Math.round(index)) {
      t = texte.charAt(index);
    }
    // Ecriture de chaque lettre, une par une avec sa propre couleur
    document.write('' + t + '');
  }
}
//----------------------------------------------------
// Fonction appelee dans le HTML
// cela permet de ne pas reprendre tous les parametres
//----------------------------------------------------
function writeTitre( txt_){
  degrade(255,0,0,0,127,255, txt_,0); //appel de la fonction degrade
}

je ne comprend pas pour quoi sa ne veut pas fonctionner j'ai regardé sous chrome et sur ie8 sa ne veut pas mon fichier d'origine c'est mangas.html: 
<html>
<head>
<title>Mangas</title>
<style type="text/css" media="screen">@import url(mangas.css);</style>

<script language="JavaScript"> 

alert("bonjour le site est en construction")
</script>
<script language="JavaScript"> 
// fonction de conversion en hexadécimal
var hexa = "0123465789ABCDEF";
function convert_hexa(nb) {
  return hexa.charAt(Math.floor(nb / 16)) + hexa.charAt(nb % 16);
}
// r1,g1,b1 représentent les couleurs de départ (en RGB)
// r2,g2,b2 représentent les couleurs de fin (en RGB)
// texte représente la chaîne à afficher
// size est la taille du dégradé (nombre de lettres au final (avec ajouts d'espace si nécessaire))
// (si < taille du texte, on prend cette dernière)
function degrade(r1, g1, b1, r2, g2, b2, texte, size) {
  var nb = texte.length;
  var s = nb;
  var dt = 1;
  if (size > s) {
    dt = Math.round((size - 2) / (nb - 1));
    s = dt * (nb - 1);
  }
  dr = (r2 - r1) / s;
  dg = (g2 - g1) / s;
  db = (b2 - b1) / s;
  for (var i = 0; i <= s; i++) {
    var t = " ";
    var index = i / dt;
    if (index == Math.round(index)) {
      t = texte.charAt(index);
    }
    // Ecriture de chaque lettre, une par une avec sa propre couleur
    document.write('' + t + '');
  }
}

</script>
</head>




<center><script type="text/javavscript">degrade(127,255,0,255,236,0,"L'univers des Mangas",0); </script></center>






<script language="JavaScript">degrade(255,0,0,0,127,255,"BIENVENUE DANS L'UNIVERS DU MANGAS",0);</script>

<!--






















-->
[Types de Mangas.html <script language="JavaScript">degrade(255,125,0,150,0,120,"Types de Mangas",0);</script>]


[Types d'anime.html <script language="JavaScript">degrade(255,255,0,255,0,0,"Types d'Anime",0);</script>]




</html>


et sa me donne bien ce que je veux mais je veux eviter d'écrire sur chaque page
donc je vais chercher mais c'est vrai que c'est la solutionmais je ne comprend pas où est l'erreur
merci beaucoup pour ton aide
0
Réponse 7 / 10
medas918 Messages postés 45 Date d'inscription lundi 14 juin 2010 Statut Membre Dernière intervention 28 mai 2012
2 déc. 2010 à 00:02
merci de ton aide mais j'ai vu mon erreur donc j'ai fait ce que tu as dit :
depuis le début c'était mon erreur de copier coller 
html>
<head>
<title>Mangas</title>
<style type="text/css" media="screen">@import url(mangas.css);</style>

<script language="JavaScript"> 

alert("bonjour le site est en construction")
</script>
<script type="text/javascript" src="degrade.js">
</script>

</head>




<center><script language="javascript">degrade(127,255,0,255,236,0,"L'univers des Mangas",0); </script></center>

j'ai mal écris javascript type="text/javascript" c'est pareil que language"jacascript" 


<script language="JavaScript">degrade(255,0,0,0,127,255,"BIENVENUE DANS L'UNIVERS DU MANGAS",0);</script>
et mon fichier.js et bon sans la fonction que ma creer 
// fonction de conversion en hexadécimal
var hexa = "0123465789ABCDEF";
function convert_hexa(nb) {
  return hexa.charAt(Math.floor(nb / 16)) + hexa.charAt(nb % 16);
}
// r1,g1,b1 représentent les couleurs de départ (en RGB)
// r2,g2,b2 représentent les couleurs de fin (en RGB)
// texte représente la chaîne à afficher
// size est la taille du dégradé (nombre de lettres au final (avec ajouts d'espace si nécessaire))
// (si < taille du texte, on prend cette dernière)
function degrade(r1, g1, b1, r2, g2, b2, texte, size) {
  var nb = texte.length;
  var s = nb;
  var dt = 1;
  if (size > s) {
    dt = Math.round((size - 2) / (nb - 1));
    s = dt * (nb - 1);
  }
  dr = (r2 - r1) / s;
  dg = (g2 - g1) / s;
  db = (b2 - b1) / s;
  for (var i = 0; i <= s; i++) {
    var t = " ";
    var index = i / dt;
    if (index == Math.round(index)) {
      t = texte.charAt(index);
    }
    // Ecriture de chaque lettre, une par une avec sa propre couleur
    document.write('' + t + '');
  }
}

donc c'est juste des erreurs de syntaxe rien de compliquer désolé de t'avoir embêter merci beaucoup de ton aide
0
Réponse 8 / 10
medas918 Messages postés 45 Date d'inscription lundi 14 juin 2010 Statut Membre Dernière intervention 28 mai 2012
2 déc. 2010 à 00:03
a aussi il y avait pas besoin d'appeler une autre fonction la fonction degrade suffisait amplement
0
Réponse 9 / 10
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
2 déc. 2010 à 18:34
Bonjour,
il y avait pas besoin d'appeler une autre fonction la fonction degrade suffisait amplement
oui bien sûr, c'était plus l'exemple et un peu aussi pour ce que je t'explique plus haut à savoir

Si tu as 20 pages avec la même chose d'écrite, sauf le texte, exemple
degrade(255,0,0,0,127,255,"du texte qui change",0);
il devient intéressant de créer une fonction qui réduit le nombre de paramètre aux seuls paramètres différents, du coup si un jour tu te lasses de la couleur de tes titres et que tu veuilles en changer ou encore juste tester, tu n'auras qu'un seul endroit à changer, dans ton fichier degrade.js et toutes tes pages seront modifiées directement.

Ainsi tu peux décliner plusieurs fonctions qui reposent sur une fonction de base.

;O)
0
Réponse 10 / 10
medas918 Messages postés 45 Date d'inscription lundi 14 juin 2010 Statut Membre Dernière intervention 28 mai 2012
3 déc. 2010 à 14:15
cool merci beaucoup j"avais pas pensé
0

Discussions similaires

Fonctionnement d'un wysiwyg
mael94420 -
jdmcreator -

5 réponses
CSS MAP et AREA
gabs77 -
gabs77 -

9 réponses
Rogner une image
Galmiza -
Galmiza -

3 réponses
coller deux div avec du css
leon237 -
jordane45 -

2 réponses
exemple de page d'accueil avec la balise div et css
belkaiednaim -
belkaiednaim -

5 réponses
Rejoignez-nous