Comment rendre une image cliquable?

Réduire
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Comment rendre une image cliquable?

    Bonjour!


    Voila, en faite, sur mon site, le haut de mon template (ms_thinking_red) s'appel main_top.png (c'est peut etre le nom pour tous les templates je ne sais pas ) et je voudrais que lorsqu'un visiteur navigue, il ait toujours la possibilité de revenir à l'accueil en cliquant sur cette image.

    J'ai penssé transformer mon main_top.png en flash et faire un lien vers mon accueil en modifiant les css mais ça me parait etre beaucoup de boulot pour pas grand chose...

    Donc je viens soliciter votre aide est il possible de transformer ce png en lien?
    En modifiant tout simplement le css? en modifiant le png? en changeant le format?

    Je suis perdu

    Merci de bien vouloir m'eclairer svp
    Dernière édition par arnaud401 à 11/02/2006, 16h44

  • #2

    Si tu parles d'image cliquable alors je penses à une image avec des zones cliquable. Et c'est pas ça...

    Pourquoi tu cherches la difficulté ?
    Voici le principe du lien hypertexte :
    On utilise la balise <a> Exemple :
    <a href="url_de-destination">Texte_à_cliquer</a>
    Remplacons le texte par une image :
    <a href="url_de-destination"><img scr="url_image_à_cliquer /></a>
    CQFD
    Pas la peine de chercher midi à 14h00
    C'est du html basic. Le soucis c'est que nous on code en xhtml alors tu codes tout en minuscules et tu fermes toutes les balises. c'est pour cette raison qu'il y a :
    <img scr="url_image_à_cliquer />
    Papounet

    PS : Tu es retrouvé maintenant ?
    I'am happy for you !
    Dernière réalisation : http://www.pierrickservais.com/

    Commentaire


    • #3
      tu peux aussi uploader ton image dans le dossier images de joomla, puis rajouter au bon endroit dans ton template :

      <a href="http://www.tonsite.extension"><?php echo "<img src=\"$GLOBALS[mosConfig_live_site]/images/tonimage.extension\" alt=\"descriptif de l'image\" />" ; ?></a>
      en fait tu peux faire les liens absolus (1er) ou relatifs au site ( $GLOBALS[mosConfig_live_site] )
      Dernière édition par AniMo à 29/01/2006, 12h45
      Merci d'éviter les demandes de support par MP.

      Commentaire


      • #4
        Merci pour la précision AniMo. Elle est pas inutile.
        Une autre soltion peut consister à insérer une position de publication de module à l'emplacement : mosLoadModules ('header')
        Et de publier un module d'image à la position header.
        Ca permet de changer d'image à tout moment sans bricoler dans le code...
        I'am happy for you !
        Dernière réalisation : http://www.pierrickservais.com/

        Commentaire


        • #5
          waooouu!!!

          merci pour ces reponses!!!

          je pense que je vais tester ta solution Animo qui me parait plus simple à mettre en oeuvre que les modules merci egalement à papounet! je vais me mettre à fond sur les modules car c'est tt de meme un plus zoli boulot que de les utiliser

          Commentaire


          • #6
            Styles CSS des modules
            I'am happy for you !
            Dernière réalisation : http://www.pierrickservais.com/

            Commentaire


            • #7
              en fait, j'ai testé les differentes techniques que vous m'avez proposé mais rien ne fonctionne... surment à cause du fait que je ne sais pas bien placer le code.

              Faut il que je le mette dans le php de mon index? :

              Code PHP:
              <?php defined"_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );$iso split'='_ISO );echo '<?xml version="1.0" encoding="'$iso[1] .'"?' .'>';?>

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

              <html xmlns="http://www.w3.org/1999/xhtml">

              <head>

              <?php mosShowHead(); ?>

              <meta http-equiv="Content-Type" content="text/html;><?php echo _ISO?>" />

              <?php if ( $my->id ) { initEditor(); } ?>

              <?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ?>

              </head>

              <body>

              <div align="center">

              <div id="outline">

              <div id="top_container"></div>

              <div id="middle_container"><div id="middle_container_inner">

              <div id="left"><?php mosMainBody(); ?></div>

              <div id="right"><?php mosLoadModules 'left' ); ?></div>



              </div></div>

              <div id="bottomcontainer">







              <div id="copyright">Copyright &copy; <?php echo date("Y"); ?> by <?php echo $GLOBALS['mosConfig_sitename']?>  </div>

              </div>



              </div>

              </div>

              </div>



              </body>

              </html>

              ou alors dans mon css?:

              Code:
              body{
              	background			: #000000;
              	margin				: 0px;
              	padding				: 0px;
              }
              
              body,td,th,div{
              	font-family			: Tahoma, Helvetica, sans-serif;
              	font-size			: 13px;
              	color				: #444;
              }
              
              a{
              	color				: AD301E;
              	text-decoration		: none;
              }
              
              a:hover{
              	text-decoration		: underline;
              }
              
              #outline{
              	width				: 840px;
              	margin-top			: 10px;
              	background			: url(../images/main_middle.jpg) repeat-y;
              	overflow			: hidden;
              }
              
              #top_container{
              	background			: #990000 url(../images/main_top.png);
              
              	height				: 190px;
              }
              
              #middle_container{
              	overflow			: hidden;
              	
              }
              
              #middle_container_inner{
              	width				: 1200px;
              	text-align			: left;
              }
              
              #left{
              	width				: 570px;
              	float				: left;
              	padding				: 0px 20px;
              }
              
              #right{
              	width				: 190px;
              	float				: left;
              }
              
              #bottomcontainer{
              	background			: url(../images/main_bottom.jpg);
              	height				: 30px;
              	padding				: 0px 25px;
              }
              
              #icons{
              	padding-left		: 10px;
              	padding-top			: 3px;
              }
              
              #bottomcontainer #icon{
              	float				: left;
              	margin-right		: 2px;
              }
              
              #bottomcontainer #copyright{
              	float				: right;
              	padding-right		: 10px;
              	color				: #999999;
              }
              
              table.moduletable{
              	width				: 180px;
              	margin-bottom		: 10px;
              }
              
              table.moduletable th,
              .sectiontableheader{
              	font-weight			: bold;
              	letter-spacing		: 1px;
              	border-bottom		: 1px solid #666;
              }
              
              table.moduletable td{
              	padding-top			: 10px;
              }
              
              table.moduletable td td{
              	padding-top			: 0px;
              }
              
              .sectiontableentry1{
              	background:#e7e7e7;
              }
              
              .contentheading{
              	color				: #990000;
              	font-size			: 24px;
              	text-decoration		: none;
              	padding-bottom		: 7px;
              	background			: url(../images/underline.jpg) repeat-x bottom;
              }
              
              
              .contentheading a{
              	color				: #444;
              	text-decoration		: none;
              }
              
              .componentheading{
              	color				: #990000;
              	font-size			: 28px;
              	margin-bottom		: 20px;
              	text-decoration		: none;
              }
              
              .small,.createdate,.modifydate{
              	color				: #999999;
              	font-size			: 11px;
              }

              désolé pour cette page hyper longue , je suis un peu perdu, (pour info l'image que je veux transformer en lien est "main_top.png"

              Merci pour l'aide que vous pourrez m'apporter svp

              Commentaire


              • #8
                Moi je réouvre une discussion à ce sujet, parce qu'en tant que débutant,
                je ne comprends pas et j'ai beau appliqué à la lettre, ca ne fonctionne pas...
                Titre du post, pour ceux qui le chercheront:
                "Insertion d'une image cliquable"
                A la Sainte Véronique, avec l'ânesse l'âne pique et nique...Âne qui pète à la Sainte Colette, Sainte Félicité sous la gelée...et-c

                Commentaire


                • #9
                  tu sais, tu peux "upper " ton sujet au lieu de venir dans 1 autre

                  J'en testé ce week end pour mon image, mais je n'arrive toujours à rien, help me pleeaaase

                  Commentaire


                  • #10
                    peux-tu dire si tu arrives à intégrer une image depuis l'éditeur, le btn avec un arbre, entre l'ancre et le balai ?
                    je pense que si tu y arrives (moi non) ensuite tu n'as plus qu'à sélectionner
                    ton image et à cliquer sur l''icone insert link (le maillon).

                    je n'ai pas compris la méthode d'Animo, mais j'ai réussi grace à la méthode de Papounet, en créant un tableau dans lequel j'insére une image via {mosimage} puis je séléctionne le tableau en cliquant sur le btn HTML. (sans le tableau ca ne marche pas)
                    Dans le code, je remplace {mosimage} par <a href="url_de-destination"><img scr={mosimage} /></a>
                    et là ça marche.

                    Seulement ca ne me parait pas trés catholique, parceque si je veux mettre plusieurs images et plusieurs liens (dans le meme article) ca ne marche pas.

                    C'est pour cela que je pense qu'il faut se tourner vers le btn insert image (l'arbre), qui comporte des options trés interessantes de tabulation d'alignement, ...et meme de chgt d'image au survol.

                    moi ca ne marche pas, je me demande si il ne faut pas que je réinstalle l'éditeur ou s'il faut un plugin TinyMCe??

                    Ca serait super bien qu'on vienne nous aider surtout que ca doit pas etre trop compliqué. :}
                    A la Sainte Véronique, avec l'ânesse l'âne pique et nique...Âne qui pète à la Sainte Colette, Sainte Félicité sous la gelée...et-c

                    Commentaire


                    • #11
                      alors, à mon avis tu te trompe, tu devrais plutot utiliser la petite image avec l'arbre en bas à gauche dans l'editeur, a coté de l'aperçu ecran...

                      Par pitié, pour la clareté du forum, poste dans ton sujet

                      Commentaire


                      • #12
                        voila, je pense avoir trouvé que je doit inserrer le lien dans mon css à ce niveau:


                        Code:
                        }
                        
                        #top_container{
                        	background			: #990000 url(../images/main_top.png);
                        
                        	height				: 190px;
                        }
                        mais ou exactement svp ?

                        Merci ames charitables de me venir en aide une fois de plus

                        Commentaire


                        • #13
                          Bon pour résoudre vos discussions, allez voir ceci, je vous ai fait un tuto en 4ème vitesse !
                          http://www.nicolas-ogier.info/tutos/images_clicables/
                          cours de SVT - infos scientifiques : www.nicolas-ogier.fr
                          pas de demandes d'aide par mp, elles seront systématiquement refusées !

                          Commentaire


                          • #14


                            Code:
                            <?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );$iso = split( '=', _ISO );echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';?>
                            
                            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                            
                            <html xmlns="http://www.w3.org/1999/xhtml">
                            
                            <head>
                            
                            <?php mosShowHead(); ?>
                            
                            <meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
                            
                            <?php if ( $my->id ) { initEditor(); } ?>
                            
                            <?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
                            
                            </head>
                            
                            <body>
                            
                            <div align="center">
                            
                            <div id="outline">
                            
                            <div id="top_container">
                            <a href="http://www.tonsite.extension"><?php echo "<img src=\"$GLOBALS[mosConfig_live_site]/images/tonimage.extension\" alt=\"descriptif de l'image\" />" ; ?></a>
                            </div>
                            
                            <div id="middle_container"><div id="middle_container_inner">
                            
                            <div id="left"><?php mosMainBody(); ?></div>
                            
                            <div id="right"><?php mosLoadModules ( 'left' ); ?></div>
                            
                            
                            
                            </div></div>
                            
                            <div id="bottomcontainer">
                            
                            
                            
                            
                            
                            
                            
                            <div id="copyright">Copyright &copy; <?php echo date("Y"); ?> by <?php echo $GLOBALS['mosConfig_sitename']?>  </div>
                            
                            </div>
                            
                            
                            
                            </div>
                            
                            </div>
                            
                            </div>
                            
                            
                            
                            </body>
                            
                            </html>
                            cours de SVT - infos scientifiques : www.nicolas-ogier.fr
                            pas de demandes d'aide par mp, elles seront systématiquement refusées !

                            Commentaire


                            • #15
                              merci beaucoup opware2000, j'ai recopié ton code et inséré les modifs ad hoc pour les chemins et noms de l'image, mais le probleme, c'est que ça me fait un petit rectangle en haut avec mon text alternatif: retour acceuil.

                              En gros, voici ce que ça devrais me donner: ce devrais etre le rectangle que j'ai representé en orange (main_top.png) devrais etre cliquable

                              les forces du web sont contre moi

                              As tu une idée de ce que je devrais modifier?

                              PS: au fait, waou le tuto que tu as soit disant vite fait pour zergood! jolie boulot

                              Commentaire

                              Annonce

                              Réduire
                              1 sur 2 < >

                              C'est [Réglé] et on n'en parle plus ?

                              A quoi ça sert ?
                              La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                              Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                              Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                              Comment ajouter la mention [Réglé] à votre discussion ?
                              1 - Aller sur votre discussion et éditer votre premier message :


                              2 - Cliquer sur la liste déroulante Préfixe.

                              3 - Choisir le préfixe [Réglé].


                              4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                              2 sur 2 < >

                              Assistance au forum - Outil de publication d'infos de votre site

                              Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                              Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                              Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                              UTILISER À VOS PROPRES RISQUES :
                              L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                              Problèmes connus :
                              FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                              Installation :

                              1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                              Archive zip : https://github.com/AFUJ/FPA/zipball/master

                              2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                              3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                              4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                              5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                              6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                              et remplacer www. votresite .com par votre nom de domaine


                              Exemples:
                              Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/
                              Pour executer le script: http://www..com/fpa-fr.php

                              Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/cms/
                              Pour executer le script: http://www..com/cms/fpa-fr.php

                              En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                              Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                              Voir plus
                              Voir moins
                              Travaille ...
                              X