11548 sujets

JavaScript, DOM et API Web HTML5

Nom de l'image sur rollover

Bonjour,

Je suis nouveau sur ce forum et debutant en tout (html, css, javascript...) Je suis egalement paresseux d'où ma question:
Existe il un moyen en css ou javascript de recuperer le nom du fichier de l'image( <img src...>) sur laquelle la souris vient se positionner?

Pour ceux qui se demandent à quoi cela pourrait bien servir et bien si j'arrive a transmettre le nom du fichier en question à une variable, je pourrais l'utiliser comme argument dans mes fonctions ce qui m'epargnerait pas mal de lignes de code. (je suis pas sûr d'avoir été tres explicite mais je veux bien donner un exemple si besoin).

Merci pour votre aide.

B.
Bonjour,
Un truc comme ça ?
<!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>
<title></title>
<style type="text/css" />
</style>
<script type="text/javascript">
document.onmouseover=function(e)
{
el=e?e.target:event.srcElement; 
if(el.tagName=='IMG')alert(el.src)
}
</script>
</head>
<p></p>
<body>
    	<ul id="slideshow_set">
    		<li><img src="images/2.jpg" alt="Image 2" /></li>
    		<li><img src="images/3.jpg" alt="Image 3" /></li>
    		<li><img src="images/4.jpg" alt="Image 4" /></li>
    		<li><img src="images/5.jpg" alt="Image 5" /></li>
    	</ul>
</body>
</html>
Modérateur
Hello,

Un onmouseover devrait être doublé d'un onfocus et un onmouseout devrait être doublé d'un onblur afin de donner accès à ce comportement lorsqu'on navigue au clavier, n'est-ce pas, chmel ? Smiley cligne Autant prendre directement de bonnes habitudes... Smiley smile
Hello,

Koala64, j'imagine que cette remarque est là pour rendre la page web accessible au plus grand nombre...je me trompe?

Quant à chmel, merci beaucoup, ça m'a l'air bien. Je ne suis juste pas sûr de très bien comprendre le "e?e". A quoi fait-il reference exactement?

a+.

B.
koala64 a écrit :
Hello,

Un onmouseover devrait être doublé d'un onfocus et un onmouseout devrait être doublé d'un onblur afin de donner accès à ce comportement lorsqu'on navigue au clavier


onfocus sur un élément img ???

Sur un lien je comprend, mais là j'ai quelques doutes...

En fait je crains que Boolean soit dans une construction qui pose des problèmes d'accessibilité y compris avec JS actif.

Mieux vaudrait revoir le html pour commencer.
Modifié par clb56 (07 Oct 2006 - 18:14)
Bon, je passe les details mais voilà où j'en étais avant de poster ce message:


<head>
<script language="javascript1.1">

function ImagOn() {
Va="p1b.jpg"
document.images["boutonA"].src=Va;
}

function ImagOff() {
Vb="p1.jpg"
document.images["boutonA"].src=Vb;
}
</script>
</head>


<body>

<div class="cadre1">

<a href="#" onmouseOver="ImagOn();" onmouseOut="ImagOff();"><img src="p1.jpg" name="boutonA" width=50 height=60 border=0></a>

</div>
</body>


Je souhaiterais remplir le "cadre1" d'une série de boutons (ici j'en ais mis qu'un) qui se modifient au passage de la souris et passe d'une image px.jpg vers pxb.jpg pour revenir ensuite à px.jpg.
Je veux bien ecrire "x" <a href...> mais faire "x" fonctions pour chaque bouton me parait un peu exageré d'où la presence de variable Va et Vb qui devraient contenir le nom de l'image survolée par la souris.

Merci.

a+
Modérateur
Rebonjour... ou bonsoir.

Boolean a écrit :
Koala64, j'imagine que cette remarque est là pour rendre la page web accessible au plus grand nombre...je me trompe?

Non, tu ne te trompes pas. Smiley cligne

clb56 a écrit :
onfocus sur un élément img ???
Non, le onfocus se met sur l'élément qui déclenche l'action, pas la cible. En l'occurence, dans l'exemple de chmel, ce n'est pas très représentatif puisqu'il s'agit de document mais dans le cas où ce serait un élément, de préférence un bouton ajouté via JS et non un lien, il faudrait rajouter onfocus pour lancer l'action et onblur pour revenir à l'état initial.
koala64 a écrit :
Hello,

Un onmouseover devrait être doublé d'un onfocus et un onmouseout devrait être doublé d'un onblur afin de donner accès à ce comportement lorsqu'on navigue au clavier, n'est-ce pas, chmel ? Smiley cligne Autant prendre directement de bonnes habitudes... Smiley smile


Je suis bien d'accord avec toi, mais je pense avoir répondu à la question première.Faut-il d'après toi ne répondre qu'aux questions relatives à l'accessibilité ? Smiley scotch
Maintenant la question seconde est d'effectuer un rollover.
Dans ce cas, je déconseille le javascript au profit du css avec image en arrière-plan d'un lien et là biensur, il faut doubler a:hover de a:focus et même a:active pour IE5 et 6 Smiley cligne
boolean a écrit :
Je ne suis juste pas sûr de très bien comprendre le "e?e". A quoi fait-il reference exactement?

C'est la variable qui récupère l'évènement, en paramètre de la fonction, dans les navigateurs Gecko
Modifié par chmel (08 Oct 2006 - 11:22)
Désolé si je répète des choses, je n'ai pas lu toutes les interventions.

Koala64 a écrit :

Un onmouseover devrait être doublé d'un onfocus et un onmouseout devrait être doublé d'un onblur afin de donner accès à ce comportement lorsqu'on navigue
au clavier, n'est-ce pas, chmel ?
cligne Autant prendre directement de bonnes habitudes...

Pas forcément... cette remarque n'est valable que si l'élément en question peut être focusé, en l'occurence s'il s'agit d'un des éléments suivants :
- Lien
- Élément de formulaire (champ de texte, case à cocher, bouton radio, zone de liste, bouton, etc.)
- Élément object pouvant interréagir avec l'utilisateur (animation flash, applet, lecteur audio/vidéo embarqué, etc.)

C'est souvent le cas mais pas toujours, mais parfois comme ici, ça l'est par manque, c'est-à-dire qu'il faudrait pourvoir les images d'un de ces éléments.
Modérateur
QuentinC a écrit :
Pas forcément... cette remarque n'est valable que si l'élément en question peut être focusé
oui, c'est bien pour ça qu'il est déconseillé de faire ce genre de pratique sur des éléments inadaptés à cet usage.

chmel a écrit :
Je suis bien d'accord avec toi, mais je pense avoir répondu à la question première.Faut-il d'après toi ne répondre qu'aux questions relatives à l'accessibilité ? Smiley scotch
Je n'ai pas dit ça mais je pense qu'il est bon de rappeler ces notions lorsqu'on peut le faire, et pour cause, Boolean ne l'a pas fait dans son exemple. Smiley cligne

a écrit :
Maintenant la question seconde est d'effectuer un rollover.
Dans ce cas, je déconseille le javascript au profit du css...
Pourquoi ? Smiley smile
koala64 a écrit :
Pourquoi ? Smiley smile

Boolean souhaite avoir une image différente derrière chaque lien.
En prenant l'exemple du rollover une seule image.
La solution, pour que ça fonctionne sans js,
est d'associer un "id" à chaque lien et
de créer un fichier css regroupant toutes les règles de rollover.

#lien0{background: url(p0.jpg) no-repeat 0 0 }
#lien1{background: url(p1.jpg) no-repeat 0 0 }
#lien2{background: url(p2.jpg) no-repeat 0 0 }
#lien3{background: url(p3.jpg) no-repeat 0 0 }
ul#menu li a
	{
             display: block ;
	width: 170px ;
	line-height: 30px ;
	color: #000 ;
	text-indent: 40px ;
	text-decoration: none ;
	border: 1px solid #dbd ;
	}
		
ul#menu li a:hover,ul#menu li a:focus,ul#menu li a:active,
	{
	background-position: 0 -30px ;
	border: 1px solid #f97 ;
	}

et pour le html :

	<ul id="menu">

		<li><a href="#" id="lien0" >item n°1</a></li>
		<li><a href="#" id="lien1" >item n°2</a></li>
		<li><a href="#" id="lien2" >item n°3</a></li>
		<li><a href="#" id="lien3" >item n°4</a></li>
		<li><a href="#" id="lien4" >item n°5</a></li>
	</ul>

Si il ya beaucoups de lignes, ça peut être automatisé avec un prog local ou un langage serveur. Smiley cligne
QuentinC a écrit :
Désolé si je répète des choses, je n'ai pas lu toutes les interventions.


Pas forcément... cette remarque n'est valable que si l'élément en question peut être focusé, en l'occurence s'il s'agit d'un des éléments suivants :
- Lien
- Élément de formulaire (champ de texte, case à cocher, bouton radio, zone de liste, bouton, etc.)
- Élément object pouvant interréagir avec l'utilisateur (animation flash, applet, lecteur audio/vidéo embarqué, etc.)

C'est souvent le cas mais pas toujours, mais parfois comme ici, ça l'est par manque, c'est-à-dire qu'il faudrait pourvoir les images d'un de ces éléments.



Merci Quentin c'était exactement le sens de ma remarque précédente. A part ça qu'on ne peut pas pourvoir une image de grand chose et que ce serait donc un élément focusable qu'il faudrait pourvoir d'une image, je pense à des liens bien sur...
Modifié par clb56 (08 Oct 2006 - 22:43)
Modérateur
@ chmel :

Histoire de pousser le bouchon, je pars du principe que le rollover est un comportement et non de la mise en page donc je me sers dans un premier temps de Javascript en affectant des classes et non des identifiants pour étendre les possibilités. CSS ne me sert qu'à la mise en forme des deux états et à suppléer JS lorsque celui-ci n'est pas supporté.

Ca semble (et c'est) plus compliqué pour un simple rollover mais c'est la solution qui m'apparaît comme la plus souple sans remettre en cause l'accessibilité.
L'avantage de mettre le rollover côté JS est qu'on peut l'améliorer, ce qui n'est pas le cas de CSS. (opacité progressive, variété du mouvement entre autres)

En somme, je ne dis pas que CSS ne fonctionne pas pleinement mais simplement que ce n'est pas son rôle que de faire un rollover.
Merci pour toutes ces remarques, moi qui comptait m'en sortir sans trop de degats, je vais mettre un "certains" temps a integrer tout cela. Mais bon, je suis là pour ça.

J'ai bien l'intention de rendre ma page accessible au plus grand nombre et je m'étais d'abord dirigé vers un systeme de bouton en css mais je m'etais retrouvé avec plusieurs "no break space" dans les <a href> de l'html, ce qui ne m'a pas paru très "propre".

J'ai bien lu aussi "l'exemple du rollover une seule image" et les raisons de ce tuto sont tout à fait censés mais comme tout debutant qui n'a pas envie de faire du simple copier/coller de code sans y reflechir un petit peu, il m'a semblé que c'était un peu comme faire du javascript sans javascript, alors pourquoi pas javascript? (sauf ton respect chmel). C'est là qu'apparait un autre problème: l'accessibilité.

Je vais donc essayer d'écrire un truc qui marche et si vous etes toujours vivants Smiley cligne et partant, on pourra discuter de l'accessibilité du code.

Merci encore pour les pistes...
Modifié par Boolean (09 Oct 2006 - 09:25)
Salut koala64,
koala64 a écrit :
je me sers dans un premier temps de Javascript en affectant des classes et non des identifiants pour étendre les possibilités.

L 'inverse est mieux à mon avis :
- d'abord HTML accessible.
- puis HTML + CSS accessible.
- et enfin HTML + CSS + surcouche javascript avec effets spéciaux genre : opacité progressive, variété du mouvement entre autres.

a écrit :
ce n'est pas son rôle que de faire un rollover.

les gouts et les couleurs ...
Modérateur
Hello,

chmel a écrit :
L 'inverse est mieux à mon avis :
- d'abord HTML accessible.
- puis HTML + CSS accessible.
- et enfin HTML + CSS + surcouche javascript avec effets spéciaux genre : opacité progressive, variété du mouvement entre autres.
ben euh... C'est pas l'inverse; je fais la même... Smiley ravi Le seul truc, c'est que je passe le rollover dans le JS... Ca ne m'empêche de retoucher au CSS lorsque je fais du JS, tout comme je peux le faire avec du HTML et du CSS via les id et les class.

a écrit :
les gouts et les couleurs ...
Tout à fait... Smiley cligne mais je ne dirais pas que JS est moins accessible... C'est une légende car ces deux langages sont optionnels et une comparaison n'a pas lieu d'être... Dans les deux cas, il faut bien faire...

PS: Mettre CSS ou JS juste après avoir développé le HTML est valable...
Modifié par koala64 (09 Oct 2006 - 22:42)
a écrit :

ce n'est pas son rôle que de faire un rollover.
a écrit :

les gouts et les couleurs ...


Il se trouve (peut-être?) maladroitement que le principe du hover en CSS est à cheval entre présentation et comportement... donc fondamentalement on peut voir les choses de deux angles différents... l'un n'est pas plus juste ni plus faux que l'autre.

Le problème du rollover en CSS c'est que souvent, c'est les possibilités d'alternatives textuelles pour les images qui font défaut.
Modifié par QuentinC (09 Oct 2006 - 23:21)
QuentinC a écrit :
Le problème du rollover en CSS c'est que souvent, c'est les possibilités d'alternatives textuelles pour les images qui font défaut.

Pour éviter le rectangle vide en cas d'images désactivées, le texte du lien ne doit pas être caché Smiley cligne .
Js apporte plus de souplesse.
Modifié par chmel (12 Oct 2006 - 08:02)
Sujet clos
Aller à