11548 sujets

JavaScript, DOM et API Web HTML5

Enigme Javascript et CSS.

J'ai pratiquement achevé ma migration de html en présentation tableau vers css 2 mais une énigme vient de porter un coup au moral :
En effet sur ce site j'avais implanté une petite commande javascript qui permet lorsque l'on clique sur une image de 300 pixels d'afficher son agrandissement en 800 (qui se trouve sur le site aussi).
Voici le code original :
<a href="javascript:;"><img alt="" title="Cliquer pour Zoomer"
 src="../images300/01Arc%20200604%20Gu%E9pier%20d%20europe%205.jpg"
 style="border: 0px solid ; width: 300px; height: 225px;"
 onclick="MM_callJS('window.open(\&quot;http://yvesperso.ouvaton.org/
Digiscopie/pages800/zoom01.htm\&quot;,\&quot;\&quot;,\&quot;directories=no,menubar=no,status=no,location=no,
scrollbars=no,resizable=no,height=600,width=800,left=0,top=0,
fullscreen=no\&quot;)')"></a>


Et le code dans ma version CSS: 

<div id="cadregauche">      
<a  href="javascript:;"><img id ="photo" alt="" title="Cliquer pour Zoomer"
 src="../images300/01Arc%20200604%20Gu%E9pier%20d%20europe%205.jpg"
 onclick="MM_callJS('window.open(\&quot;http://yvesperso.ouvaton.org/
Digiscopie/pages800/zoom01.htm\&quot;,\&quot;\&quot;,\&quot;directories=no,menubar=no,status=no,location=no,
scrollbars=no,resizable=no,height=600,width=800,left=0,top=0,
fullscreen=no\&quot;)')"></a> 
 </div>


Le code Javascript est identique mais ne fonctionne que dans mon ancienne version ?????
Voyez vous une raison à ce comportement .

Ps:pour étre sur j'ai méme copier/coller le code JS fonctionnel de la premiére dans la 2de version mais sans résultat ,le probléme est ailleurs mais ou ?
Smiley confus
Bonjour,
En tout cas ça peut se simplifier. Tu peux même faire :

<a href="fichier.jpg" onclick="return !window.open(this.href);"><img ... /></a>
Ca yest ,j'ai trouvé : J'avais effacé la déclaration suivante dans le <head> :
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
//-->
</script>
En le rajoutant ,le script fonctionne .
De quoi s'agit il ?(je ne m'en souviens plus du tout).

Ps:dans ton script simplifié ,c'est quoi "this.href"? et ou sont les options de fenetrages ? Smiley ohwell
Les options de fenêtrage, je ne les ai pas mises, mais tu peux les rajouter.

En tout cas le code que tu as mis dans le head est des plus inutiles. Celui qui t'a pondu ce script est fort : comment coder trois lignes qui ne servent strictement à rien à part rallonger le code...

Parce qu'à la place de :


<script type="text/javascript">
function mm_truc (str) { return eval(str); }
</script>

<a href="javascript:;" onclick="mm_truc('window.open(...);');">...</a>


Tu peux remplacer par :

<a href="javascript:window.open(...);">...</a>


Plus court n'est-ce pas ?
Et en prime, sans avoir besoin d'échapper les guillemets et les apostrophes.

Je décerne le prix du script le plus inutile à celui qui a pondu ces trois lignes...
Je viens d'essayer le script openweb , mais je ne comprends pas :a partir du moment ou href contient l'adresse de la page htm ,ça devient un simple lien externe ,le on click est déconnecté et l'image s'affiche dans une "nouvelle fenétre" qui ne tient pas compte des options .......
Laurent > Tu as raison, mais c'était pour faire simple. C'est vrai que normalement, je fais comme ça pour ouvrir une popup :

<a href="page.html" onclick="return !window.open(this.href);">...</a>

En fait c'est une petite variante de la version proposée sur openweb.
@Laurent : en utilisant ta méthode, ne serait-il pas plus propre encore d'afficher une pseudo pop-up dans une simple div en premier plan ? Je sais pas si ça peut se faire de façon élégante, accessible et avec / sans javascript mais peut être avez vous des liens ?
D'un autre coté avec le script de Quentin C que je remercie au passage pour sa participation ,c'est pire :il ya le méme popup "batard" (ne tenant pas compte des options mais redimensionné) et une autre fenétre s'ouvre affichant un énigmatique >object Window> ....
Désolé mais apparemment les maniéres du script "original" semblent justifiées ...puisque c'est le seul à ouvrir sur un popup "ad hoc" ,bien qu'il est vrai réservé aux navigateurs à javascript activé .
Je ne demande pas mieux que de basculer vers la simplicité ,à vous de me convaincre !
Modérateur
Bonjour,

Yves, pourrais-tu nous montrer ce que tu as essayé et mieux encore, nous donner une adresse où on peut voir ton code en action ?

La solution proposée sur Openweb fonctionne très bien.
Merci à tous pour vos réponses :
effectivement le code d'Open Web fonctionne ,j'avais omis 'nom' dans le format window.open ('url','nom','options') et les navigateurs prenaient mes options pour le nom .
Curieusement ce probléme n'existait pas avec le script précédent ...(serait-ce d'ailleurs sa raison d'étre?) .
Pour achever de me rassurer :A quoi set ce nom ?c'est probablement pour étre appeler dans des scripts plus élaborés ???
Mais surtout merci .
Modérateur
Pour ce qui est du nom de la fenêtre, si tu appeles window.open et qu'une fenêtre du même nom existe, son contenu sera remplacé par le nouveau.

Prenons l'exemple d'un album photo dans lequel window.open est utilisé pour afficher chaque image en grande taille lorsqu'on clique dessus. En spécifiant un nom dans window.open, dès que cette popup est ouverte, la prochaine photo sur laquelle tu cliquera s'ouvrira dans la même popup, et non dans une nouvelle popup.
Bonjour,

globy a écrit :
@Laurent : en utilisant ta méthode, ne serait-il pas plus propre encore d'afficher une pseudo pop-up dans une simple div en premier plan ?


Les pseudos popup CSS ont plusieurs inconvénients, variables selon les contenus concernés et la technique utilisée, que n'ont pas les "véritables" popups :
- la page initiale est d'autant plus lourde qu'il y aurait de pseudo-popups
- sans le support CSS, le contenu du div-popup, inclus généralement en fin de page, fait souvent figure de "pièce rapportée" déroutante
- un div-popup avec un contenu un peu long à télécharger (une image) commence par s'afficher, puis disparaît lorsque la feuille de style est entièrement traitée, ce qui est également déroutant
- un div-popup n'est pas déplaçable ni redimensionnable (sauf lourde surcouche javascript)
- il n'est accessible que si javascript est supporté/activé (sans javascript, l'ouverture ou la fermeture sont impossibles, selon la technique utilisée)
- il ne peut être affiché dans un autre onglet indépendamment de la page, ni bloqué : l'utilisateur est beaucoup plus contraint que par un vrai popup.
- Sa présentation différente de celle d'une fenêtre de navigateur ne permet pas toujours à l'utilisateur de comprendre immédiatement de quoi il s'agit (j'ai souvent vu des gens le prendre pour un bug d'affichage du site)

Dans la plupart des cas, ce pseudo-popup, comme beaucoup d'utilisations à tous prix des styles CSS, est finalement d'un intérêt très discutable Smiley cligne
Ok Laurent, je vois.
Mais dans le cas d'une galerie - avec commentaire joint à la photo, ou pas - est-ce vraiment essentiel de tenir compte à tout prix des mal-voyants ?
Si le reste du site passe bien :
- sans flash ou avec des images / textes alternatifs, pas de texte inclus
- sans javascript ou seulement en feature
- des title sur toutes les images
- une interface accessible, claire, ordonnée, pas incongrue comme on voit souvent en flash
N'est-ce pas déjà énorme si on tenait compte de tout ça sur tout un site ? Pour une galerie je ne vois pas trop comment respecter et à la fois le visiteur voyant en ne lui imposant pas de pop-up et le mal-voyant.
Ça me désole, ça me frustre mais j'ai du mal à voir une solution élégante et respectueuse à 100 % Smiley bawling
re-bonjour,

Cela ne concerne pas spécifiquement les mal-voyants, ni l'accessibilité, mais la qualité et l'ergonomie : les problèmes évoqués ci-dessus touchent potentiellement toutes sortes d'utilisateurs.
Sujet clos
Aller à