1485 sujets

Web Mobile et responsive web design

Bonjour,
j'ai développé un petit site dont l'une des pages est une galerie photos.
Il y a des mini photos et une grande... En utilisant onmouseover j'affiche les mini photos dans la grande photo.
Le problème est qu'évidemment cela ne marche pas sur ipad, iphone...etc

J'ai pensé à remplacer cela par une fonction on click pour que ce soit utilisable sur ces appareils.

Questions :
1/ on click marchera t'il sur ces appareils ?
2/ y a t'il moyen de garder onmouseover pour es utilisateurs fixes et on click (ou autre plus adapté) pour les utilisateurs mobiles ?

Merci pour vos réponses
stef
Bonjour,

La question a surtout été posée un vendredi soir, assez tard...

Le onClick devrait fonctionner sous iTrucs (et tout bidulle tactile en général), en principe. Pour pouvoir concerver le onMouseOver (qu'il serait préférable de remplacer par onFocus pour les gens qui naviguent au clavier) il doit être possible de détecter le navigateur utilisé.

Pour plus d'info, ce tableau peut être utile.
merci pour la réponse

J'ai essayé ceinture + bretelles : onmouseover + onclick pour être sûr que ca marche sur toutes les machines...
Ben ça ne marche toujours pas sur les itrucs !!!
J'ai des images cliquables qui une fois cliquées ou juste taquinées par la souris s'affiche en grand sur la meme page.
Ca marche impec sur les ordi, mais pas sur les itrucs : le fait de les cliquer ne les affiche pas en grand sur les itrucs.

Une idée ?
un peu de code, si on peut m'aider... je craque, je n'en peux plus !

<div id="photo1">
<IMG id=MonImage src="Photos/Inalukp1.jpg"/>
<br/>

<a href="#">
<IMG border="0" onmouseover="MonImage.src='Photos/Inalukp1.jpg'" src="Photos/Inalukmini1.jpg"
onClick="MonImage.src='Photos/Inalukp1.jpg'"/>
</a>
<a href="#">
<IMG border="0" onmouseover="MonImage.src='Photos/Inalukp3.jpg'" src="Photos/Inalukmini3.jpg"
onClick="MonImage.src='Photos/Inalukp3.jpg'"/>
</a>
<a href="#">
<IMG border="0" onmouseover="MonImage.src='Photos/Inalukp5.jpg'"
onClick="MonImage.src='Photos/Inalukp5.jpg'"
src="Photos/Inalukmini5.jpg">
</a>
<a href="#">
<IMG border="0" onmouseover="MonImage.src='Photos/Inalukp7.jpg'"
onClick="MonImage.src='Photos/Inalukp7.jpg'"
src="Photos/Inalukmini7.jpg">
</a>
<a href="#">
<IMG border="0" onmouseover="MonImage.src='Photos/Inalukp9.jpg'"
onClick="MonImage.src='Photos/Inalukp9.jpg'"
src="Photos/Inalukmini9.jpg">
</a>
<a href="#">
<IMG border="0" onmouseover="MonImage.src='Photos/Inalukp11.jpg'"
onClick="MonImage.src='Photos/Inalukp11.jpg'"
src="Photos/Inalukmini11.jpg">
</a>
<IMG src="Photos/vide.jpg">
</div>

ça marche bien sur les ordi (ausi bien le mouseover que le click), pas du tout sur les itrucs !!!

HELP please
La solution est de faire du conditionnel :

1. c'est une mauvaise pratique de mettre du javascript dans le HTML.-> sort le JS et utilise le DOM pour affecter des evénement "onMouseOver", ou "onClick",...

2. une fois fait le 1), il te suffit de détecter en JS le userAgent Ipad/iphone, ... et de conditionnellement désactiver le onMouseOver et le remplacer par un événement de l'Ipad comme Tap ou OnTouch, ...

plus d'info ici.
http://developer.apple.com/library/safari/#technotes/tn2010/tn2262/index.html