probleme Onmouseover

SAM

24/11/2007 à 15:03

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'">
<img src="/images/galerie/6.jpg'" border="0" name="photo_galerie" />

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 :
------

<a id="P_04><img src="images/vide.gif" alt="" /></a>
<a id="P_05><img class="vert" src="images/vide.gif" alt="" /></a>
<a id="P_06><img src="images/vide.gif" alt="" /></a>

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

24/11/2007 à 18:49

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'">
<img src="/images/galerie/6.jpg'" border="0" name="photo_galerie" />
</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>
<link rel="stylesheet" type="text/css" href="styles/magalerie.css">
<script type="text/javascript" src="javascript/magalerie.js"></script
</head>
<body>
<a id="link" href="6.jpg">
<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

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'">
<img src="/images/galerie/6.jpg'" border="0" name="photo_galerie" />
</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>
<link rel="stylesheet" type="text/css" href="styles/magalerie.css">
<script type="text/javascript" src="javascript/magalerie.js"></script
</head>
<body>
<a id="link" href="6.jpg">
<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

Vous avez filtré cet utilisateur ! Consultez son message

yoyo

24/11/2007 à 21:43

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'">
<img src="/images/galerie/6.jpg'" border="0" name="photo_galerie" />

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 :
------

<a id="P_04><img src="images/vide.gif" alt="" /></a>
<a id="P_05><img class="vert" src="images/vide.gif" alt="" /></a>
<a id="P_06><img src="images/vide.gif" alt="" /></a>

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

24/11/2007 à 21:54

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'">
<img src="/images/galerie/6.jpg'" border="0" name="photo_galerie" />
</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>
<link rel="stylesheet" type="text/css" href="styles/magalerie.css">
<script type="text/javascript" src="javascript/magalerie.js"></script
</head>
<body>
<a id="link" href="6.jpg">
<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

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'">
<img src="/images/galerie/6.jpg'" border="0" name="photo_galerie" />
</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>
<link rel="stylesheet" type="text/css" href="styles/magalerie.css">
<script type="text/javascript" src="javascript/magalerie.js"></script
</head>
<body>
<a id="link" href="6.jpg">
<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

Vous avez filtré cet utilisateur ! Consultez son message

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'">
<img src="/images/galerie/6.jpg'" border="0" name="photo_galerie" />
</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>
<link rel="stylesheet" type="text/css" href="styles/magalerie.css">
<script type="text/javascript" src="javascript/magalerie.js"></script
</head>
<body>
<a id="link" href="6.jpg">
<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

24/11/2007 à 21:56

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'">
<img src="/images/galerie/6.jpg'" border="0" name="photo_galerie" />

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

24/11/2007 à 22:13

SAM wrote:

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

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

24/11/2007 à 22:20

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

24/11/2007 à 22:31

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>
<link rel="stylesheet" type="text/css" href="styles/magalerie.css">
<script type="text/javascript" src="javascript/magalerie.js"></script
</head>
<body>
<a id="link" href="6.jpg">
<img id="photo_galerie"
src="images/galerie/6.jpg"
alt="de bien belles images en effet...">
</a>
</body>
</html>

yoyo

25/11/2007 à 15:07

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

25/11/2007 à 15:21

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'">
<img src="/images/galerie/6.jpg'" border="0" name="photo_galerie" />
</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.

probleme Onmouseover

10 réponses

Veuillez sélectionner un problème