28220 sujets

CSS et mise en forme, CSS3

[résolu] Style différent pour un lien interne ou externe

Pages :
Je croit que c'est possible mais je n'ai pas trouvé sur google.
Comment faire pour que les liens du type

http://css.alsacreations.com/Tutoriels-et-articles-divers/Afficher-Masquer-des-calques-sans-javascript
http://css.alsacreations.com/Bases-et-indispensables/Quelle-est-la-difference-entre-un-div-et-un-calque
http://css.alsacreations.com/Tutoriels-JavaScript/Faire-apparaitre-des-popups-sans-nouvelle-fenetre
...

s'affiche différement qu'un lien vers

http://www.w3.org/
Modifié par Toutankharton (18 Jul 2005 - 02:11)
Bonjour,

De quelle différence entre ces liens veux-tu tenir compte exactement ? De leur NDD, ou du fait que le chemin est plus ou moins développé ? autre ?

En tous cas, quelques pistes :

Tu peux tenter d'utiliser les sélecteurs d'attributs avancés, CSS2.1 ou CSS3, pour distinguer les liens selon la valeur de l'attribut href... mais ce ne sera pas supporté par la majorité des navigateurs.

Tu peux également mettre tout simplement une classe, à la main (mais je suppose que c'est ce que tu souhaites éviter)

Finalement, un javascript serait encore la solution la plus efficace, en veillant à ce que la présentation des liens reste pertinente sans javascript...
Modifié par Laurent Denis (15 Jul 2005 - 10:42)
J'opte pour la solution des selecteurs avancés (que je vient de découvrir, merci à toi !). Mon but était d'indiquer à l'internaute que s'il clique, il quitte le site, et donc lui laisser le choix de le garder en arriere plan grace à un roulette-clique. La classe à la main était trop difficile, et le javascript, c'est bof et puis je suis pas un pro ^^

Merci donc, ça marche tres bien Smiley smile
Peux tu donner ta solution avec selecteur CSS ?

J'aurais bien fait un : a[href="http://mon.site.fr/*"] { ... }
Mais ca ne marche pas ^^ ... alors je serais curieux de vois ta solution Smiley smile
Toutankharton a écrit :
La classe à la main était trop difficile, et le javascript, c'est bof et puis je suis pas un pro ^^


Smiley bawling

Le JS était pourtant super adapté pour ça Smiley ohwell
Une fonction de rien du tout qui vérifie la partie nom de domaine des liens et zou attribution d'une class ...

Pour ton sélecteur, je crois que c'est a[href~=http://mon.site.fr/]
Mais fais gaffes, tes liens seront sûrement relatif dans ta page donc pas de http://mon.site.fr mais direct le nom du dossier.
a écrit :

a[type="externe"]:after { content: "\0000a0"url(objets/externe.gif); }
a[type="externe"] { color:#b80124 !important; }


mes liens <a href="" type="externe"> s'afficheront en rouge avec une petite image à droite. le !important est là pour que le rouge soit pris en compte par rapport au bleu des autres liens...
type sur un lien, c'est valide ça ? surtout avec une telle valeur ! normalement c'est un type MIME qu'on met dans type et pour les liens je doute que ça soit valide.
J'aurais mis rel="external" ou class="externe"

Et mettre type="externe", tu le fais à la main aussi ? donc autant mettre une class et a.taclass pour que ça passe sur tous les navigateurs Smiley ohwell

Je cerne mal ta logique sur ce coup...
Modifié par Olivier (15 Jul 2005 - 11:21)
Olivier a écrit :


Smiley bawling

Le JS était pourtant super adapté pour ça Smiley ohwell
Une fonction de rien du tout qui vérifie la partie nom de domaine des liens et zou attribution d'une class ...

Pour ton sélecteur, je crois que c'est a[href~=http://mon.site.fr/]
Mais fais gaffes, tes liens seront sûrement relatif dans ta page donc pas de http://mon.site.fr mais direct le nom du dossier.


Mon systeme est à la limite entre le manuel et l'automatique, et c'est pour la raison que tu cite que je n'ai pas fait une comparaison de l'url dans les selecteurs.

Pour ce qui est du javascript, je n'y connais rien du tout, mais si tu as un bout de script à me filer, je veux bien tester les différentes possibilités Smiley smile
Toutankharton a écrit :

Pour ce qui est du javascript, je n'y connais rien du tout, mais si tu as un bout de script à me filer, je veux bien tester les différentes possibilités Smiley smile


Mwé, je verrais pour te faire un truc si j'ai du temps tout à l'heure.
oki merci, j'avoue qu'apres reflexion mon truc est pas plus simple qu'un class="".... Je m'en vais chercher de mon côté des trucs sur javascript, en attendant que tu trouve un truc si t'as le temps
Toutankharton a écrit :
Je m'en vais chercher de mon côté des trucs sur javascript


Pitié ! nan !
Tu vas tomber sur un truc foireux sur l'éditeur javascript et là tu pourra dire que le JS c'est de la mert' !

Tu vas me motiver à faire le truc Smiley biggol 

window.onload = function() {
        ExternUrl();
}

function ExternUrl()
{
	var url;
	var e		= document.getElementsByTagName( 'a' );
	var res;

	for (var i=0 ; i<e.length ; i++)
	{
		url = e[i].href;

			if (!(url.match(/^http:.*monsite.fr/i) || url.substr(0,4)!='http'))
				e[i].setAttribute('class' , 'external');
	}
}


et tu definis la class : a.external dans ton CSS[/i][/i]
Modifié par afbilou (15 Jul 2005 - 11:38)
le test :
if (!(url.match(/^http:.*monsite.fr/i) || url.substr(0,4)!='http'))
qui peut sembler foireux ou bancal c'est parce que Firefox et IE ne donne pas la meme chose pour les URL.
L'un des deux ne mets pas les urls relatives : ils les rends absolues quand on veut les lire.
Toutankharton a écrit :

a[type="externe"]:after { content: "\0000a0"url(objets/externe.gif); }
a[type="externe"] { color:#b80124 !important; }


mes liens <a href="" type="externe"> s'afficheront en rouge avec une petite image à droite. le !important est là pour que le rouge soit pris en compte par rapport au bleu des autres liens...

<edit>, zut, pas vu le message d'Olivier ci-dessus</>

Aïe, confusion sur le rôle de l'attribut type Smiley cligne

En effet, type ne sert pas à renseigner sur la nature du lien, et ne peut pas recevoir des valeurs arbitraires. Il sert à indiquer le type mime de la cible du lien, avec des valeurs normalisées (text/html, application/..., etc)

L'attribut qui convient pour tes "externe" et "interne" est l'attribut rel, dont les valeurs peuvent être étendues (en théorie, il faut écrire un profile qui les définit, mais personne ne va en mourir si tu ne fais pas).

Mais la solution javascript me semble vraiment une meilleure piste ici.
Modifié par Laurent Denis (15 Jul 2005 - 11:37)
Il y a aussi la possibilité de le faire en PHP. Avec des fonctions comme ob_start(), parse_url(), ereg() et des variables comme $_SERVER["HTTP_HOST"] tu devrais y arriver.
afbilou a écrit :
le test :
if (!(url.match(/^http:.*monsite.fr/i) || url.substr(0,4)!='http'))
qui peut sembler foireux ou bancal c'est parce que Firefox et IE ne donne pas la meme chose pour les URL.
L'un des deux ne mets pas les urls relatives : ils les rends absolues quand on veut les lire.


Ton code ne marchera pas sous IE non plus, setAttribute('class', 'extern') ne sera pas reconnu par IE pour une sombre raison.
Il faut doubler l'écriture et écrire :

machin.setAttribute('class', 'extern');
machin.setAttribute('className', 'extern');


Ou bien écrire

machin.className='extern';

Mais je trouve ça moins élégant que la méthode setAttribute.

Par ailleurs, lorsqu'on "joue" avec les class, il ne faut pas faire comme ça, en effet, class="" peut prendre plusieurs valeurs en même temps, donc si certains liens ont déjà une class pour une raison X ou Y avec ce que tu as fais là, il faut faire donc "ajouter" la valeur de la nouvelle class à une éventuelle précédente en n'oubliant pas l'espace séparateur des class.
Tu peux aussi simplement utiliser le sélecteur a[href^="http://"] si tous les liens internes sont en relatif. Mais on dirait que c'est du CSS3... on en reparle dans 10 ans alors ?
C'est certain que le code que je lui donne doit etre un minimum adapté a ses besoins. Pour le class a ajouter ca ne m'avait pas traversé l'esprit mais c'est le genre de chose dont on se rend vite compte lorsque l'on utilise des classes multiples pour un seul element.

Pour ce qui est du setAttribute ... j'etais persuadé que IE le comprenait.
Il y a bien le setProperty (pour agir sur les proprietes et valeurs de style de l'element) que IE ne gere pas mais pour le cas de setAttribute je ne m'en souvenais plus.
Bon ben voila un exemple qui marche sous IE et FF [et surement d'autres Smiley smile ]


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

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

<head>
	<title>Test</title>

	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

	<style type="text/css">
		a.pouet {
			font-size:			2em;
		}
		a.external {
			background-color:	red;
		}
	</style>

	<script type="text/javascript">
	window.onload = function() {
		ExternUrl();
	}

	function ExternUrl()
	{
		var url;
		var e		= document.getElementsByTagName( 'a' );

		for (var k=0 ; k<e.length ; k++)
		{
			url = e[k].href;

			if (!(url.match(/^http:.*monsite\.fr/i) || url.substr(0,4)!='http'))
			{
				e[k].setAttribute('class' , e[k].getAttribute('class') + ' external');
				e[k].setAttribute('className' , e[k].getAttribute('className') + ' external');
			}
		}
	}
	</script>
</head>

<body>

	<p>
		Un lien <a href="truc/super.html">interne</a>
		<br />
		Un lien <a class="pouet" href="http://oulala.ouke.je.vais.comme.ca">externe</a>
		<br />
		Un lien <a href="http://oulala.ouke.je.vais.encore.comme.ca">externe</a>
	</p>

</body>

</html>

Modifié par afbilou (18 Jul 2005 - 07:21)
Pages :
Sujet clos
Aller à