Hyperliens utiles avec JavaScript

Là, vous surfez avec plaisir un site Web; Vous cliquez sur un lien et vous retrouvez soudainement sur un autre site invité à télécharger un fichier. Que s'est-il passé là-bas? Ennuyeux, n'est-ce pas? Il doit y avoir une meilleure façon d'indiquer à vos visiteurs où va un lien et à quel type de fichier. Donc, pour aider à résoudre cette petite gêne, j'ai écrit un peu de JavaScript et CSS qui ajoute de jolies petites icônes après les liens - selon l'extension et l'emplacement du fichier - pour indiquer à l'utilisateur le type de document qu'ils sont sur le point de charger.

Vous pouvez télécharger le code ici et voir un exemple.

Les plats clés

• L'article fournit une solution JavaScript et CSS pour ajouter des icônes à côté des hyperliens, indiquant le type de fichier que le lien mène ou si le lien mène à un site externe. Cette solution vise à améliorer l'expérience utilisateur en fournissant des indices visuels clairs.
• La solution est conçue pour être simple, facile à utiliser et compatible avec tous les navigateurs modernes, y compris IE6. Il se dégrade gracieusement lorsque CSS ou JavaScript est désactivé et limite l'utilisation du fichier à un fichier javascript et à un fichier CSS.
• La solution implique la création d'un fichier JavaScript (ikonize.js) et d'un fichier CSS (ikonize.css). Le fichier JavaScript détermine l'extension de fichier de chaque hyperlien et ajoute la classe et l'icône CSS appropriées. Le fichier CSS contient les classes d'icônes.
• La solution a des limitations: elle ne reconnaît pas les liens de navigation basés sur la chaîne de requête, et un lien doit avoir une extension de fichier pour avoir une icône attribuée (sauf s'il s'agit d'un site externe). Si CSS est désactivé, seule l'icône de liaison externe s'affiche et si JavaScript est désactivé, il n'y a pas de modifications visibles à la page.

le bref

Les principales considérations lors de la création de cette fonctionnalité étaient:

1. Simplicité - Il doit être facile à utiliser


2. Dégradation gracieuse - Dans le cas de CSS ou / et JavaScript étant désactivé


3. Utilisation minimale des fichiers - un seul javascript et un fichier CSS


4. le faire aussi plug-and-play que possible - il peut donc être rapidement ajouté à un site


5. limiter la quantité globale de code


6. Compatibilité avec tous les navigateurs modernes, y compris IE6

Pourquoi l'éloignement d'une solution CSS uniquement?

Vous pouvez déjà le faire dans CSS, en utilisant des sélecteurs d'attribut. Voici un exemple:

a[href$='.doc'] { <br>
  display: inline-block; <br>
  padding-left: 16px; <br>
  background: transparent url(images/icon_doc.gif) center right no-repeat; <br>
}

Alors pourquoi le feriez-vous avec un script, alors que la plupart des navigateurs modernes afficheront les icônes en utilisant uniquement CSS?

La réponse est simple: IE6. Tous les navigateurs décents prennent en charge les sélecteurs d'attribut CSS3… sauf IE6. Ce morceau de script avec CSS fait que IE6 joue bien; En fait, cela fonctionne même dans IE5.5.

Inspiration et crédit

Avant de commencer, je voudrais reconnaître les excellentes icônes de soie - et gratuites de Mark James à Famfamfam, que nous utiliserons dans cet article.

Aussi, crédit où le crédit est dû: Cet article a été inspiré par la pièce iconisez des TextLinks avec CSS par Alexander Kaiser, qui a été à son tour inspiré par Ask the CSS’s Guy montrant des indices hyperliens avec CSS. De plus, j'ai utilisé quelques excellentes fonctions écrites par James Edwards de SitePoint, et quelques autres tirés de la bibliothèque JavaScript de base, écrite par Kevin Yank et Cameron Adams et immortalisé dans le livre de site, tout simplement javascript.

Alors, comment ça marche?

Eh bien, en un mot: nous prenons tous les liens de la page, élaborons l'extension de fichier qu'il se lie, puis nous ajoutons l'icône appropriée après le lien. Bon.

Pour que tout fonctionne, il y a trois fichiers impliqués:

1. La page HTML contenant les liens, index.html


2. Le fichier CSS contenant les classes d'icônes, ikonize.css


3. Le fichier JavaScript qui ajoute les classes et icônes CSS aux liens, ikonize.js

La méthode de démarrage rapide

Maintenant, si vous souhaitez contourner les pourquoi et lesquels, et que vous voulez simplement l'ajouter à votre page, voici la version courte:

1. Ajoutez les liens aux fichiers JavaScript et CSS dans l'en-tête de la page (modifiez les références de fichier en fonction de la configuration de votre site).
   
   


2. Mettez votre dossier d'icônes sur votre site et assurez-vous que les références URL sont correctes dans le fichier ikonize.css.


3. Appelez la fonction JavaScript ikonize à partir d'une balise de script incluse juste avant la balise du corps de clôture, comme ainsi:
   

Voir - Je vous ai dit que c'était simple à utiliser!

Pour la simplicité, j'ai choisi d'appeler la fonction à l'intérieur du HTML une fois le DOM chargé. Il existe d'autres moyens d'y parvenir en utilisant JavaScript, mais ils dépassent le cadre de cet article.

L'explication complète

se rendre à l'aise, nous allons nous plonger dans le fonctionnement intérieur.

Configuration

Dans l'esprit de garder les choses simples, la majeure partie de la configuration est déjà fait pour vous. Vous n'aurez à modifier la configuration que si vous devez modifier les icônes ou les extensions de fichiers. Il y a deux endroits pour apporter ces modifications: le javascript (ikonize.js) et le fichier CSS (ikonize.css).

Configurer ikonize.js

En haut du fichier, vous verrez toutes les variables de configuration: classprefix, classexternal et classicoloc.

a[href$='.doc'] { <br>
  display: inline-block; <br>
  padding-left: 16px; <br>
  background: transparent url(images/icon_doc.gif) center right no-repeat; <br>
}

classPrefix is the prefix you want to give the individual CSS classes. Use this to prevent any conflicts with any existing CSS classes. The default is iKon_.

classExternal is the name of the CSS class you want to use to show a link to an external site.

Quels liens recevront une icône?

Pour définir le type de fichier auquel le lien va, nous examinerons l'extension de fichier. Les types de fichiers sont divisés en deux groupes: ceux qui ont des icônes uniques, telles que les fichiers torrent, et ceux qui partageront la même icône, mais ont des extensions de fichiers différentes, telles que les fichiers flash (.fla et .swf).

Le regroupement des extensions de fichiers qui partagent la même icône vous évite d'avoir des centaines de cours et d'icônes CSS. Pour y parvenir, j'ai créé deux tableaux.

Le premier tableau, IndividualClassArray, contient les extensions de fichiers de tous les liens avec des icônes individuelles. La base du nom de la classe CSS est la même que l'extension de fichier. Autrement dit, un fichier texte est référencé avec «TXT» et le nom de classe CSS est le nom de classe ClassPrefix (set plus tôt) et «TXT» le nom de la classe CSS, faisant une classe CSS appelée «ikon_txt» dans ce cas.

a[href$='.doc'] { <br>
  display: inline-block; <br>
  padding-left: 16px; <br>
  background: transparent url(images/icon_doc.gif) center right no-repeat; <br>
}

Le deuxième tableau, Classarray, est en fait un tableau multidimensionnel, mais ne laissez pas cela vous repousser. Fondamentalement, c'est un groupe de tableaux individuels regroupés en fonction du type d'icône que nous aimerions utiliser. Le premier élément de ce tableau est IndividualClassArray (ce tableau doit toujours être le premier tableau). Les tableaux suivants sont similaires au tableau précédent avec une différence importante: le premier élément de chacun des tableaux est le nom de la classe CSS qui sera utilisé, et les éléments suivants sont les extensions de fichier qui ont besoin de cette classe. Dans l'exemple suivant, les extensions de fichiers .swf et .fla seront associées à la classe CSS «Flash».

classPrefix is the prefix you want to give the individual CSS classes. Use this to prevent any conflicts with any existing CSS classes. The default is iKon_.

Remarque: les extensions de fichiers excluent le point, c'est-à-dire xls pas .xls.

Pour la portabilité maximale, le nom de classe CSS réel utilisé aura un préfixe tel que «ikon_», que nous avons configuré plus tôt - mais dans ces tableaux, nous toujours exclure le préfixe. Ainsi, une classe CSS Flash est toujours appelée «flash» plutôt que «ikon_flash».

liens externes

Pour déterminer si un lien est un site externe, nous devons connaître le nom d'hôte de la page actuelle.

Pour cela, nous utilisons:

classExternal is the name of the CSS class you want to use to show a link to an external site.

Cela prend l'emplacement du document actuel et obtient le nom de domaine à l'aide de la fonction QualifyHref pour s'assurer que nous avons une adresse entièrement qualifiée et la fonction ParsEURL pour obtenir le nom d'hôte. (Ces deux fonctions ont été écrites par notre gourou Javascript résident, Brothercake, et couverts dans son article de blog). Plus tard, lorsque nous ajouterons les classes pour les liens externes, nous utiliserons ce nom d'hôte pour déterminer si le lien est externe à notre site.

le code qui fait réellement le travail

Maintenant, nous devons obtenir tous les liens de la page à l'aide de document.getElementsByTagName ("A"), et déterminer l'extension de fichier du lien.

Nous le faisons en utilisant à nouveau les fonctions ParsEURL et QualifyHref.

Tout d'abord, prenez la valeur HREF de l'élément A:
linkHref = aelements [iv] .href;

Ensuite, analysez la valeur pour gagner plus d'informations sur le lien:
Ourl = ParsEURL (QualifyHref (linkhref));

puis obtenez l'extension du lien:
FileExt = Ourl.Extension;

Ensuite, nous devons parcourir ces liens et déterminer s'ils ont besoin d'une icône. C'est là que cela commence à devenir un peu plus délicat. Nous devons nous faire une boucle dans ClassArray et chacun des tableaux qu'il contient. Nous le faisons en exécutant une boucle dans une boucle. Oui, c'est une boucle, dans une boucle, dans une boucle! Ce morceau de code poilu ressemble à ceci:

a[href$='.doc'] { <br>
  display: inline-block; <br>
  padding-left: 16px; <br>
  background: transparent url(images/icon_doc.gif) center right no-repeat; <br>
}

ce lien nécessite-t-il une icône?

Pour savoir si nous devons ajouter une icône, nous comparerons l'extension de fichier du lien avec chacune des extensions répertoriées dans nos tableaux.

classPrefix is the prefix you want to give the individual CSS classes. Use this to prevent any conflicts with any existing CSS classes. The default is iKon_.

classExternal is the name of the CSS class you want to use to show a link to an external site.

Liens vers des sites externes

L'entraînement si le lien est vers un site externe n'est qu'un cas de comparaison du nom d'hôte URL que nous avons déterminé plus tôt avec l'URL que nous définissons dans la zone de configuration.

externalIconLoc is the location of the image to use for the external icon.

Si c'est vrai, nous allons ajouter un nouvel élément d'image dans l'ancre, ajouter une source et un ID, puis ajouter un attribut Alt et Title pour l'image. Nous ajoutons l'icône supplémentaire plutôt que d'attribuer une classe pour montrer clairement que ce lien va à un autre site, ainsi que l'ajout de titres et d'attributs alt à l'icône.

IndividualClassArray = Array('txt', 'xls', 'css', 'torrent');

les classes CSS

Remettons maintenant dans le fichier CSS.

Voici notre classe CSS pour ajouter l'icône aux fichiers .doc. Remarquez que le nom de classe est préfixé avec «ikon_», puis l'extension de fichier «doc». Cette classe met essentiellement un peu de rembourrage en haut et en bas, et à droite du lien. Il ajoute ensuite une image d'arrière-plan de l'icône dans cet espace.

classArray = Array(  <br>
IndividualClassArray,  <br>
Array('flash', 'swf', 'fla')  <br>
);

Pour nos icônes de liaison externes, nous utiliserons une structure de classe légèrement différente. Nous ajoutons du rembourrage en haut et en bas pour nous assurer que notre icône est sans bordure.

url = parseURL(qualifyHREF(document.location.href)).hostname;

Si vous avez modifié la variable ClassPrefix, n'oubliez pas de modifier ces noms de classe pour correspondre.

limitations

Le lien doit avoir une extension de fichier pour avoir une icône attribuée au lien (sauf s'il s'agit d'un site externe). Le script ne reconnaît pas non plus les liens de navigation basés sur la chaîne de requête. Si CSS est désactivé, seule l'icône de liaison externe s'affiche et si JavaScript est désactivé, il n'y a pas de modifications visibles à la page.

Conclusion

ikonize est un moyen rapide et facile d'ajouter des icônes visuellement significatives après des liens. Le script fonctionne dans IE5.5 et peut fonctionner indépendamment des sélecteurs d'attribut CSS3. Comme vous pouvez vous y attendre, le script se dégrade bien et est facilement configuré. J'espère que vous le trouverez utile!

Les questions fréquemment posées sur les hyperliens en javascript

Comment puis-je créer un hyperlien en utilisant JavaScript?

La création d'un hyperlien à l'aide de JavaScript implique de manipuler le modèle d'objet de document (DOM). Vous pouvez créer un nouvel élément d'ancrage, définir son attribut HREF, puis l'ajouter au corps du document. Voici un exemple simple:

var link = document.CreateElement ('a');
link.href = "https://www.example.com";
link.textContent = "Go to Example.com";
document.body.AppendChild (lien);
Dans ce code, nous créons d'abord un nouvel élément de Anchor, puis de l'attribut dans le HREF dans ce code dans le code dans ce code dans le code dans ce code dans le code dans ce code dans le code dans ce code dans le COD URL de la page vers laquelle nous voulons lier. Nous définissons ensuite le texte du lien, et enfin ajoutez le lien vers le corps du document.

Comment puis-je modifier la cible d'un hyperlien à l'aide de JavaScript?

La cible d'un hyperlien peut être modifiée à l'aide de l'attribut "cible". Cet attribut spécifie où ouvrir le document lié. Il peut être défini sur «_blank» pour ouvrir le document dans une nouvelle fenêtre ou onglet, «_self» pour ouvrir le document dans la même trame qu'il a été cliqué (ceci est par défaut), «_parent» pour ouvrir le document dans le cadre parent, ou «_top» pour ouvrir le document dans le corps complet de la fenêtre. Voici un exemple:

var link = document.CreateElement ('a');
link.href = "https://www.example.com";
link.target = "_blank";
link.textContent = "allez à l'exemple";
document.body.body.APPEndChild (lien); est défini sur «_blank», ce qui signifie que le lien s'ouvrira dans une nouvelle fenêtre ou onglet.

Comment puis-je ajouter un titre à un hyperlien à l'aide de JavaScript?

Le titre d'un hyperlien peut être ajouté en utilisant l'attribut «Title». Cet attribut fournit des informations supplémentaires sur le lien, telles que le nom du document lié, et est souvent affiché sous forme d'info-bulle lorsque la souris se déplace sur le lien. Voici un exemple:

var link = document.createElement ('a');
link.href = "https://www.example.com";
link.title = "go to example.com";
link.textContent = "Example";
Document.Body est un jeu de titres. "Allez à Example.com", qui sera affiché sous forme d'info-bulle lorsque la souris se déplace sur le lien.

Comment puis-je supprimer un hyperlien à l'aide de JavaScript?

Un hyperlien peut être supprimé à l'aide de la méthode "removechild". Cette méthode supprime un nœud enfant spécifié de l'élément spécifié. Voici un exemple:

var link = document.getElementById ('myLink');
link.parentNode.RemoveChild (lien);
Dans ce code, nous obtenons d'abord l'élément de lien par son ID, puis le supprimais de son nœud parent.

Comment puis-je modifier le texte d'un hyperlien à l'aide de JavaScript?

Le texte d'un hyperlien peut être modifié à l'aide de la propriété «TextContent». Cette propriété définit ou renvoie le contenu texte du nœud spécifié et de tous ses descendants. Voici un exemple:

var link = document.getElementById ('myLink');
link.textContent = "New Link Text";
Dans ce code, nous obtenons d'abord l'élément de lien par son identifiant, puis je peux modifier son contenu texte en " en utilisant la propriété «style». Cette propriété est utilisée pour ajouter, modifier ou supprimer les styles en ligne d'un élément. Voici un exemple:

var link = document.getElementById ('myLink');

link.style.color = "red";

link.style.fontsize = "20px";
Dans ce code, nous obtenons d'abord l'élément de lien par son id, puis je peux changer de couleur en rouge et sa taille de police vers 20 pixels. Écouteur d'événements dans un lien hypertexte à l'aide de JavaScript?

Un écouteur d'événements peut être ajouté à un hyperlien en utilisant la méthode «AddeveventListener». Cette méthode attache un gestionnaire d'événements à l'élément spécifié. Voici un exemple:

var link = document.getElementById ('myLink');

link.addeventListener ('click', function () {

alert ('Vous avez cliqué sur le lien!');

});

Dans ce code, nous obtenons d'abord l'élément de lien par ID, puis, puis attache un clic de l'événement. Lorsque le lien est cliqué, une boîte d'alerte sera affichée.

Comment puis-je empêcher un hyperlien de suivre l'URL à l'aide de JavaScript?

Un hyperlien peut être empêché de suivre l'URL à l'aide de la méthode «empêcherdefault». Cette méthode annule l'événement si elle est annulée, ce qui signifie que l'action par défaut qui appartient à l'événement ne se produira pas. Voici un exemple:

var link = document.getElementById ('myLink');

link.addeventListener ('click', fonction (événement) {

event.preventDefault ();

alert ('vous avez cliqué sur le lien, mais il ne suivait pas le lien. Son identifiant, puis joignez un écouteur d'événements de clic. Lorsque le lien est cliqué, il ne suivra pas l'URL et une boîte d'alerte sera affichée à la place.

Comment puis-je créer un hyperlien qui télécharge un fichier à l'aide de JavaScript?

Un hyperlien qui télécharge un fichier peut être créé à l'aide de l'attribut «Télécharger». Cet attribut spécifie que la cible sera téléchargée lorsqu'un utilisateur clique sur l'hyperlien. Voici un exemple:

var link = document.createelement ('a');
link.href = "https://www.example.com/myfile.pdf" Fichier ";
document.body.appendChild (lien);

Dans ce code, nous créons d'abord un nouvel élément d'ancrage, puis définissons son attribut HREF à l'URL du fichier que nous voulons télécharger. Nous définissons ensuite l'attribut de téléchargement au nom du fichier et avons enfin ajouté le lien vers le corps du document.

Comment puis-je créer un hyperlien qui ouvre un client de messagerie à l'aide de JavaScript?

Un hyperlien qui ouvre un client de messagerie peut être créé à l'aide du protocole «MailTo:» dans l'attribut HREF. Ce protocole ouvre le client de messagerie de l'utilisateur avec un nouveau message, prêt à être envoyé. Voici un exemple:

var link = document.createelement ('a');
link.href = "mailto: example.com";
link.textContent = "Email Me";
Document.Body.APPENDCHILD (Link);
Dans ce code, nous créons d'abord un nouvel élément anchor, ensuite définir son attribut Href «Mailto: example@example.com». Nous définissons ensuite le texte du lien, et enfin ajoutez le lien vers le corps du document.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!