[RÉSOLU] - OnMouseOver sur plusieurs <a href>

Question

DR I

5 Nov 2010 à 15:46

Bien le bonjour,

Je souhaite faire un effet de rollover en Javascript, et d'ailleurs j'y arrive bien pour un seul <a href>

Par contre, je me demande comment faire pour faire en sorte que chaque partie de mon menu ai cet effet sans pour autant avoir à créer une fonction pour chaque entrée de mon menu.

Voici mon code HTML/Javascript:


<!-- Header -->
<div id="Logo"><a href="/squid/index.php"><img src="/squid/images/header/GK_Logo.jpg" alt="Logo" border="none" /></a></div>
<div id="HeaderMenu">
	<div id="HeaderMenuText">
		<ul class="Floatleft">
    		<li>
            	<a href="#" onClick="loadpage('/squid/pages/monitoring.php','GlobalBody');" onmouseover="swapimage(document.images['Monitoring']);"
                			onmouseout="restoreimage(document.images['Monitoring']);">
            		<img name="Monitoring" src="/squid/images/header/GK_MenuMONUnselected.png" alt="Monitoring" border="none" />
                </a>
            </li>
    		<li>
            	<a href="#" onClick="loadpage('/squid/pages/reporting.php','GlobalBody');">
            		<img  name="Reporting" src="/squid/images/header/GK_MenuREPORTUnselected.png" alt="Reporting" border="none" />
                </a>
            </li>
    		<li>
            	<a href="#" onClick="loadpage('/squid/pages/monitoring.php','GlobalBody');">
            		<img name="Tasks" src="/squid/images/header/GK_MenuTASKSUnselected.png" alt="Scheduled Tasks" border="none" />
                </a>
            </li>
			<li>
            	<a href="#" onClick="loadpage('/squid/pages/monitoring.php','GlobalBody');">
            		<img name="Settings" src="/squid/images/header/GK_MenuCONFUnselected.png" alt="Settings" border="none" />
                </a>
            </li>
		</ul>
	</div>
</div>


// JavaScript Document 

// Fonction d'insertion de page dans DIV cible
function loadpage(url, id) 

{ 
	var xhr_object = null; 
	var contenair = id; 

if (window.XMLHttpRequest) { 

	xhr_object = new XMLHttpRequest();

	xhr_object.open("GET", url, true); //true car asynchrone.

	xhr_object.onreadystatechange = function() { // quand il y a du nouveau executes ça

		if (xhr_object.readyState != 4) { return;
		}// on s'en moque

		if (xhr_object.status != 200 && xhr_object.status != 304){

			alert("erreur " + xhr_object.status); // quelque chose cloche sur ton serveur

			return;

		}

		document.getElementById(contenair).innerHTML = xhr_object.responseText;

};

xhr_object.send(); // pas besoin de null

} 

} 

// Fonction de changement d'image au survol
function swapimage(img)
{
	img.src='/squid/images/header/GK_MenuMONSelect.png';
}

// Fonction de retauration d'image aprés survol
function restoreimage(img)
{
	img.src='/squid/images/header/GK_MenuMONUnselected.png';
}

Donc ici ça marche bien pour une seul entrée.

Est-il possible d'utiliser des variables afin de récupérer le nom de l'image d'origine et donc faire un src en fonction de ce nom?

J'avais pensais à un trc du genre:


// Fonction de changement d'image au survol
function swapimage(img)
{
	switch (img)
	{
		case Monitoring: img.src='/squid/images/header/GK_MenuMONSelect.png';
		break;
		
		case Reporting: img.src='/squid/images/header/GK_MenuREPORTSelect.png';
		break;
		
		case Tasks: img.src='/squid/images/header/GK_MenuTASKSSelect.png';
		break;
		
		case Settings: img.src='/squid/images/header/GK_MenuSETSelect.png';
		break;
	}
	
}

// Fonction de retauration d'image aprés survol
function restoreimage(img)
{
	switch (img)
	{
		case Monitoring: img.src='/squid/images/header/GK_MenuMONUnselect.png';
		break;
		
		case Reporting: img.src='/squid/images/header/GK_MenuREPORTUnselect.png';
		break;
		
		case Tasks: img.src='/squid/images/header/GK_MenuTASKSUnelect.png';
		break;
		
		case Settings: img.src='/squid/images/header/GK_MenuSETUnselect.png';
		break;
	}

}

Est-ce que ça vous parait faisable?
Modifié par DR I (06 Nov 2010 - 11:01)

pchlj

5 Nov 2010 à 17:38

salut...

D'abord et c pas méchant c'est quoi cette usine à gaz Smiley lol

Bon ensuite... Un menu doit être visible et lisible même avec les images désactivés... hors de ce que je vois ce n'est pas ton cas, et pareil donc si JS est désactivé..

je pense que tu devrait faire un tour du côté des Sprites pour faire quelque chose d'accessible Smiley cligne

http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html

fvsch

5 Nov 2010 à 18:27

pchlj a écrit :
je pense que tu devrait faire un tour du côté des Sprites pour faire quelque chose d'accessible

Les sprites CSS ne sont pas forcément accessibles. Le plus souvent, d'ailleurs, l'utilisation faite n'est pas accessible. Dans l'article indiqué, la plupart des exemples donnés posent des problèmes d'accessibilité.
On peut voir à ce sujet: http://www.arespritesaccessible.net/

Pour une solution JavaScript (qui reste le mieux à faire du point de vue de l'accessibilité, quand les images du menu sont porteuses de texte...), on peut voir ce message pour une piste de solution JS un peu plus optimisée. Smiley cligne

Sinon, le mieux à mon sens reste d'avoir du vrai texte HTML dans les menus et boutons, avec pourquoi pas des images de fond pour l'aspect graphique général. Voir cet exemple:
Un menu graphique, avec rollover mais sans javascript.

DR I

5 Nov 2010 à 18:36

Bah à mon sens, pour ce qui est de l’accessibilité, sachant que ce qui intéresse les readers c'est la balise ALT, ça me parait pas mal la.

Oui ils ne verront pas les effets JS, mais ça OSEF vue que le ALT dans mon exemple ne change pas.

Je viens de tester avec Chrome, et tout désactivé, le texte ALT s'affiche bel et bien donc je trouve ça plutôt accessible tout de même.

PS: J'ai tester mon POC et ça marche Smiley lol

je suis plutôt content de moi pour une fois que je résous moi même un problème de Javascript sans personne Smiley langue

Faut croire que ça fini par rentrer.

fvsch

5 Nov 2010 à 19:04

DR I a écrit :
Bah à mon sens, pour ce qui est de l’accessibilité, sachant que ce qui intéresse les readers c'est la balise ALT, ça me parait pas mal la.

L'accessibilité est loin de se limiter aux lecteurs d'écran.

Les techniques de remplacement d'image posent problème quand les styles CSS sont appliqués (ce qui cache le texte, quelle que soit la technique employée pour ça) tandis que l'image ou les images ne sont pas chargées pour une raison ou une autre (latence réseau, indisponibilité temporaire du serveur de média, blocage des images par un proxy ou par l'utilisateur lui-même, etc.).

DR I

5 Nov 2010 à 19:09

De toutes façons l’accessibilité total est une douce utopie je pense.

a écrit :
L'accessibilité est loin de se limiter aux lecteurs d'écran.

Les techniques de remplacement d'image posent problème quand les styles CSS sont appliqués (ce qui cache le texte, quelle que soit la technique employée pour ça) tandis que l'image ou les images ne sont pas chargées pour une raison ou une autre (latence réseau, indisponibilité temporaire du serveur de média, blocage des images par un proxy ou par l'utilisateur lui-même, etc.).

Pour ce qui est de la lenteur, et si les navigateurs respect les standards, bah ils doivent afficher les ALT normalement.

fvsch

5 Nov 2010 à 21:38

DR I a écrit :
Pour ce qui est de la lenteur, et si les navigateurs respect les standards, bah ils doivent afficher les ALT normalement.

Eh bien si tu as des <img alt="...">, tu n'es pas dans les cas de figure contre lesquels je mettais en garde, à savoir les techniques de remplacement d'image avec ou sans utilisation de sprites CSS pour afficher un «contenu» via une image de fond. Smiley cligne

pchlj

6 Nov 2010 à 00:13

Florent V. a écrit :

Les sprites CSS ne sont pas forcément accessibles. Le plus souvent, d'ailleurs, l'utilisation faite n'est pas accessible. Dans l'article indiqué, la plupart des exemples donnés posent des problèmes d'accessibilité.
On peut voir à ce sujet: http://www.arespritesaccessible.net/

Pour une solution JavaScript (qui reste le mieux à faire du point de vue de l'accessibilité, quand les images du menu sont porteuses de texte...), on peut voir ce message pour une piste de solution JS un peu plus optimisée.

Sinon, le mieux à mon sens reste d'avoir du vrai texte HTML dans les menus et boutons, avec pourquoi pas des images de fond pour l'aspect graphique général. Voir cet exemple:
Un menu graphique, avec rollover mais sans javascript.

En effet je parlais des sprites dans une utilisation de type du rollover...
Bien que j'ai déjà testé des sprites complets avec une zone totalement texte cachée... ce qui fait qu'en cas de non-image les liens restent standards... ça reste de la bidouille mais ça marche aussi.. ceux qui n'ont pas d'image peuvent ainsi avoir quand meme des liens.

Ne jetez pas les sprites aux orties trop vite Smiley cligne

ils restent une solution hors js très acceptable

DR I

6 Nov 2010 à 01:45

En tous cas pour répondre a pchlj, mon usine a gaz c'est pour un interfaçage avec des outils système et réseau Smiley smile

Comme la personne qui vas l'utiliser doit être en mesure de l'afficher rapidement j'ai décide de faire des insert ajax dans le body Smiley smile

Merci de votre aide en tous cas continuez comme ça alsacréation!! Smiley biggrin

Sujet clos