Sujet Précédent Sujet Suivant

Rezize et incrustation sur page d'accueil

mlies Messages postés 9 Date d'inscription jeudi 5 novembre 2009 Statut Membre Dernière intervention 2 juin 2010 - 5 nov. 2009 à 13:54
mlies Messages postés 9 Date d'inscription jeudi 5 novembre 2009 Statut Membre Dernière intervention 2 juin 2010 - 17 nov. 2009 à 01:10
Bonjour,
je suis un vrai grand débutant...
En Javascript et sur ce site...
Du coup savoir si je post au bon endroit ?

Bref, j'avais un webmaster...un peu dépassé malheureusement pour raisons personnelles.
Et j'ai un script pour ma page d'accueil mais il est très imparfait.
J'aimerais obtenir une page d'accueil avec une photo en plein écran (un resize en fonction de la taille de l'écran de l'internaute).
Et un petit texte en incrustation sur la photo.
Pour l'instant ce que j'ai c'est une photo, un cadre noir et dans le cadre noir un texte avec une police trop grande.
Ce qui me sauve c'est que le fond de la photo est noir...du coup ça donne l'impression que c'est en plein écran...mais pour les petits écrans, c'est vraiment pas top.
Le tout est visible à cette adresse :
http://www.cie-ma2.com
Le code est accessible sinon, le voici ci dessous
D'avance merci pour votre aide
Nicolas


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>- compagnie MA2 -</title>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">

<meta name="description" content="Nicolas Maloufi - Compagnie MA2 nicolas maloufi - bettina masson">
<meta name="keywords" content="compagnie ma2, nicolas maloufi, Danse Dense, Journees Danse Dense, Adiam 95, Escales 2009, Escales en Val d'Oise, Talents Danse, Adami, Drac Ile de France, ex-tension, et s il n'etait question que de ?a, Soyons Baroque, les effondres, Emilie Legret, Daniel Ciampolini, Cyril Leclerc, Aurore Ugolin, Dominique Mabileau, Bertrand Gauguet, Dan Weinstein">
<meta name="generator" content="Adobe GoLive 6">
<title> - COMPAGNIE MA2 - </title>
<script language="JavaScript" type="text/javascript">
self.moveTo(0,0);
self.resizeTo(screen.availWidth,screen.availHeight);
</script>
</head>





,

----








</html>

7 réponses

Réponse 1 / 7
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
5 nov. 2009 à 15:18
Bien le bonjour,
Si j'ai tout compris, il faudrait dans la mesure du possible que l'image de fond (home1.jpg") soit adaptée à l'écran visiteur.
Il faut tenir compte du ratio (ayant travaillé avec des photographes et pris quelques dérouillées à ce sujet) pour faire cela, sinon ça va être pas beau
j'ai donc obtenu ce résultat: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>- compagnie MA2 -</title>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">

<meta name="description" content="Nicolas Maloufi - Compagnie MA2 nicolas maloufi - bettina masson">
<meta name="keywords" content="compagnie ma2, nicolas maloufi, Danse Dense, Journees Danse Dense, Adiam 95, Escales 2009, Escales en Val d'Oise, Talents Danse, Adami, Drac Ile de France, ex-tension, et s il n'etait question que de ?a, Soyons Baroque, les effondres, Emilie Legret, Daniel Ciampolini, Cyril Leclerc, Aurore Ugolin, Dominique Mabileau, Bertrand Gauguet, Dan Weinstein">
<meta name="generator" content="Adobe GoLive 6">
<title> - COMPAGNIE MA2 - </title>
<style>
/**
* Style appliqué à l'image d'acceuil
*/
#backEnterPict{
position:absolute;
top:0px;
}

/**
* Le texte 
*/
#welcomeText{
position:absolute;
z-index:5;
}
</style>
<script language="JavaScript" type="text/javascript">
// mis en commentaire,ça me gonfle ce genre de redimensionnement ;o)
//self.moveTo(0,0);
//self.resizeTo(screen.availWidth,screen.availHeight);
function resizeBackPict(){
var _img = document.getElementById("backEnterPict");
var _ratio = (640/1024);
var _newWidth =document.body.clientHeight / _ratio;
with( _img.style){
height = document.body.clientHeight + "px";
width= _newWidth +"px";
// centre l'image horizontalement alors
if ( document.body.clientWidth > _newWidth){
left = (document.body.clientWidth - _img.offsetWidth) /2 + "px";
}
}
// centrage du texte
var _welcomeText = document.getElementById("welcomeText");
with ( _welcomeText.style){
top = (document.body.clientHeight - _welcomeText.offsetHeight)/2 +"px";
left = (document.body.clientWidth - _welcomeText.offsetWidth)/2 +"px";
}

}

</script>
</head>







</html>


Mais le seul souci, c'est qu'il faut transformer l'image textehome.gif (un peu d'angloFranchouillard ) et passer le fond en transparent.

Voilà


[o-_-o]
0
Réponse 2 / 7
mlies Messages postés 9 Date d'inscription jeudi 5 novembre 2009 Statut Membre Dernière intervention 2 juin 2010
5 nov. 2009 à 15:35
Hello,
Merci "a lot" pour cette proposition.
Je vais essayer de trouver une option pour passer le fond en transparent et incruster le texte en police plus petite.
Encore merci
nicolas
0
Réponse 3 / 7
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
5 nov. 2009 à 15:41
Pour passer le fond en transparent, je peux te conseiller un logiciel gratuit et très bien: Paint.net
Après il suffit de redimensionner l'image de texte pour qu'elle soit plus lisible, mais déjà, dans l'état des choses, ça rend pas mal.

Bonne continuation.


[o-_-o]
0
Réponse 4 / 7
mlies Messages postés 9 Date d'inscription jeudi 5 novembre 2009 Statut Membre Dernière intervention 2 juin 2010
6 nov. 2009 à 11:27
Hello,
merci pour le petit logiciel.
Je vais jeter un oeil.
Mais juste pour info, le petit commentaire que tu as mis...il peut rester ?
Je peux l'enlever ?
Si je l'enlève il suffit d'enlever la ligne ?
Comme ça :
au lieu de
</style>
<script language= "JavaScript" type="text/javascript">
// mis en commentaire,ça me gonfle ce genre de redimensionnement ;o)
//self.moveTo(0,0);

avoir

</style>
<script language ="JavaScript" type="text/javascript">
//self.moveTo(0,0);

Et encore merci Zobibol
a+
nicolas
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
mlies Messages postés 9 Date d'inscription jeudi 5 novembre 2009 Statut Membre Dernière intervention 2 juin 2010
6 nov. 2009 à 11:48
ET ET ET...
J'ai bien mis ton fichier à la place de l'ancien...sauf que...
Il n'est pas pris...
C'est toujours l'ancien qui est actif.
Pourtant j'ai enregistré la modif.
mais il doit y avoir un autre bouton ou action que je ne vois pas.
Je suis chez infomaniak si tu connais.
A+
nicolas
0
Réponse 6 / 7
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
16 nov. 2009 à 13:55
Désolé pour le retard de ma réponse, mais j'ai eu quelques soucis de grappa
Il pourrait se produire plusieurs problèmes:
- Le temps de transfert sur le serveur (s'il est occupé ...)
- La solution ultime de tout bon développeur web qui veut pas corrigé un bug "Vide ton cache"
Ensuite d'après ce que j'ai vu tu ne centre le "texte" que horizontalement (je pense que c'est volontaire).
Et enfin, tu peux soit dé-commenter mes commentaires: 
//self.moveTo(0,0);
//self.resizeTo(screen.availWidth,screen.availHeight);

soit les supprimer (c'est vous qui voyez comme dirait l'autre)

[o-_-o]
0
Réponse 7 / 7
mlies Messages postés 9 Date d'inscription jeudi 5 novembre 2009 Statut Membre Dernière intervention 2 juin 2010
17 nov. 2009 à 01:10
Hello,

Merci pour ta réponse.
Il fallait vider le cache...
Et oui, le texte centré uniquement horizontalement, sinon ça arrive en plein milieu de l'écran et bouffe la photo...
Encore merci
et certainement à bientôt pour d'autres précieux conseils.
bien à toi
nicolas
0

Discussions similaires

exemple de page d'accueil avec la balise div et css
belkaiednaim -
belkaiednaim -

5 réponses
code source HTML
bandifull -
bandifull -

5 réponses
Interface pour chaque page
Xini28 -
malalam -

4 réponses
PAGE D'ACCUEIL EN VB.NET
Kentobar -
Kentobar -

2 réponses
Afficher le code source d'une page HTML
bullow -
Marcial -

3 réponses
Rejoignez-nous