Button/image redirectrice

Résolu/Fermé

Reddox - Modifié par jordane45 le 22/09/2016 à 23:28
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 - 24 sept. 2016 à 15:39

Bonjour, je cherche désespérément un moyen de faire des boutons "jolis" ou une image comme lien ré directeur ( a href)
Voici mon test pour l'image

<!DOCTYPE html>
 <head>
  <title>Untitled</title>
  <meta charset="UTF-8"/>
  <link rel="stylesheet" href="" type="text/css"/>
 </head>
  <body>
<a href="CryptageS.html" rel="nofollow noopener noreferrer" target="_blank"><img src"https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRdfLfY6-EzItIYOaUsnnhR9mtG8vo0Twn0TiTIFICx0vThFHoavikXJfNx" border=0 width=15 height=30 alt="Cryptage">Cryptage</a>
  </body>
 </html>


Et voici mon code de page d'accueil :<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Eleve van gogh</title>
    <link rel="icon" href="public/img/favicon.gif" type="image/gif">

    <!-- ## CSS ## -->
    <link rel="stylesheet" href="public/css/style.css" charset="utf-8">
    <link rel="stylesheet" href="public/css/tooltip.css" charset="utf-8">
    
    <!-- ## JavaScript ## -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js" type="text/javascript"></script>
    <script src="public/js/clipboard.min.js"></script>
    <script src="public/js/particles.min.js"></script>
    <script src="https://apis.google.com/js/platform.js"></script>
    <script src="//api.dedipass.com/v1/pay.js"></script>
    
        <!-- ## Voir comportement smartlook ## -->
    <script type="text/javascript">
    window.smartlook||(function(d) {
    var o=smartlook=function(){ o.api.push(arguments)},h=d.getElementsByTagName('head')[0];
    var c=d.createElement('script');o.api=new Array();c.async=true;c.type='text/javascript';
    c.charset='utf-8';c.src='//rec.getsmartlook.com/recorder.js';h.appendChild(c);
    })(document);
    smartlook('init', 'cd6c8f837a4f9503e6543c972bb81faf701a005e');
    </script>


  </head>
  <body>
  <main>

  <div class="navbar">
    <div class="container">
            <a href="contact.html" rel="nofollow noopener noreferrer" target="_blank"><b>Contact</a>
      <a href="http://pronote.lycee.nl/pronote/mobile.eleve.html?&redirect=1" rel="nofollow noopener noreferrer" target="_blank">Pronote</a>
      <a href="https://www.edmodo.com/?language=fr" rel="nofollow noopener noreferrer" target="_blank">Edmodo</a>
      <a href="Word.html" rel="nofollow noopener noreferrer" target="_blank">Word</a>
      <a href="Traducteur.html" rel="nofollow noopener noreferrer" target="_blank">Traducteur</a>
      <a href="Jeux.html" rel="nofollow noopener noreferrer" target="_blank">Jeux</b></a>
      <a href="Acceuil.html" rel="nofollow noopener noreferrer" target="_blank">Acceuil</b></a>
    </div>
  </div>
  <div class="main-content">
<div class="home-slider">
  <div id="particles-js" style="height: 625px; position: absolute; width: 100%;"></div>
  <div class="home-slider-body">
<center>    <img class="home-logo" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT89EJZEFNVT9wRkoI1SD9o1W8ObvsRgWBvkm50p0W4irLkDhOXDxklVA"></center>
    <p class="home-version">Bienvenue sur le site élève !</p>
<center><a href="CGU.hmtl" rel="nofollow noopener noreferrer" target="_blank">Conditions générales d'utilisation</a></center>

  </div>
</div>
</body>
</main>
</html>

Bien vous,Reddox

EDIT : Ajout des balises de code

A voir également:

Button/image redirectrice
Image iso - Guide
Acronis true image - Télécharger - Sauvegarde
Google recherche par image - Guide
Faststone image viewer - Télécharger - Visionnage & Diaporama
Image - Guide

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
22 sept. 2016 à 23:30

Bonjour,

Comme ceci ?

<a href="url_du_lien" rel="nofollow noopener noreferrer" target="_blank">
 <img class="home-logo" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT89EJZEFNVT9wRkoI1SD9o1W8ObvsRgWBvkm50p0W4irLkDhOXDxklVA"></img>
</a>

Réponse 2 / 2

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
22 sept. 2016 à 23:32

Sinon tu peux aussi utiliser du CSS

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}

et sur tes liens tu attribues la class button

<a class="button" href="url_du _lien" rel="nofollow noopener noreferrer" target="_blank">mon joli bouton</a>

Reddox
24 sept. 2016 à 13:22

Bonjour, Merci pour votre réponse ! Effectivement les deux marchent même sur des navigateurs "vieux". Savez vous si cela est possible d'incorporer cette image dans un sous menu déroulant ? Coordialement, Reddox

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > Reddox
24 sept. 2016 à 15:39

Oui c'est faisable.
Mais pour le coup c'est une autre question.
Merci donc de mettre ce sujet en résolu (lien qui se trouve sous le titre de ta question) et d'en ouvrir un nouveau concernant ce nouveau sujet.

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

Power Button Lockout...

Discussions similaires

Newsletters