11548 sujets

JavaScript, DOM et API Web HTML5

Map HTML et Javascript ?

Bonjour vous tous,

J'ai une idée en tête mais je suis plus ou moins (plutot plus que moins en fait Smiley murf ) bloquée.

Sur une page, j'ai plusieurs images pour lesquelles j'aimerais qu'en cliquant sur les 20 premiers pixels (en largueur) on appelle une fonction Javascript avec un parametre spécifique à chaque image (ce parametre est l'id de l'image).

Je pensais utiliser une map avec un onclick sur l'area (ca doit être possible non?) mais je ne sais pas comment faire varier le parametre de la fonction javascript puis que le onclick et défini dans la map.

J'avais oublié un détail majeur : mon image est en background....
donc forcement je laisse tomber cette solution. (mais si vous aviez la réponse je la prend quand meme Smiley biggrin ).

Auriez vous une idée sur comment résoudre ce problème?

Merci d'avance !
Modifié par Puce (16 Aug 2007 - 11:36)
Je ne suis pas sur d'avoir bien tout compris, mais si ton image est en background d'un élément, ne peux-tu pas ajouter un lien (transparent, de 20px de large, de toute la hauteur de l'image) à l'intérieur de ton élément et d'appliquer la fonction javascript sur ce lien ?

Et à l'intérieur de la fonction tu devrais pouvoir ainsi retrouver l'id de l'image avec un this.parentNode.id
C'est fait rapidement et ça a ses défauts (je suis pas encore un pro Smiley langue ). Je ne sais pas si ça pourrait t'aider. Utilise un div au lieu de l'img. ça devrait être ok. J'espère que ça t'aidera.


<html>
<head>
<script type="text/javascript">
var c_x, c_y;
function click_event(e){
	e = e || window.event;
	c_x = e.clientX;
	c_y = e.clientY;
}

function click_img(o){
	if (c_x-o.offsetLeft<20 && c_y-o.offsetTop<20){
		alert("hello world!");
	}
}

</script>
</head>
<body onload="document.onmousedown=click_event;">

<br>
<br>
<br>
<center>
<img src="test.gif" border="1" onmouseup="click_img(this);">
</center>

</body>
</html>
Merci Tymlis.
J'ai testé mais malheureusement cela ne semble pas fonctionner.

Merci à toi aussi Jah-love59.
Je ne voulais pas trop utiliser les divs car j'ai deja une arborescence assez costaud, mais je vais devoir m'y resoudre visiblement Smiley smile

Si quelqu'un a une autre solution, je prend toujours Smiley murf

Merci d'avance.
Il n'y a aucune page sur le net car il s'agit d'une version interne en développement d'un site.

Voici toutes fois une illustration :

J'ai donc les divs de droite (*1) auxquelles je veux attribuer la possibilité qu'en cliquant sur les 20 premiers pixels (*2) à gauche, l'on active la fonction javacript permettant de cacher la div choisie.

Voila Smiley smile

Merci.

(*1 : avec une image de fond portant ici l'inscription "A cacher")
(*2 : zone couverte par le texte)
personnellement accroche toi plutôt sur un truc plus simlpe en utilisant un élément en position absolue.
Un exemple simple qui pourrait repondre à ta question

<ul id="listeimages">
	<li><img src="monimage1" /><span></span></li>
	<li><img src="monimage2" /><span></span></li>
	<li><img src="monimage3" /><span></span></li>
</ul>

<script type="text/javascript">
window.onload = function() {
	var listeimages = document.getElementById("listeimages");
	var span = listeimages.getElementsByTagName("span");
	for (var i=0; i<span.length; i++) {
		span[i].onclick = function(pouik(this));
	}
}
function pouik(elm){
	var li = elm.parentNode;
	var img = li.getElementsByTagName("img");
	if (img.length>0) img = img[0];
	//maintenant tu peux traiter ce que tu veux avec ton image, et en plus au lieu de passer un id, 
	//tu passes une reference de l'image, ce qui est mieux, puisque tu te passes completement d'id.
}

</script>

<style type="text/css">
#listeimages li {
	float:left;
	position:relative;
}
#listeimages img {
	display:block; /* pour corriger un petit bug de IE */
}
#listeimages span {
	position:absolute; 
	height:20px; 
	width:20px;
	top:0;
	right:0;
	cursor:pointer;
}
</style>
[/i]
Modifié par Gatsu35 (17 Aug 2007 - 04:55)
Impec, merci beaucoup.
Je n'avais pas du tout penser à structurer en <ul><li>, c'est une très bonne idée!

J'applique ça Smiley smile

A plus Smiley ravi 
span[k].onclick = function(pouik(this));
ne fonctionne pas, il faudrait écrire span[k].onclick = function() { pouik(this) } ou encore mieux span[k].onclick = pouik (et dans ce cas remplacer elm par this dans la foncton pouik)

(j'ai remplacé les [ i] par des [k], sinon ça interfere avec le code du forum)

Oh et pour les boucles for, pour qu'elles soient plus performantes, si tu a un grand nombre d'objets à parcourir mieux vaut faire

for (var i=0, max = span.length; i<max; i++) { }

Voili, voilou
Modifié par Tymlis (17 Aug 2007 - 11:41)
Tymlis a écrit :
span[k].onclick = function(pouik(this));
ne fonctionne pas, il faudrait écrire span[k].onclick = function() { pouik(this) } ou encore mieux span[k].onclick = pouik (et dans ce cas remplacer elm par this dans la foncton pouik)

(j'ai remplacé les [ i] par des [k], sinon ça interfere avec le code du forum)

Oh et pour les boucles for, pour qu'elles soient plus performantes, si tu a un grand nombre d'objets à parcourir mieux vaut faire

for (var i=0, max = span.length; i<max; i++) { }

Voili, voilou

Je plussoie pour le function (surtout que je l'ecrit tous les jours Smiley ohwell )
mais c'est un peu écrit à 5h du mat Smiley biggol
Sujet clos
Aller à