[Résolu] Problème d'insertion dynamique d'image en javascript par Feurtel - page 1

Bonjour,

J'ai un problème avec le code ci-dessous. Le chargement de la page appelle une fonction dessin() qui dessine des trucs à l'écran (cf. la ligne "drawline(1, 1, 500, 500, etc.). Et l'application détecte le clic de la souris (cf. onClick dans le <div>). Jusque-là, tout va bien. Mais ensuite, je voudrais insérer des fichiers images. C'est la ligne document.write(etc.). Quand j'ajoute cette ligne, l'image apparait comme il faut, mais le dessin disparait et la détection du clic n'opére plus. Pourquoi ? J'ai le problème sous FF et Opera (pas essayé IE).

Ce que vous voyez est bien entendu une version simplifiée de l'application. Le vrai programme dessine des choses plus complexes, la détection du clic permet de zoomer, et si je dois insérer les images via javascript, c'est parce que leur position sera dynamique (à cause du zoom, notamment). En fait, les images insérées au niveau des objets dessinés seront "vides" (petit carré blanc affiché sur fond blanc), le but étant de détecter le passage de la souris pour afficher des informations.

Voici le code. J'ai mis en évidence la ligne qui pose problème.

Merci d'avance pour votre aide. Je suis à votre disposition pour plus d'info.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
	</head>
	<script type="text/javascript">
		function dessin() {
			drawLine( 1, 1, 500, 500, 1, 'red', 100);
// ====> Problème quand j'active cette ligne :
			document.write('<img src="truc.jpg" style="position:absolute; left:0px; top:0px; height:5px; width:5px;">');
// <====
		}

		function drawLine(x1, y1, x2, y2, w, c, o) {
			// Source : http://www.javascriptfr.com/codes/DESSINER-CERCLES-DISQUES-LIGNES-JAVASCRIPT_46748.aspx
			var y = x = 0;
			var signX = (x1 - x2) / Math.abs(x1 - x2) * -1;
			var signY = (y1 - y2) / Math.abs(y1 - y2) * -1;
			if (x2 == x1) {
				setPx(Math.min(x1, x2), Math.min(y1, y2), w, Math.abs(y2 - y1), c, o);
			} else if (y1 == y2) {
				setPx(Math.min(x1, x2), Math.min(y1, y2), Math.abs(x2 - x1), w, c, o);
			} else {
				if (Math.abs((y2 - y1) / (x2 - x1)) <= 1) {
					while (x <= Math.abs(x2 - x1)) {
						y = (y2 - y1) / Math.abs(x2 - x1) * x;
						setPx(signX * x + x1, y + y1, w, w, c, o);
						x++;
					}
				} else {
					while (y <= Math.abs(y2 - y1)) {
						x = (x2 - x1) / Math.abs(y2 - y1) * y;
						setPx(x + x1, signY * y + y1, w, w, c, o);
						y++;
					}
				}
			}
		}
		function setPx(x, y, w, h, c, o) {
			var px = document.createElement('div');
			px.id = 'px';
			px.style.cssText = 'position:absolute; top:' + y + 'px; left:' + x + 'px; background-color:' + c + '; width:' + w + 'px; height:' + h + 'px; opacity:' + o / 100 + '; filter:alpha(opacity=' + o + ');';
			document.body.appendChild(px);
		}
	</script>
	<style type="text/css">
		#zoneClicable {
			background-color:0;
			padding:3000px;
			margin:-5px;
		}
	</style>
	<body style="overflow:hidden" onload="javascript:dessin();">
		<div id="zoneClicable" onClick="javascript:alert('Test ok');">
		</div>
	</body>
</html>

Feurtel

9 février 2010 à 23:22:57

skuti

10 février 2010 à 2:01:27

Si tu veux l'afficher dans un div en particulier il faut faire:

document.getElementById('ma_div').innerHTML = '<img src="truc.jpg" style="position:absolute; left:0px; top:0px; height:5px; width:5px;">';

$2b||!$2b

Totony

10 février 2010 à 2:44:58

Allo,

document.write est à utiliser au début de la page (il me semble). Tu pourrais esseiller de faire :

var Image = document.createElement("img");
Image.src = "foo.foo";
Image.alt = "foo";

document.getElementById("Div").appendChild(Image);

(À la place de .innerHTML = // Tu pourrais faire += à la place (sinon le div contiendra seulement l'image et non l'ancien contenu), mais je trouve la méthode avec le document.createElement plus propre).

10 février 2010 à 11:49:51

En effet j'ai oublié le +

autant pour moi.

10 février 2010 à 21:31:43

Totony, Skutti : merci pour votre aide ; ça marche

Problème d'insertion dynamique d'image en javascript

Problème d'insertion dynamique d'image en javascript

Supprimer

Modérer

Signaler le message aux modérateurs