[Résolu] Ajout d'un javascript dans une page

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
#1
Citation :#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS: 1.9.1
#~ Nom de l'hébergeur : Easy Hebergement
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.9.1
#~ Installed Modules:
#~ * CMSMailer: 2.0
#~ * FileManager: 1.0.3
#~ * MenuManager: 1.7.2
#~ * ModuleManager: 1.4
#~ * News: 2.11
#~ * nuSOAP: 1.0.2
#~ * Printing: 1.1.1
#~ * Search: 1.6.7
#~ * ThemeManager: 1.1.3
#~ * TinyMCE: 2.8.1
#~ Config Information:
#~ * php_memory_limit:
#~ * process_whole_template: false
#~ * output_compression: false
#~ * max_upload_size: 10000000
#~ * default_upload_permission: 664
#~ * url_rewriting: none
#~ * page_extension:
#~ * query_var: page
#~ * image_manipulation_prog: GD
#~ * auto_alias_content: true
#~ * locale:
#~ * default_encoding: utf-8
#~ * admin_encoding: utf-8
#~ * set_names: true
#~ Php Information:
#~ * phpversion: 5.2.6-1+lenny9
#~ * md5_function: On (Vrai)
#~ * gd_version: 2
#~ * tempnam_function: On (Vrai)
#~ * magic_quotes_runtime: Off (Faux)
#~ * E_STRICT: 0
#~ * memory_limit: 64M
#~ * max_execution_time: 30
#~ * output_buffering: On
#~ * safe_mode: Off (Faux)
#~ * file_uploads: On (Vrai)
#~ * post_max_size: 10M
#~ * upload_max_filesize: 10M
#~ * session_save_path: Aucune vérification à cause du chemin OS
#~ * session_use_cookies: On (Vrai)
#~ * xml_function: On (Vrai)
#~ Server Information:
#~ * Server Api: cgi-fcgi
#~ * Server Db Type: MySQL (mysql)
#~ * Server Db Version: 5.0.51a
#~ ----------------------------------------------
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~


Bonsoir,

Voici l'url d'un javascript que j'aimerais intégré dans une page, mais les images change pas au survol d'un lien, j'ai tenté plein de truc mais cela ne marche pas.

Il y aurait t'il une astuce pour l'intégration ?

J'ai lu quelques trucs dans le wiki, dans la docs mais j'ai du mal à piger.

Bonne soirée et bonne fin d'année.
#1
Citation :#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS: 1.9.1
#~ Nom de l'hébergeur : Easy Hebergement
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.9.1
#~ Installed Modules:
#~ * CMSMailer: 2.0
#~ * FileManager: 1.0.3
#~ * MenuManager: 1.7.2
#~ * ModuleManager: 1.4
#~ * News: 2.11
#~ * nuSOAP: 1.0.2
#~ * Printing: 1.1.1
#~ * Search: 1.6.7
#~ * ThemeManager: 1.1.3
#~ * TinyMCE: 2.8.1
#~ Config Information:
#~ * php_memory_limit:
#~ * process_whole_template: false
#~ * output_compression: false
#~ * max_upload_size: 10000000
#~ * default_upload_permission: 664
#~ * url_rewriting: none
#~ * page_extension:
#~ * query_var: page
#~ * image_manipulation_prog: GD
#~ * auto_alias_content: true
#~ * locale:
#~ * default_encoding: utf-8
#~ * admin_encoding: utf-8
#~ * set_names: true
#~ Php Information:
#~ * phpversion: 5.2.6-1+lenny9
#~ * md5_function: On (Vrai)
#~ * gd_version: 2
#~ * tempnam_function: On (Vrai)
#~ * magic_quotes_runtime: Off (Faux)
#~ * E_STRICT: 0
#~ * memory_limit: 64M
#~ * max_execution_time: 30
#~ * output_buffering: On
#~ * safe_mode: Off (Faux)
#~ * file_uploads: On (Vrai)
#~ * post_max_size: 10M
#~ * upload_max_filesize: 10M
#~ * session_save_path: Aucune vérification à cause du chemin OS
#~ * session_use_cookies: On (Vrai)
#~ * xml_function: On (Vrai)
#~ Server Information:
#~ * Server Api: cgi-fcgi
#~ * Server Db Type: MySQL (mysql)
#~ * Server Db Version: 5.0.51a
#~ ----------------------------------------------
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~


Bonsoir,

Voici l'url d'un javascript que j'aimerais intégré dans une page, mais les images change pas au survol d'un lien, j'ai tenté plein de truc mais cela ne marche pas.

Il y aurait t'il une astuce pour l'intégration ?

J'ai lu quelques trucs dans le wiki, dans la docs mais j'ai du mal à piger.

Bonne soirée et bonne fin d'année.
#2
... nié ?
#2
... nié ?
#3
Hein???
quel javascript, quels trucs, que n'as-tu pas pigé ?
Bon début d'année!
{SEO}
Inscrivez-vous à notre Newsletter sur le site (colonne de droite, en bas).
Vous appréciez CMSMS et l'aide qui vous est fournie ici, aidez-nous en participant au projet.
Formation CMS Made Simple | Création de site CMS Made Simple.

C'est en se plantant qu'on devient cultivé.
J'ai un string dans l'Array (Paris Hilton)
#3
Hein???
quel javascript, quels trucs, que n'as-tu pas pigé ?
Bon début d'année!
{SEO}
Inscrivez-vous à notre Newsletter sur le site (colonne de droite, en bas).
Vous appréciez CMSMS et l'aide qui vous est fournie ici, aidez-nous en participant au projet.
Formation CMS Made Simple | Création de site CMS Made Simple.

C'est en se plantant qu'on devient cultivé.
J'ai un string dans l'Array (Paris Hilton)
#4
Bonne année à vous tous.

Voici l'adresse du script http://www.editeurjavascript.com/scripts...es_2_8.php

J'ai créer une nouvelle page dans le cms made simple, j'ai essayer tant bien que mal de l'installée, mais il ne fonctionne pas.

J'ai lu des trucs sur les balises utilisateur, mais cela me semble confus.

Bonne soirée à tous

Manu
#4
Bonne année à vous tous.

Voici l'adresse du script http://www.editeurjavascript.com/scripts...es_2_8.php

J'ai créer une nouvelle page dans le cms made simple, j'ai essayer tant bien que mal de l'installée, mais il ne fonctionne pas.

J'ai lu des trucs sur les balises utilisateur, mais cela me semble confus.

Bonne soirée à tous

Manu
#5
Bonjour Manu,

Alors, tu as deux possibilités pour ce que tu veux faire : Javascript (comme tu le propose) ou CSS (plus simple).

Javascript :
Le mieux est de créer un bloc de contenu global (contenu > blocs de contenus globaux) avec ton code javascript. Attention il faut bien mettre la balise {literal} comme ceci :
Code :
{literal}<script type='text/javascript'>
/*
on precharge les images de substitution
*/
i1 = new Image;
i1.src = "[url]http://www.tonsite.com/img/image2.gif[/url]";
i2 = new Image;
i2.src = "[url]http://www.tonsite.com/img/image3.gif[/url]";
</script>
{/literal}

Puis il faut placer ce bloc de contenu global dans ton gabarit de page (Contenu > Gabarits), entre les balises <head></head> avec un code du type :
Code :
{global_content name='nom_du_bloc'}

Après, dans ton contenu :
Code :
<A HREF="tips_img_03.php" onMouseOver="nomimage1.src=i1.src" onMouseOut="nomimage1.src='http://www.editeurjavascript.com/scripts/img/image1.gif'">Passez votre souris ici !</A><BR>
<A HREF="http://www.editeurjavascript.com" onMouseOver="nomimage1.src=i2.src" onMouseOut="nomimage1.src='http://www.editeurjavascript.com/scripts/img/image1.gif'">Ou encore là !</A>
<!-- Vous pouvez mettre une image a la place du texte :) -->
<BR><BR>
<IMG SRC="http://www.editeurjavascript.com/scripts/img/image1.gif" BORDER=0 WIDTH=88 HEIGHT=31 HSPACE=0 VSPACE=0 NAME="nomimage1"><noscript><a href="http://www.editeurjavascript.com/">ajax</a></noscript>

Voilà, fin du javascript et après quelques adaptation ca devrait marcher.

Cela dit, je serai plus adepte de faire ce genre de choses en CSS. Un tuto là-dessus : http://innovablog.com/design/design-css-...css-image/
Pour résumer, on joue sur la position de l'image de fond d'un lien. Il faudra donc créer des fonds de boutons comprenant deux images : l'image normale et l'image survolée.

Bonne intégration !
#5
Bonjour Manu,

Alors, tu as deux possibilités pour ce que tu veux faire : Javascript (comme tu le propose) ou CSS (plus simple).

Javascript :
Le mieux est de créer un bloc de contenu global (contenu > blocs de contenus globaux) avec ton code javascript. Attention il faut bien mettre la balise {literal} comme ceci :
Code :
{literal}<script type='text/javascript'>
/*
on precharge les images de substitution
*/
i1 = new Image;
i1.src = "[url]http://www.tonsite.com/img/image2.gif[/url]";
i2 = new Image;
i2.src = "[url]http://www.tonsite.com/img/image3.gif[/url]";
</script>
{/literal}

Puis il faut placer ce bloc de contenu global dans ton gabarit de page (Contenu > Gabarits), entre les balises <head></head> avec un code du type :
Code :
{global_content name='nom_du_bloc'}

Après, dans ton contenu :
Code :
<A HREF="tips_img_03.php" onMouseOver="nomimage1.src=i1.src" onMouseOut="nomimage1.src='http://www.editeurjavascript.com/scripts/img/image1.gif'">Passez votre souris ici !</A><BR>
<A HREF="http://www.editeurjavascript.com" onMouseOver="nomimage1.src=i2.src" onMouseOut="nomimage1.src='http://www.editeurjavascript.com/scripts/img/image1.gif'">Ou encore là !</A>
<!-- Vous pouvez mettre une image a la place du texte :) -->
<BR><BR>
<IMG SRC="http://www.editeurjavascript.com/scripts/img/image1.gif" BORDER=0 WIDTH=88 HEIGHT=31 HSPACE=0 VSPACE=0 NAME="nomimage1"><noscript><a href="http://www.editeurjavascript.com/">ajax</a></noscript>

Voilà, fin du javascript et après quelques adaptation ca devrait marcher.

Cela dit, je serai plus adepte de faire ce genre de choses en CSS. Un tuto là-dessus : http://innovablog.com/design/design-css-...css-image/
Pour résumer, on joue sur la position de l'image de fond d'un lien. Il faudra donc créer des fonds de boutons comprenant deux images : l'image normale et l'image survolée.

Bonne intégration !
#6
sans aller jusqu'a utiliser les sprites css (fonds de boutons comprenant deux images) tu peux très bien faire très simplement :

Citation :voici le bouton <span class='bouton'></span>

et le code CSS associé

Citation :.bouton{
display:block;
height:20px; // = hauteur de l'image
width:20px; // largeur de l'image
background: url(/url/de/mon/image.gif); //l'url de mon image en mode normal
}

.bouton:hover{
background: url(/url/de/mon/image2.gif); //l'url de mon image en mode survolé
}

zéro javascript
#6
sans aller jusqu'a utiliser les sprites css (fonds de boutons comprenant deux images) tu peux très bien faire très simplement :

Citation :voici le bouton <span class='bouton'></span>

et le code CSS associé

Citation :.bouton{
display:block;
height:20px; // = hauteur de l'image
width:20px; // largeur de l'image
background: url(/url/de/mon/image.gif); //l'url de mon image en mode normal
}

.bouton:hover{
background: url(/url/de/mon/image2.gif); //l'url de mon image en mode survolé
}

zéro javascript
#7
Bonsoir, merci pour votre aide.

J'ai créer deux blocs de contenus globaux, le premier nommé rollover et le deuxime rollover2

rollover contient

Code :
{literal}<script type='text/javascript'>
/*
on precharge les images de substitution
*/
i1 = new Image;
i1.src = "[url]http://www.tonsite.com/img/image2.gif[/url]";
i2 = new Image;
i2.src = "[url]http://www.tonsite.com/img/image3.gif[/url]";
</script>
{/literal}

rollover2 contient

Code :
{literal}<A HREF="tips_img_03.php" onMouseOver="nomimage1.src=i1.src" onMouseOut="nomimage1.src='http://www.editeurjavascript.com/scripts/img/image1.gif'">Passez votre souris ici !</A><BR>
<A HREF="http://www.editeurjavascript.com" onMouseOver="nomimage1.src=i2.src" onMouseOut="nomimage1.src='http://www.editeurjavascript.com/scripts/img/image1.gif'">Ou encore là !</A>
<!-- Vous pouvez mettre une image a la place du texte :) -->
<BR><BR>
<IMG SRC="http://www.editeurjavascript.com/scripts/img/image1.gif" BORDER=0 WIDTH=88 HEIGHT=31 HSPACE=0 VSPACE=0 NAME="nomimage1"><noscript><a href="http://www.editeurjavascript.com/">ajax</a></noscript>{/literal}

et dans contenu

Code :
{global_content name='rollover'} et {global_content name='rollover2'}

cela marche nickel

merci
#7
Bonsoir, merci pour votre aide.

J'ai créer deux blocs de contenus globaux, le premier nommé rollover et le deuxime rollover2

rollover contient

Code :
{literal}<script type='text/javascript'>
/*
on precharge les images de substitution
*/
i1 = new Image;
i1.src = "[url]http://www.tonsite.com/img/image2.gif[/url]";
i2 = new Image;
i2.src = "[url]http://www.tonsite.com/img/image3.gif[/url]";
</script>
{/literal}

rollover2 contient

Code :
{literal}<A HREF="tips_img_03.php" onMouseOver="nomimage1.src=i1.src" onMouseOut="nomimage1.src='http://www.editeurjavascript.com/scripts/img/image1.gif'">Passez votre souris ici !</A><BR>
<A HREF="http://www.editeurjavascript.com" onMouseOver="nomimage1.src=i2.src" onMouseOut="nomimage1.src='http://www.editeurjavascript.com/scripts/img/image1.gif'">Ou encore là !</A>
<!-- Vous pouvez mettre une image a la place du texte :) -->
<BR><BR>
<IMG SRC="http://www.editeurjavascript.com/scripts/img/image1.gif" BORDER=0 WIDTH=88 HEIGHT=31 HSPACE=0 VSPACE=0 NAME="nomimage1"><noscript><a href="http://www.editeurjavascript.com/">ajax</a></noscript>{/literal}

et dans contenu

Code :
{global_content name='rollover'} et {global_content name='rollover2'}

cela marche nickel

merci


Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)