inclure une image dans une autre image

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu inclure une image dans une autre image

Message par emc2 le Ven 27 Juil 2012 - 0:31

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.


Dernière édition par emc2 le Mar 31 Juil 2012 - 19:41, édité 1 fois

emc2
*****

Messages : 518
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: inclure une image dans une autre image

Message par Dr. Sam le Ven 27 Juil 2012 - 1:53

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 ?

Dr. Sam
*****

Masculin
Messages : 894
Inscrit(e) le : 28/06/2012

http://www.fa-aide.com/
Dr. Sam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: inclure une image dans une autre image

Message par emc2 le Ven 27 Juil 2012 - 20:17

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
*****

Messages : 518
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: inclure une image dans une autre image

Message par emc2 le Dim 29 Juil 2012 - 14:54

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

emc2
*****

Messages : 518
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: inclure une image dans une autre image

Message par Dr. Sam le Lun 30 Juil 2012 - 13:19

Ha d'accord Smile

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 Wink

Dr. Sam
*****

Masculin
Messages : 894
Inscrit(e) le : 28/06/2012

http://www.fa-aide.com/
Dr. Sam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: inclure une image dans une autre image

Message par emc2 le Lun 30 Juil 2012 - 23:27

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 ?

emc2
*****

Messages : 518
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: inclure une image dans une autre image

Message par tupac le Lun 30 Juil 2012 - 23:46

Bonsoir

Voici votre bâteau sur fond transparent.


tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: inclure une image dans une autre image

Message par emc2 le Mar 31 Juil 2012 - 0:05

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 ?

emc2
*****

Messages : 518
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: inclure une image dans une autre image

Message par Scoubifitz le Mar 31 Juil 2012 - 1:50

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>



Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: inclure une image dans une autre image

Message par emc2 le Mar 31 Juil 2012 - 19:41

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.

emc2
*****

Messages : 518
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum