Javascript Girl
  1. Javascript Girl
  3. Comment faire apparaître les images en version javascript
Intereting Posts
Lire le fichier local xls / xlsx dans javascript Comment puis-je créer un dessin en toile pour remplir complètement le navigateur? Joindre l'événement de la fonction change à la variable Fonction non définie Dessiner un chemin avec une ligne dans OpenLayers en utilisant JavaScript Navigation d'état active complexe sur le site Web d'une seule page Quelle est la différence entre $ routeProvider et $ stateProvider in AngularJs Est-ce qu'un appel à Node.js 'async.parallel () synchrone? Comment savoir si un menu déroulant a des options à sélectionner? Une tentative de module de jeton inattendu échoué: SyntaxError Obtenir de la valeur de la propriété du premier objet Comment utiliser les valeurs de énumération C # en JavaScript Quelle est la source de la fonction de requête de sélection de signe double dollar dans Chrome / Firefox? Retourner le tableau JSON d'une vue Django à un modèle A d3.select … équivalent à jQuery.children ()

Comment faire apparaître les images en version javascript

Je ne maîtrise pas très bien le javascript, et je pense que c'est vraiment basique, mais je ne peux pas le trouver en ligne n'importe où .

Je veux créer un lien qui déclenchera une fonction javascript qui fait apparaître une image dans une division séparée. Il ne peut pas être en flash, sinon je n'ai aucune objection à la langue de codage.

J'ai plusieurs images, donc je pense que la meilleure façon de le faire serait de les calquer tous les uns des autres, puis d'augmenter l'index z chaque fois que leur lien est cliqué, mais vous pourriez avoir une meilleure idée.

Je souhaite vraiment créer une sorte de galerie d'images primitive qui n'utilise pas Flash et affiche la photo dans sa division lorsque le lien correspondant est cliqué.

Merci d'avance, Alex

Comme Jessegavin l'a dit (trouvé ici )

Vous pouvez utiliser l'API Javascript DOM. En particulier, regardez la méthode createElement ().

Vous pouvez créer une fonction réutilisable qui créera une image comme ça … 

function show_image(src, width, height, alt) { var img = document.createElement("img"); img.src = src; img.width = width; img.height = height; img.alt = alt; // This next line will just add it to the <body> tag document.body.appendChild(img); }

Ensuite, vous pourriez l'utiliser comme ça … 

 <button onclick="show_image('http://google.com/images/logo.gif', 276,110, 'Google Logo");'>Add Google Logo</button>

Il ne devrait pas y avoir de rupture de ligne ci-dessus, je l'ai ajouté pour que cela puisse apparaître sans défilement. Voir un exemple de travail sur jsFiddle: http://jsfiddle.net/Bc6Et/

Ceci devrait répondre à votre question

Il y a une quantité de bibliothèques javascript, de plugins (pour jQuery) et d'autres moyens de résoudre ce problème.

La première chose que je ferais, c'est de parcourir un site Web comme celui-ci, pour voir ce qui est disponible: http://sixrevisions.com/javascript/free_javascript_image_galleries/

J'ai utilisé celui-ci avant, et c'est très simple: http://lokeshdhakar.com/projects/lightbox2/

En général, vous pouvez simplement faire <a href="javascript: showImage()">Link</a> et cliquer sur qui appellera la fonction javascript showImage() que vous définissez quelque part. Ensuite, la mise en forme des divs fonctionnera comme vous l'avez décrit.