probleme Onmouseover

Le
yoyo
Bonjour,

Voilà j'ai toujours un peu délaissé le JS, car ce langage peux être
désactivé par l'utilisateur, donc j'avais tendance à tout faire en php et
css.

aujourd'hui je me rend compte que c'était une erreur car je souhaite faire
une petite galerie photo et le js est le plus approprié des langages, donc
je suis obligé de m'y remettre.

et voilà mon premier soucis sur un Onmouseover :

<a href="6.jpg"
  onMouseOver="document.photo_galerie.src='images/galerie/6.jpg'"
  onMouseOut="document.photo_galerie.src='images/galerie/7.jpg'">
    <img src="/images/galerie/6.jpg'"  border="0" name="photo_galerie" />
</a>


si quelqu'un pourrais me dire ou est mon erreur ?
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 6
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #773095

si quelqu'un pourrais me dire ou est mon erreur ?


c'est simplement fait à l'envers :
- au survol je regarde ma photo
- au non survol je regarde une autre photo
ne doit pas être ce que tu veux faire, non ?

corrigé :
onMouseOver="document.photo_galerie.src='images/galerie/7.jpg'"
onMouseOut="document.photo_galerie.src='images/galerie/6.jpg'">


Ceci étant, aujourd'hui on a les css pour faire la chose

CSS :
-----
a img { width: 250px; height: 125px; border: 0;
background: url(none) no-repeat center center white;}
a img.vert { width: 125px; height: 250px; }
a#P_04 img { background-image: url(images/galerie/4.jpg); }
a#P_04:hover img { background-image: url(images/galerie/4_o.jpg); }
a#P_05 img { background-image: url(images/galerie/5.jpg); }
a#P_05:hover img { background-image: url(images/galerie/5_o.jpg); }
a#P_06 img { background-image: url(images/galerie/6.jpg); }
a#P_06:hover img { background-image: url(images/galerie/6_o.jpg); }


HTML :
------


et on se sert d'une image transparente d'1 pixel : vide.gif

Attention :
que ce soit en JS ou par CSS
au survol il faudra attendre que l'image de remplacement se charge
(en RTC ou en ADSL 512 ce peut être assez long)

La méthode des portes coulissantes en css permet de s'affranchir de ce
délai (mais le temps de chargement complet de la page est plus long)

--
sm

Bruno Desthuilliers
Le #773094
Bonjour,

Voilà j'ai toujours un peu délaissé le JS, car ce langage peux être
désactivé par l'utilisateur, donc j'avais tendance à tout faire en php et
css.

aujourd'hui je me rend compte que c'était une erreur car je souhaite faire
une petite galerie photo et le js est le plus approprié des langages, donc
je suis obligé de m'y remettre.


"obligé" ? On dirait une punition ?

et voilà mon premier soucis sur un Onmouseover :

<a href="6.jpg"
onMouseOver="document.photo_galerie.src='images/galerie/6.jpg'"
onMouseOut="document.photo_galerie.src='images/galerie/7.jpg'">
</a>


si quelqu'un pourrais me dire ou est mon erreur ?



Heu... De ne pas d'abord préciser en quoi ce code ne fait pas ce que tu
attends ?

Sinon, tu devrais éviter le javascript dans le html, et utiliser le
DOM... on n'est plus en 1995 !-)

# javascript/magalerie.js
// je te fait grâce de la gestion d'évènement DOM à cause
// des pb de compatiblité avec cette immonde bouse de IE
window.onload = function() {
var link = document.getElementById('link');
if (! link) {
return;
}
var image = document.getElementById('photo_galerie');
if (! image) {
return;
}
var cache = {
over: new Image('images/galerie/6.jpg'),
out: new Image('images/galerie/7.jpg')
};
link.onmouseover = function() {
image.src = cache.over.src;
};
link.onmouseout = function() {
image.src = cache.out.src;
};
};

# styles/magalerie.css

a img {
border: none;
}

# magalerie.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ma galerie</title>
</head>
<body>
<img id="photo_galerie"
src="images/galerie/6.jpg"
alt="de bien belles images en effet...">
</a>
</body>
</html>

Ca ne solutionnera pas ton problème (quel qu'il puisse être), mais au
moins ça ressemble à quelquechose d'un minimum propre.


HTH

yoyo
Le #772822
SAM wrote:


si quelqu'un pourrais me dire ou est mon erreur ?


c'est simplement fait à l'envers :
- au survol je regarde ma photo
- au non survol je regarde une autre photo
ne doit pas être ce que tu veux faire, non ?


oui en effet!! c'est bien cela
corrigé :
onMouseOver="document.photo_galerie.src='images/galerie/7.jpg'"
onMouseOut="document.photo_galerie.src='images/galerie/6.jpg'">


merci je vais essayé

Ceci étant, aujourd'hui on a les css pour faire la chose


le problème du css c'est qu'il pose problème au niveau de l'accessibilité


CSS :
-----
a img { width: 250px; height: 125px; border: 0;
background: url(none) no-repeat center center white;}
a img.vert { width: 125px; height: 250px; }
a#P_04 img { background-image: url(images/galerie/4.jpg); }
a#P_04:hover img { background-image: url(images/galerie/4_o.jpg); }
a#P_05 img { background-image: url(images/galerie/5.jpg); }
a#P_05:hover img { background-image: url(images/galerie/5_o.jpg); }
a#P_06 img { background-image: url(images/galerie/6.jpg); }
a#P_06:hover img { background-image: url(images/galerie/6_o.jpg); }


HTML :
------


et on se sert d'une image transparente d'1 pixel : vide.gif

Attention :
que ce soit en JS ou par CSS
au survol il faudra attendre que l'image de remplacement se charge
(en RTC ou en ADSL 512 ce peut être assez long)


oui en effet mais je vois d'autre solution>


La méthode des portes coulissantes en css permet de s'affranchir de ce
délai (mais le temps de chargement complet de la page est plus long)




yoyo
Le #772821
Bruno Desthuilliers wrote:

Bonjour,

Voilà j'ai toujours un peu délaissé le JS, car ce langage peux être
désactivé par l'utilisateur, donc j'avais tendance à tout faire en php et
css.

aujourd'hui je me rend compte que c'était une erreur car je souhaite
faire une petite galerie photo et le js est le plus approprié des
langages, donc je suis obligé de m'y remettre.


"obligé" ? On dirait une punition ?


on dirait un peu car jamais trop acroché avec langage>
et voilà mon premier soucis sur un Onmouseover :

<a href="6.jpg"
onMouseOver="document.photo_galerie.src='images/galerie/6.jpg'"
onMouseOut="document.photo_galerie.src='images/galerie/7.jpg'">
</a>


si quelqu'un pourrais me dire ou est mon erreur ?



Heu... De ne pas d'abord préciser en quoi ce code ne fait pas ce que tu
attends ?


au survol de la souris j'ai rien qui se passe

Sinon, tu devrais éviter le javascript dans le html, et utiliser le
DOM... on n'est plus en 1995 !-)


c'est à dire

# javascript/magalerie.js
// je te fait grâce de la gestion d'évènement DOM à cause
// des pb de compatiblité avec cette immonde bouse de IE
window.onload = function() {
var link = document.getElementById('link');
if (! link) {
return;
}
var image = document.getElementById('photo_galerie');
if (! image) {
return;
}
var cache = {
over: new Image('images/galerie/6.jpg'),
out: new Image('images/galerie/7.jpg')
};
link.onmouseover = function() {
image.src = cache.over.src;
};
link.onmouseout = function() {
image.src = cache.out.src;
};
};

# styles/magalerie.css

a img {
border: none;
}

# magalerie.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ma galerie</title>
</head>
<body>
<img id="photo_galerie"
src="images/galerie/6.jpg"
alt="de bien belles images en effet...">
</a>
</body>
</html>

Ca ne solutionnera pas ton problème (quel qu'il puisse être), mais au
moins ça ressemble à quelquechose d'un minimum propre.


HTH



yoyo
Le #772820
SAM wrote:


si quelqu'un pourrais me dire ou est mon erreur ?


c'est simplement fait à l'envers :
- au survol je regarde ma photo
- au non survol je regarde une autre photo
ne doit pas être ce que tu veux faire, non ?

corrigé :
onMouseOver="document.photo_galerie.src='images/galerie/7.jpg'"
onMouseOut="document.photo_galerie.src='images/galerie/6.jpg'">

en effet cela fonction sauf qu'au survol j'ai l'image qui s'affiche à coté,

je vais voir si c'est pas une histoire de style car j'aimerais qu'elle
s'affiche au même endroit que la première


SAM
Le #772819
SAM wrote:

corrigé :
onMouseOver="document.photo_galerie.src='images/galerie/7.jpg'"
onMouseOut="document.photo_galerie.src='images/galerie/6.jpg'">

en effet cela fonction sauf qu'au survol j'ai l'image qui s'affiche à coté,

je vais voir si c'est pas une histoire de style car j'aimerais qu'elle
s'affiche au même endroit que la première


mais avec quel brouteur vérolé fais-tu fonctionner ça ?

Ça doit remplacer à chaque coup l'image nommée : 'photo_galerie'

à moins que les 2 images ne soient pas de la même taille, rien ne
devrait "bouger à côté"

sinon, oui, probablement il y a un style qui s'accommode mal du
changement de taille du truc à afficher

--
sm


SAM
Le #772818
SAM wrote:

Ceci étant, aujourd'hui on a les css pour faire la chose


le problème du css c'est qu'il pose problème au niveau de l'accessibilité


L'accessibilité de quoi ? de qui ?
Le mal voyant est-il vraiment concerné par une galerie de photos ?
N'y a t-il pas aussi des css pour brouteurs auditifs ?

En quoi un survol (comment survole un brouteur auditif ?) matérialisé
par un changement d'images rend t-il quoique ce soit plus accessible ?

--
sm


SAM
Le #772817

Sinon, tu devrais éviter le javascript dans le html, et utiliser le
DOM... on n'est plus en 1995 !-)


Ma foi, il faut bien commencer par qque chose ...


Variante pour JS séparé (en DOM 0) :

# javascript/magalerie.js

window.onload = function() {

if(document.links) {
var L = document.links,
chem = 'images/galerie/';
L[0].onmouseover = function() {
document.photo_galerie.src = chem+'7.jpg'; }
L[0].onmouseout = function() {
document.photo_galerie.src = chem+'6.jpg'; }
}
}


# magalerie.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ma galerie</title>
</head>
<body>
<img id="photo_galerie"
src="images/galerie/6.jpg"
alt="de bien belles images en effet...">
</a>
</body>
</html>


yoyo
Le #772814
SAM wrote:

SAM wrote:

Ceci étant, aujourd'hui on a les css pour faire la chose


le problème du css c'est qu'il pose problème au niveau de l'accessibilité


L'accessibilité de quoi ? de qui ?
Le mal voyant est-il vraiment concerné par une galerie de photos ?
N'y a t-il pas aussi des css pour brouteurs auditifs ?

En quoi un survol (comment survole un brouteur auditif ?) matérialisé
par un changement d'images rend t-il quoique ce soit plus accessible ?

oui entre autre!!

quand on parles d'accesibilité on pense bien sûr a pouvoir suurfer sans
souris, on remplace la souris par le clavier



Bruno Desthuilliers
Le #772813
Bruno Desthuilliers wrote:



Bonjour,

Voilà j'ai toujours un peu délaissé le JS, car ce langage peux être
désactivé par l'utilisateur, donc j'avais tendance à tout faire en php et
css.

aujourd'hui je me rend compte que c'était une erreur car je souhaite
faire une petite galerie photo et le js est le plus approprié des
langages, donc je suis obligé de m'y remettre.


"obligé" ? On dirait une punition ?



on dirait un peu car jamais trop acroché avec langage>


Honnêtement, c'était mon cas aussi - jusqu'à ce que je prenne le temps
de m'y intéresser un peu plus sérieusement.


et voilà mon premier soucis sur un Onmouseover :

<a href="6.jpg"
onMouseOver="document.photo_galerie.src='images/galerie/6.jpg'"
onMouseOut="document.photo_galerie.src='images/galerie/7.jpg'">
</a>


si quelqu'un pourrais me dire ou est mon erreur ?



Heu... De ne pas d'abord préciser en quoi ce code ne fait pas ce que tu
attends ?



au survol de la souris j'ai rien qui se passe


Si si. Il se passe bien quelque chose. La valeur de l'attribut src de
l'image 'photo_galerie' passe de "/images/galerie/6.jpg'" (typos
inclues) à 'images/galerie/6.jpg'. Ce n'était pas ce que tu voulais ?-)

Sinon, tu devrais éviter le javascript dans le html, et utiliser le
DOM... on n'est plus en 1995 !-)


c'est à dire


C'est à dire que tant Javascript (et la façon de l'utiliser) que
l'interface de manipulation des documents html (et xml) ont pas mal
évolué depuis le millénaire dernier.



Publicité
Poster une réponse
Anonyme