écrire sur une image

écrire sur une image - HTML/CSS - Programmation

Marsh Posté le 24-04-2009 à 11:05:11    

Bonjour,
J'ai un problème avec mon site j'aimerais que les images ce trouvant dans un tableau puissent être redimensionner ou un moyen d'écrire dans un cadre précis le tous au dessus de l'image. je sais pas si je suis bien précis. en détail j'ai une image soit je la découpe en plusieurs partie que j'intègre dans un tableau de là ce pose le problème de redimension car mon code fonctionne extrêmement bien dans le body mais si je met l'image dans un tableau et bien la le code ne fonctionne pas, voici le code
 
<head>
<script type="text/javascript">
<!-- debut
function resolution() {
document.location="<?php echo $_SERVER['PHP_SELF']; ?>?width="+screen.width+"&height="+screen.height;
}
// fin -->
</script>
</head>
<body>
<?
if( !isset($_GET['width']) and !isset($_GET['height']) ){
echo '<body onload="resolution();" ';
}
else{
echo '<body ';
}
echo leftmargin='0' topmargin='0' marginwidth='0' marginheight='0'?>
<img src="test.jpg" width="<?= (1280*$width/1280)?>" height="<?= (1024*$height/1024)?>" />
</body>
 
Sa c'est le code qui fonctionne bien si je mets cette même image dans un tableau la redimension ne fonctionne plus. Si quelqu'un a une solution je suis preneur.
 
Ma deuxième solution serai d'intégrer l'image dans le body pour que celle-ci puisse être redimensionné mais problème comment réussir a écrire sur l'image en gros avoir une zone qui ce réduise ou augmente selon la résolution et qui par conséquent reste placer au même endroit vu que la redimension sera la même.
 
Voilà alors si quelqu'un à une autre solution ou a une réponse a mes problèmes je lui en serais reconnaissant.
Merci à vous.

Reply

Marsh Posté le 24-04-2009 à 11:05:11   

Reply

Marsh Posté le 24-04-2009 à 13:10:09    

1) Tu es dans la mauvaise catégorie => HTML/CSS/JS
2) Attention, le "screen" en JS te sort la résolution de l'ordinateur, et non la taille de la fenetre "active" du navigateur... Il existe une magouille pour connaitre la taille de la fenetre ;)
3) Met ton style en CSS, c'est plus clair, et surtout respectueux des standard !
4) Comprend tu ton code ? J'aimerai savoir pourquoi tu te sert de PHP pour communiquer des valeur que JavaScript sait très bien donner au HTML (c'est même son rôle !)
5) (1280*$width/1280) = $width... pourquoi multiplié et diviser un chiffre par le même ? pareil pour $height...
 
Que cherche tu au final ? Une image de la taille de la fenetre, avec un texte par dessus ?


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 24-04-2009 à 17:02:44    

1)tous d'abord désolé d'avoir mit mon sujet dans la mauvaise catégorie si un modo peut le déplacer merci à lui.
 
2) Pour la fonction screen elle fonctionne très bien même au niveaux de la fenêtre active testé et approuvé ;)
 
3) Je serais d'accord pour le CSS mais seul problème impossible de communiquer mes variable ou de faire du php dans les CSS
 
4) Je comprend une partie de mon code celle qui me permet la redimension de mon image la partie js et pour moi encore un peu flou
 
5) celà me permet d'avoir une image toujours proportionnel EX : si mon image et prévu pour un écran de résolution 1280 l'opération sera inutile car 1280*1280/1280=1280. par contre si la résolution passe de 1280 à 800 pas de soucie 1280*800/1280=800. pareille pour la hauteur. Ce qui fait que mon image et redimensionner avec des valeur proportionnel à l'image de base.
 
6) C'est a peu pret sa j'ai une image occupant 100% de ma fenêtre au milieu de cette image une zone qui était prévu pour l'écriture et je cherche donc à écrire dans cette zone précise.
 
Voilà j'espère avoir été un peu plus clair que précédemment merci en tous cas pour t'as réponse.

Reply

Marsh Posté le 24-04-2009 à 17:42:45    

2) tu n'as pas compris ce que je dis à propos du "screen"... exemple moi qui suis en 1650*1050, si je vais sur ton site, j'aurais une image de 1650*1050, alors que la page web s'affichera sur un peu moins... parceque mon navigateur ne sera pas en plein écran, et que même, la barre de menu de firefox prend un certain espace...
 
3) si le CSS est défini au sein même du .php, alors si, tu peux y toucher...
 
5)Dsl mais non, ton calcule ne sert à rien ! c'est comme si je prennais un chiffre, que j'additionnais 5 et que je soustrayais 5... on retombe sur le meme chiffre !


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 24-04-2009 à 17:52:31    

2) J'avais bien comprit ce que tu me disait et personnelement j'ai fait le test et il m'as redimensionner avec la fenêtre du navigateur. Ne me demande pas pourquoi mais en tous cas c'est ce que j'ai vu.
 
3) Faudrait que tu me donne un exemple le CSS n'étant pas ma spécialité si tu voit comment intégrer mon code dans du css pour que les images soit redimensionner je t'avoue que sa m'aiderais.
 
5) prend t'as calculette et fait l'opération suivante 1280*800/1280=800 sa c'est pour une image de base qui doit prendre tous l'écran maintenant si ton image ne fait plus 1280 mais 900 l'opération sera donc de 900*1280/1280=900 très bien vu que l'on veut que cette image et cette valeur pour un affichage en 1280. Maintenant si ta résolution n'est plus celle de base soit 1280 et passe donc en 800 le calcule sera 900*800/1280=562.5 ce qui te permet donc de gardez une proportionnalité au niveaux de ton image. Effectivement dans mon cas ce n'est pas très utile car je peux mettre juste height="$height" ce qui reviendrait au même que mon calcule je te l'accord c'est juste que j'ai garder ce calcule car au début j'avais plusieurs image a redimensionné.

Reply

Marsh Posté le 24-04-2009 à 18:00:24    

ok, je te fais un exemple...
Mais dis moi avant ce que tu veux... une image qui prenne toute la fenêtre (mais qui garde le ratio) avec la possibilité de mettre du texte par dessus ?
Toutes tes images ont le même ratio ?


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 24-04-2009 à 18:06:30    

J'ai fais le test, screen retourne bien la resolution et non la taille de la fenetre... donc, tu aura un scroll dans tous les cas :)
Par ailleur si tu contraignais ton tableau à 100% de la fenetre, c'est normal que l'image ne s'affichait pas car la cellule était trop petite...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 24-04-2009 à 18:07:40    

en fait si je te fait un schéma rapide sa te donne une image de fond qui contient la bannière le menu droite gauche le centre(la ou je dois pouvoir écrire) l'image en question doit toujours être en plein écran. Voilà je te remercie de prendre de ton temps pour moi.

Reply

Marsh Posté le 24-04-2009 à 18:08:42    

le scroll vertical ne me géne pas vraiment en ce qui concerne le site c'est plus l'horizontal qui m'énerve

Reply

Marsh Posté le 24-04-2009 à 18:30:20    

Oula, c'est pas trop compréhensible tout ça...
Le corps du site se retaille en fonction de la taille de la fenetre aussi ?
Attention hein, faut être claire...

 

Si j'ai bien compris, t'a question aurait du etre "comment mettre une image de fond qui se taille en fonction de l'écran"...
Moi je vais te faire ça mais sans tableau (les tables ça pu :p) et je vais superposer une div, à toi de faire ta bannière dedans...


Message édité par abais le 24-04-2009 à 18:31:09

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 24-04-2009 à 18:30:20   

Reply

Marsh Posté le 24-04-2009 à 18:35:41    

Je suis d'accord avec toi en ce qui concerne les tableaux.
 
En ce qui concerne le site effectivement tous doit être modulable que ce soit le corps ou bien l'image de fond. Vraiment merci a toi

Reply

Marsh Posté le 24-04-2009 à 18:43:43    

Alors je m'arete tout de suite, c'est une prise de tête ce que tu veux...
C'est surtout que le resultat n'est jamais garantie, d'ailleurs, aucun site (HTML/CSS) ne procède de la sorte !
il faudrait donner des taille minimal à chaques élément pour être sure que le texte dedans s'affiche (ou autre chose) bref, tu pars sur du nimporte quoi, crois moi...
Rien que le fond scalable, c'est lourd et inutile, mais alors, les module aussi... Oo


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 24-04-2009 à 18:48:23    

que le texte ne se modifie c'est pas non plus obligatoire mais par contre que le module reste bien en place la ou il y a le centre de l'image par contre oui si c'est possible j'aimerais pouvoir le faire. Tu pense vraiment que de mettre un module en le placer et que celui-ci garde le même endroit ou il ce trouve, en ce redimensionnant comme l'image, n'est pas faisable.

Reply

Marsh Posté le 24-04-2009 à 19:43:14    

C'est faisable en se prenant la tete, mais c'est pas bon.. qu'il se module seulement sur la largeur pourquoi pas, mais c'est pas top...
Même l'image de fond, dans le sens ou la page ne sera jamais au ratio de l'image, t'auras toujours une marge quelque part...
Le mieu, c'est de mettre une grande image fixe qui se tronque naturellement...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 24-04-2009 à 19:45:08    

http://gcyrillus.free.fr/dkg/trucs [...] sible.html . Je te remercie mais finalement j'ai trouvé mon bonheur sur ce site. Merci en tous cas pour toutes ces explication finalement c'était pas très très dur mais fallait vraiment le savoir

Reply

Marsh Posté le 24-04-2009 à 19:48:31    

elle garde pas le ratio ><


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 24-04-2009 à 19:49:51    

Je viens de faire le test effectivement sa ne garde pas le ratio tu voit un moyen pour garder le ratio avec son code source


Message édité par malankin le 24-04-2009 à 19:50:04
Reply

Marsh Posté le 24-04-2009 à 19:55:18    

un peu de JS, je te dirai ça


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 24-04-2009 à 19:56:10    

je te remercie encore une fois de la générosité dont tu fait preuve envers moi merci

Reply

Marsh Posté le 24-04-2009 à 20:12:02    

Meme pas besoin de JS, enlève le "height:100%" dans le CSS de :
html img.imghtml, html div.imghtml{...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 24-04-2009 à 20:18:59    

non sa ne marche pas si je fait sa et que je passe en 800*600 mon image n'apparait pas en entier et pas de scroll pour descendre finalement il va falloir du js.

Reply

Marsh Posté le 24-04-2009 à 20:43:55    

bon, okay, mais ne soit pas préssé ^^ je prendrais le temps plus tard...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 24-04-2009 à 20:45:29    

t'inquiète je suis pas presser je vais faire des recherches de mon coté aussi. merci a toi.

Reply

Marsh Posté le 24-04-2009 à 22:04:33    

Re, bon, j'ai rematé le truc, c'est simple, pas besoin de JS toujours !
En plus de supprimer le height:100% comme je t'ai dit, il faut aussi que tu supprime dans le CSS du body:
overflow:hidden
(cette propriété fait en sorte que tout ce qui dépasse du body est tronqué)


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 24-04-2009 à 22:38:01    

désoler du temps de réponse j'étais en train d'essayer de faire du js mais bon pas terrible. faut dire que je débute a ce niveaux là ;) je vais voir si sa fonctionne et je te dit de suite

Reply

Marsh Posté le 24-04-2009 à 22:42:44    

OK après le test sa fonctionne je n'es plus qu'as faire ce que j'ai a faire et sa ira. Sincèrement merci a toi d'avoir prit le temps de me répondre. je te souhaite une bonne soirée et un agréable weekend.

Reply

Marsh Posté le 24-04-2009 à 23:20:50    

No problème, je débute au JS et je partage 2-3 truc dans la catégorie dédié du forum ;)


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 28-04-2009 à 13:59:52    

Ce sujet a été déplacé de la catégorie Graphisme vers la categorie Programmation par Darth21


---------------
TZR un jour…  |  gamertag: cropNcut
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed