Liens images

Bonjour à tous,

Voilà je viens vous voir car j'ai utilisé une technique de mise en forme pour mes liens issus d'alsa... En voici le code:

HTML

<div id="rightbox">
    <div id="home"><a href="../index.html" accesskey="1"></a></div>
    <div id="resto"><a href="../resto.html"></a></div>
    <div id="expo"><a href="../expo.html"></a></div>
    <div id="concert"><a href="../concert.html"></a></div>
    <div id="retro"><a href="../retro.html"></a></div>
	<div id="infos"><a href="../infos.html"></a></div>
    <div id="contact"><a href="../contact.html" accesskey="7"></a></div>
    <div id="partenaire"><a href="../partenaire.html"></a></div>
  </div>

CSS

#home {
	background-image: url(images/btn_home_hover.jpg);
	height: 22px;
	width: 100px;
	float: right;
	margin-bottom: 5px;
}

#home a {
	background-image: url(images/btn_home.jpg);
	display: block;
	height: 22px;
	width: 100px;
	float: right;
}

#home a:hover {
	background-image: none;
}


#resto {
	background-image: url(images/btn_resto_hover.jpg);
	height: 22px;
	width: 100px;
	float: right;
	margin-bottom: 5px;
}

#resto a {

	background-image: url(images/btn_resto.jpg);
	display: block;
	height: 22px;
	width: 100px;
	float: right;
}

#resto a:hover {

	background-image: none;
}

#expo {

	background-image: url(images/btn_expo_hover.jpg);
	height: 22px;
	width: 100px;
	float: right;
	margin-bottom: 5px;
}

#expo a {

	background-image: url(images/btn_expo.jpg);
	display: block;
	height: 22px;
	width: 100px;
	float: right;
}

#expo a:hover {

	background-image: none;
}

#concert {

	background-image: url(images/btn_concert_hover.jpg);
	height: 22px;
	width: 100px;
	float: right;
	margin-bottom: 5px;
}

#concert a {

	background-image: url(images/btn_concert.jpg);
	display: block;
	height: 22px;
	width: 100px;
	float: right;
}

#concert a:hover {

	background-image: none;
}

#retro {
	background-image: url(images/btn_retro_hover.jpg);
	height: 22px;
	width: 100px;
	float: right;
	margin-bottom: 5px;
}

#retro a {

	background-image: url(images/btn_retro.jpg);
	display: block;
	height: 22px;
	width: 100px;
	float: right;
}

#retro a:hover {

	background-image: none;
}

#infos {


	background-image: url(images/btn_infos_hover.jpg);
	height: 22px;
	width: 100px;
	float: right;
	margin-bottom: 5px;
}

#infos a {


	background-image: url(images/btn_infos.jpg);
	display: block;
	height: 22px;
	width: 100px;
	float: right;
}

#infos a:hover {


	background-image: none;
}

#contact {

	background-image: url(images/btn_contact_hover.jpg);
	height: 22px;
	width: 100px;
	float: right;
	margin-bottom: 5px;
}

#contact a {

	background-image: url(images/btn_contact.jpg);
	display: block;
	height: 22px;
	width: 100px;
	float: right;
}

#contact a:hover {

	background-image: none;
}

#partenaire {

	background-image: url(images/btn_partenaire_hover.jpg);
	height: 22px;
	width: 100px;
	float: right;
	margin-bottom: 5px;
}

#partenaire a {

	background-image: url(images/btn_partenaire.jpg);
	display: block;
	height: 22px;
	width: 100px;
	float: right;
}

#partenaire a:hover {

	background-image: none;
}

Seulement voilà, lorsque je désactive le CSS, mes liens n'aparaissent plus... Ma question est :

Est-ce possible d'afficher mes liens en mode CSS désactivé sans l'apport de texte dans l'HTML ?


Merci.
Modifié par Connexion (18 Nov 2006 - 13:22)

Salut,

a écrit :
Est-ce possible d'afficher mes liens en mode CSS désactivé sans l'apport de texte dans l'HTML ?

A un moment donné, tu seras obligé d'avoir une information textuelle dans le code html ! Sinon pas d'information du tout. Tu as le choix d'intégrer tes images directement dans le code html et de les renseigner par l'attribut alt, ce sera le plus simple.
Utiliser les images en background css devrait t'obliger à avoir du texte dans le html masqué par la CSS. Le problème est que les techniques existantes ne sont pas parfaites et posent chacunes des problèmes différents.
On m'a conseillé celle-ci dessous récemment, mais je n'ai pas encore eu le temps de l'appliquer. Cela semblerait être la meilleure. A tester donc...
http://forum.alsacreations.com/topic.php?fid=6&tid=13599&s=#p106746
Modifié par Mikachu (18 Nov 2006 - 16:40)

message supprimé. Répondu trop vite.
Modifié par benj (18 Nov 2006 - 13:51)

Mikachu a écrit :
On m'a conseillé celle-ci récemment, mais je n'ai pas encore eu le temps de l'appliquer. Cela semblerait être la meilleure. A tester donc...

Hmm... avec un petit lien en prime, por favor ?

Une des solutions préconisées est l'utilisation d'un text-indent négatif très important pour faire sortir le texte de la zone visible de la page. On peut aussi utiliser la propriété CSS clip sur un span contenant le texte du lien. Il y a encore deux ou trois autres possibilités.

Toutes peuvent potentiellement poser problème, dans le cas où une image ne se chargerait pas tandis que, la feuille de style étant chargée, le texte serait masqué.

La solution la plus accessible et la plus robuste (mais pas forcément la plus intéressante pour la maintenance ou la refonte graphique d'un site) est de passer par des images dans le code HTML, avec attributs alt correctement renseignés.

Dans tous les cas, tu vas avoir besoin de fournir cette information (le texte des liens) de manière textuelle et non pas uniquement graphique... ne serait-ce que pour les moteurs de recherche !

Oups j'ai oublié de copier l'adresse, la voici :
http://forum.alsacreations.com/topic.php?fid=6&tid=13599&s=#p106746

Bonsoir,

après lecture de vos posts et une revisualisation du design du site j'en suis venu à ceci:

Le design de mon header me donne un espace d'environ 20 px en hauteur, celui-ci est de couleur noir sans degradé.

J'ai donc mis mes liens en liste (ul,li) et donné une couleur noir au texte ainsi que cette même couleur au :hover. De cette façon ces liens ne sont pas visible graphiquement mais sont présent dans l'HTML.

Je pense que cette façon de faire va sans doute en brusquer plus d'un mais elle me permet d'avoir mais mes liens bien en haut de la page lorsque celle-ci est affichée sans style CSS, chose qui je pense n'est pas négligable...

Pour ce qui est de la naviguation à l'aide de la touche TAB, là, ils rentrent en compte, chose qui ne m'interesse pas vu que les liens "images" sont déjà repris. Je devrais donc indexé l'ordre des liens.

Alors voilà, j'aimerais que vous me disiez si je fais mal et si oui pour quelles raisons.

Voici le code:

  <div id="header">
    <ul>
      <li><a name="up" id="up"></a> <a href="../index.html">home</a></li>
      <li><a href="../resto.html">resto</a></li>
      <li><a href="../expo.html">expo</a></li>
      <li><a href="../concert.html">concerts</a></li>
      <li><a href="../retro.html">retro</a></li>
      <li><a href="../infos.html">infos</a></li>
      <li><a href="../contact.html">contact</a></li>
      <li><a href="../partenaire.html">partenaires</a> </li>
    </ul>
  </div>
  <div id="leftbox"></div>
  <div id="rightbox">
    <div id="home"><a href="../index.html" accesskey="1"></a></div>
    <div id="resto"><a href="../resto.html"></a></div>
    <div id="expo"><a href="../expo.html"></a></div>
    <div id="concert"><a href="../concert.html"></a></div>
    <div id="retro"><a href="../retro.html"></a></div>
    <div id="infos"><a href="../infos.html"></a></div>
    <div id="contact"><a href="../contact.html" accesskey="7"></a></div>
    <div id="partenaire"><a href="../partenaire.html"></a></div>
  </div>

Modifié par Connexion (18 Nov 2006 - 19:11)

Connexion a écrit :
Alors voilà, j'aimerais que vous me disiez si je fais mal et si oui pour quelles raisons.

Tu fais mal pour deux raisons :
- suivant les contextes d'utilisation (dont la navigation au clavier), tes liens invisibles seront pris en compte, et tu auras un menu de navigation en double... quant aux lecteurs d'écran et navigateurs non graphiques (ou même les navigateurs graphiques si la feuille de style n'est pas chargée ou est désactivée), je ne sais pas trop ce qu'ils rendront comme information, mais ça me semble potentiellement dangereux ;
- si on agrandit le texte, il est probable que les intitulés de tes liens viennent dépasser de la zone de 20px... ;
- tu te fatigues un peu pour rien, je trouve.

Bon ok, ça fait trois raisons, mais la troisième n'est pas très objective.

Je vais essayé de m'expliquer un peu mieux...

Pourquoi j 'ai fais des lien images ? Car j'utilise une police de texte qui n'est pas reprise en compte par les naviguateurs. Et je me vois mal demander au visiteurs, dans une page d'intro, de la charger et de l'installer.

Ce qui veux dire qu'il n'y a aucun texte dans mes bloc de lien, mais qu'une image en background, ce qui explique que je n'aie aucun lien d'affiché lorsque je désactive ma feuille de style (impossible donc de naviguer).

Par contre avec le system que je viens de vous expliquer, la naviguation (sans feuille de style), se passe sans problème, bref, comme si les liens "images" n'existaient pas.

Pour la taille du texte, bien que le reste soit en "em" afin d'être modifiable, je pourrais toujours le mettre en px mais que pour ces liens...

J'avais même penser, si c'était possible de placer la police de texte sur le server et par un language quelcquonque, lui faire appelle... afin d'éviter tout ca.

Enfin bref je sais plus...

Salut,

il faut mettre tes liens images en dur dans le xhtml avec un alt sur l'image (et non des backgrounds sur les balises 'a').
Modifié par koala64 (18 Nov 2006 - 19:43)

Bonsoir,

Aurais-tu un exemple ou un lien vers un éventuel Tuto s'il te plaît ?

Je viens de faire quelques essaies et une fois mon image placée dans mon bloc je ne vois pas comme lui donner un :hover.

<div id="home"><a href="../index.html"><img src="../images/btn_home.jpg" alt="Home page" width="100" height="22" border="0" /></a></div>

Modifié par Connexion (18 Nov 2006 - 21:44)

oui, forcémment, tu ne peux pas modifier la source de l'image en CSS.

bon... voici le script JS à associer.

exemple en ligne (désolé ! )

et le code :

<!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" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Rollover sur lien image</title>
		<style type="text/css">/*<![CDATA[*/

li { list-style-type: none }
img { border: 0; }

		/*]]>*/</style>
		<script type="text/javascript">//<![CDATA[

( function() {

	// Test de passage d'un argument
	var fnTest = function()
	{
		var iI = arguments.length - 1;
		for(iI; iI >= 0; iI--) if(!arguments[iI]) return false;
		return true;
	};

	// Ajout d'une action sur un événement
	var fnConnect = function(oElem, sEvType, fn, bCapture)
	{
		return oElem.addEventListener ?
			oElem.addEventListener(sEvType, fn, bCapture):
			oElem.attachEvent ?
				oElem.attachEvent('on' + sEvType, fn):
				oElem['on' + sEvType] = fn;
	};

	// Changement de la source d'un élément
	var fnSetHover = function(id, src)
	{
		var oA = document.getElementById(id);
		var oImg = oA.firstChild;
		var oSrc1 = oImg.src;
		var oSrc2 = src;
		if(!oSrc1 || !oSrc2) return;
		var fnChg = function(data) { if(oImg.src != data) oImg.src = data; };
		fnConnect(oA, 'mouseover', function() { fnChg(oSrc2); }, false);
		fnConnect(oA, 'mouseout', function() { fnChg(oSrc1); }, false);
		fnConnect(oA, 'focus', function() { fnChg(oSrc2); }, false);
		fnConnect(oA, 'blur', function() { fnChg(oSrc1); }, false);
	};
	
	// Test et chargement du script
	if(fnTest(document.getElementById))
	{
		// Définir l'[#red]id du lien concerné[/#] et la [#blue]source de l'image de remplacement[/#]
		fnConnect(window, 'load', function() { fnSetHover([#red]'gl1'[/#], [#blue]'gloomith_4.gif'[/#]); }, false);
		fnConnect(window, 'load', function() { fnSetHover([#red]'gl2'[/#], [#blue]'gloomith_5.gif'[/#]); }, false);
		fnConnect(window, 'load', function() { fnSetHover([#red]'gl3'[/#], [#blue]'gloomith_6.gif'[/#]); }, false);
	}

} ) ();

		//]]></script>
	</head>	
	<body>
		<ul id="menu">
			<li><a href="#" id="[#red]gl1[/#]"><img src="gloomith.gif" width="31" height="31" alt="gloomith" /></a></li>
			<li><a href="#" id="[#red]gl2[/#]"><img src="gloomith_2.gif" width="31" height="31" alt="gloomith2" /></a></li>
			<li><a href="#" id="[#red]gl3[/#]"><img src="gloomith_3.gif" width="31" height="31" alt="gloomith3" /></a></li>
		</ul>
	</body>
</html>

Désolé pour l'usine à gaz, j'ai fait au plus propre...
Modifié par koala64 (18 Nov 2006 - 23:33)

En parlant de liens image...

Je pense, que ce soit pour ce type de liens ou pour n'importe quelle image visant à remplacer le contenu d'une balise, qu'il serait intéressant de mettre un code du genre :

<a href="page.htm">lien</a>

et de remplacer le texte par une image via JS en insérant le texte en tant qu'attribut alt.
Ainsi, on peut :
- conserver le rollover lorsque JS est actif ou non en combinant avec des propriétés CSS,
- améliorer un petit peu le référencement
- améliorer l'accessibilité en mettant une sorte de commutateur permettant d'activer JS ou non. ( Si, si clb56, c'est utile surtout pour ceux qui se servent d'IE... )