inclure une image dans une autre image

[emc2]

Bonsoir,

Je souhaiterais savoir quels sont les codes à utiliser pour ajouter une image sur une autre image sans que ces deux soit fusionnées en une seule. en fait, sur une page html, j'ai posée une carte avec la mer et des iles. je voudrais pouvoir positionner des petits navires sur cette carte en fonction de la position qu'ils ont dans le cadre du jeu. De cette manière, en modifiant simplement les coordonnées de l'image représentant le navire, à la mise à jour de la page html, le navire passera de l'ancienne position à la nouvelle.
<-la carte, et le bateau ->

Comment puis-je coder ma page pour qu'elle positionne le bateau quelque part sur la mer autour de l'ile selon les positions que j'aurais déterminé dans les codages. tout en gardant biensûr l'intégrité de l'image de la carte, car ensuite je dois pouvoir changer les coordonnées du bateau de façon à ce qu'il apparaisse ailleurs sur la carte quand je met à jour ma page html.
de même, comment obtenir sur l'image du bateau un fond transparent à la place du bleu, de manière que quand il est positionné près d'une côte, la partie débordant sur l'ile ne soit pas recouverte de bleu, mais laissant apparaitre ce qu'il y a sous le fond de l'image "bateau".

Merci à vous.

[Dr. Sam]

Bonjour,

Pourquoi ne pas faire tout cela dans un table:

Code:

<table width="206px" height="198px" style="background:url(http://i44.servimg.com/u/f44/16/74/01/20/ile_se10.jpg);"><tr><td><img class="bat" src="http://i44.servimg.com/u/f44/16/74/01/20/bateau10.jpg" width="37px" height="27px"></td></tr></table>

Alors voilà le bateau sera quelque part dans l'image... J'ai mit une class a cette image afin de la déplacer. Il faudrait que je sache ou dans l'image le bateau va t'il ?

[emc2]

Le bateau va bouger en fonction des choix du capitaine qui donnera au maitre du jeu la direction et tirera aux dés le nombre de pas qu'il lui faudra avancer.
par exemple, si le navire a la position 15,45 et que le capitaine souhaite aller vers le nord, et qu'il tire une carte de 10 pas, et bien le bateau se retrouvera à (15 + 10) > 25,45.
Le maitre du jeu redéfini donc les coordonnées du bateau le table, et enregistre la modification. A l'affichage, sur la carte, le bateau a changé de position. De cette façon, pas besoin d'héberger une nouvelle carte avec le bateau sur sa nouvelle position.
Comment utilise t-on la commande "class" ?
Pour la proposition des codes, c'est à peu près cela que je cherche à obtenir.

Merci.

[emc2]

Petit up pour faire vivre cette requête ...

[Dr. Sam]

Ha d'accord

en fait prenez ce code:

Code:

<table width="206px" height="198px" style="background:url(http://i44.servimg.com/u/f44/16/74/01/20/ile_se10.jpg);"><tr><td><img src="http://i44.servimg.com/u/f44/16/74/01/20/bateau10.jpg" width="37px" height="27px" style="margin-top:0px; margin-left:0px;"></td></tr></table>

Maintenant celui qui veux déplacer le bateau il faut qui change les valeur de cette ligne de code, style="margin-top:0px; margin-left:0px;"

Pour le déplacer il faut jouer avec les valeur 0px dans cette ligne de code

[emc2]

Merci ! c'est exactement ce que je cherchais à faire ! y'a pas à dire, quand on maîtrise, on maîtrise ! Encore mille fois merci pour cet aide.
Il me reste plus qu'à trouver un moyen de faire en sorte que le fond de l'image du bateau soit "transparente" sur les pixels qui n'appartiennent pas au bateau et ce sera complet.
Dois-je faire cette requête dans ce fil, ou dois-je créer un nouveau fil ?

[tupac]

Bonsoir

Voici votre bâteau sur fond transparent.

[emc2]

Merci, beaucoup. Mais j'aurais aimé apprendre comment le créer car je dois en faire plusieurs de différentes couleurs et je n'ai pas encore déterminé la taille de mes navires.
Je rencontre aussi un problème sur le code que M.D. m'a donné.

Code:

<table width="206px" height="198px" style="background:url(http://i44.servimg.com/u/f44/16/74/01/20/ile_se10.jpg);"><tr><td><img src="http://i44.servimg.com/u/f44/16/74/01/20/5px10.jpg" width="5px" height="5px" style="margin-top:-99px; margin-left:-2px;"></td></tr></table>

J'ai changé le bateau par un carré de 5 X 5 pour simplifier le calcul, mais le fait est que si je veux mettre mon point à la position 1,1 de ma carte, je dois les paramétrer en position -99,-2. C'est-à-dire avec des valeurs négatives. Avec le bateau de 37 X 27, j'ai le même problème.Quelle en est la raison ? Et comment y remédier ?

[Scoubifitz]

bonsoir,

c'est l'éternel souci entre les positions relatives et absolues ...

on va d'abord placer l'image de votre carte dans un cadre qui sera défini de façon relative par rapport au cadre du message par exemple ...

puis on va définir plusieurs cadres carrés de 8px , placés de façon absolue dans le cadre de la carte ....

on va donner un fond (background) à ces carrés , et une distance par rapport au haut (top) et à la gauche (left) du cadre "carte" ...

on va donner un titre (title) à ces carrés pour les reconnaitre , et pour les identifier en les survolant avec la souris ...

on peut naturellement remplacer ces carrés par des bateaux ...

Code:

<div style="background:url(http://i44.servimg.com/u/f44/16/74/01/20/ile_se10.jpg);width:206px;height:198px;position:relative;top:0px;left:0px;margin:auto"><div style="background:yellowgreen;width:8px;height:8px;position:absolute;top:0px;left:0px;" title="vert"></div><div style="background:yellow;width:8px;height:8px;position:absolute;top:50px;left:5px;" title="jaune"></div><div style="background:red;width:8px;height:8px;position:absolute;top:55px;left:85px;" title="rouge"></div><div style="background:blue;width:8px;height:8px;position:absolute;top:105px;left:125px;" title="bleu"></div></div>

[emc2]

Effectivement, je viens de comprendre la nuance et comment cela s'articule. Merci beaucoup. Je fais quelques essais pour l'adapter à ma carte du jeu qui se trouve elle-même incluse dans un encodage plus global. Mais d'ores et déjà, je peux baliser par "résolu".
Merci encore.