[Résolu] images de démarrage

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Cof666
Arias
Messages : 10
Inscription : 23 févr. 2004, 14:55

[Résolu] images de démarrage

Message par Cof666 »

Bonsoir tout le monde, suite au conseil de Calimo, je viens poster mon petit problème ici.
En faisant pointer la page de démarrage de mon Fox sur une page html (cf ce post, merci Calimo), celui-ci démarre à chaque fois avec une image différente. Cette page HTML ainsi que mes images sont stockées sur mon disque dur.
Ca fonctionne très bien mais, car il y a un mais, l' image sélectionnée est affichée avec une marge (cf ici).
En cherchant sur le net comment essayer de régler ce détail, j' ai trouvé ceci.
A partir de ça, j' ai modifié le fichier HTML.css (situé dans C:\Program Files\Mozilla Firefox\res) pour enlever cette marge.
body {
display: block;
margin: 8px;
}
j' ai mis le margin à 0px et plus de marge (cf ).
Mais comme on me l' a fait remarquer, cette marge est utile quand on tombe par exemple sur des documents textes.
Je devrai pouvoir régler ce problème de marge par mon userContent.css et ainsi remettre le HTML.css à 8 px.
Mais je ne sais pas le faire, peut être en combinant ma page html et l' astuce donnée par Yan Morin.
Votre aide me serait très précieuse.
Merci d' avance.
A+

ps : ma page html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>

<head>
<title>Splash screen...</title>
<script type="text/javascript">
// Pages à afficher. Chaque page doit être encadrée de guillemets 'simples' (les apostrophes),
// et elles doivent être séparées par des virgules :
var pages = new Array('file:///c:/Splashs/Fox1.jpg','file:///c:/Splashs/Fox2.jpg','file:///c:/Splashs/Fox3.jpg','file:///c:/Splashs/Fox4.jpg','file:///c:/Splashs/Fox5.jpg');

//Ne pas modifier le code en dessous
function rand(min,max)
{
return (Math.round(Math.random()*(max-min)))+min;
}
var maxpages = pages.length
var minpages = 0;
var pg = rand(minpages,maxpages-1);
window.location = pages[pg];
</script>
</head>

<body>
<p>Splash screen...</p>
</body>

</html>
ps2 : désolé d' avoir été si long, j' espère ne pas avoir été trop ennuyeux.
Dernière modification par Cof666 le 18 déc. 2004, 23:46, modifié 1 fois.
Firefox 1.0.7
Thunderbird 0.9
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Avec un script du style :

Code : Tout sélectionner

var Image = document.createElement('img');
        Image.setAttribute('src', 'pages[pg]');
document.getElementById('image').appendChild(Image);
En ajoutant le code à la fin du script, en mettant un id="image" sur ton paragraphe

Code : Tout sélectionner

<body>
<p id="image"></p>
</body>
et en mettant aussi

Code : Tout sélectionner

<style type="text/css">* {margin:0; padding:0;}
dans le head, ça devrait potentiellement pouvoir passer :roll:

Si ça marche c'est le premier de script DOM que je fais marcher :lol:
ClémentD
Lézard à collerette
Messages : 330
Inscription : 21 déc. 2003, 12:40

Message par ClémentD »

Voici un essai en javascript qui vaut ce qu'il vaut mais qui fonctionne et qui correspond aux exigences.

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html>
<!-- 
Page affichant une image au hasard dans une fenêtre sans bordure.
Suite à la demande dans les topics suivants:
http://www.geckozone.org/forum/viewtopic.php?t=5302
http://www.geckozone.org/forum/viewtopic.php?t=14658
Code qui pique les yeux mais qui valide de ClémentD.
-->
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">	
		<title>Bienvenue dans Firefox</title>
		<!-- Pas de bordures. -->
		<style type="text/css">body {margin:0; padding:0;}</style>	
	</head>
	
	<body>
		<script type="text/javascript">		
		
			// On affiche l'image X.ext
			// avec X compris entre 1 et nbi
								
			// Nombre d'images	
			var nbi = 9 ;
			// Extention des images
			var ext = ".jpg" ;
			// Texte alternatif	
			var alt = "Image Aléatoire";
			// Chemin vers une des images		
			var image;
			// On prend une image avec random()
			image = Math.round (Math.random() * (nbi-1) +1) +ext;	
			// On affiche cette image			
			document.write('<img src="' + image + '" alt="' + alt + '">');
						
		</script>		
		
	</body>
</html>
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Il y a un document.write, ce n'est pas conseillé :lol:

Cela dit effectivement c'est pas mal :wink:
ClémentD
Lézard à collerette
Messages : 330
Inscription : 21 déc. 2003, 12:40

Message par ClémentD »

calimo a écrit :Il y a un document.write, ce n'est pas conseillé :lol:

Cela dit effectivement c'est pas mal :wink:
C'était juste pour me tester, niveau JavaScript je suis resté au moyen âge, d'ailleur au début je me suis demandé pourquoi le validateur aimait pas mes <script language="JavaScript"> ... Faudrais que j'essaye le DOM et toutes ces choses là :D
Cof666
Arias
Messages : 10
Inscription : 23 févr. 2004, 14:55

Message par Cof666 »

Merci beaucoup ClémentD pour ton essai qui est transformé. Ca marche nickel et j' ai remis le margin du HTML.css de mon Fox à 8px.
Merci Calimo pour le temps que tu as consacré à mon petit problème.
Bonne fin de soirée.
A+
Firefox 1.0.7
Thunderbird 0.9
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Soit le code suivant :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<!--
Page affichant une image au hasard dans une fenêtre sans bordure.
Suite à la demande dans les topics suivants:
http://www.geckozone.org/forum/viewtopic.php?t=5302
http://www.geckozone.org/forum/viewtopic.php?t=14658
Code qui pique les yeux mais qui valide de ClémentD revu par Calimo.
-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
	<title>Bienvenue dans Firefox</title>

	<!-- Pas de bordures. -->
	<style type="text/css">body {margin:0; padding:0;}</style>

	<!-- script d'affichage -->
	<script type="application/x-javascript">
		// On affiche l'image X.ext
 		// avec X compris entre 1 et nbi

		// Nombre d'images
 		var NbImages = 9 ;
		// Extention des images
		var ExtFile = ".jpg" ;
		// Texte alternatif
		var AltTxt = "Image Aléatoire";
		// Chemin vers une des images
 		var ImageName;
		// On prend une image avec random()
 		ImageName = Math.round (Math.random() * (NbImages-1) +1) +ExtFile;
 		// On crée l'image
		var Image = document.createElement('img');
        Image.setAttribute('src', 'ImageName');
        Image.setAttribute('alt', 'AltTxt');
		// On affiche cette image via le DOM
		document.getElementById('InsertImage').appendChild(Image);
	</script>
</head>

<body>
	<p id="InsertImage" />
</body>

</html>
J'essaye de le faire le plus propre possible. J'ai donc type="application/x-javascript" pour le JavaScript (eh oui, text/javascript ça n'existe pas :lol: ), et c'est quand-même mieux de manipuler le DOM.

Ça me mets une erreur dans la console JS :

Code : Tout sélectionner

Erreur : document.getElementById("InsertImage") has no properties
Fichier Source : file:///C:/Documents%20and%20Settings/Xavier/Bureau/testcase2.html
Ligne : 37
Pourquoi ça ?
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Semrush [Bot] et 2 invités