Un appel javascript dans une div

cosycorner Messages postés 31 Date d'inscription samedi 19 novembre 2005 Statut Membre Dernière intervention 18 mai 2009 - 31 janv. 2008 à 11:10
lezouave33 Messages postés 8 Date d'inscription mardi 24 février 2004 Statut Membre Dernière intervention 2 février 2013 - 27 janv. 2010 à 15:41
Bonjour à tous,
Je voudrais insérer des images aléatoires dans une div aux dimensions précises.
(en background ?)

J'ai trouvé ce script qui fonctionne parfaitement, mais je souhaite que ça apparaisse dans une div précise à une position précise.



Je tente de mettre la div dans le script :

document.write
('
[' + Page + ' ]
');
}
</SCRIPT>

Mais sans succès...

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<SCRIPT LANGUAGE="JavaScript">
/*
# ** Extention de vos fichiers Image.
# ** Le nom de vos images doivent etre du type :
# ** --> 1.jpg, 2.jpg, 3.jpg, 4.jpg, .... X.jpg
# ** --> 1.gif, 2.gif, 3.gif, 4.gif, .... X.gif
# ** --> ...
# */
var extention = ".jpg" ;
/*
# ** Nombre d'images diférentes à afficher.
# */
var nbimage = 10 ;
/*
# ** Déclaration d'autres varaibles.
# */
var url;
var rep;
var alt;

function Images_Aleatoire()
{
//Génére un nombre aléatoire, pour donner un numéro d'image.
numimage = Math.round( Math.random() * ( nbimage - 1 ) + 1 );
// Nom de votre page d'accueil
Page = "Accueil.html";
// Nom du répertoire de vos images.
rep = "Images";
// Message info bulle, lors du survole de l'image affichée.
alt = "--> Cliquez pour Entrer <--";
// Assemblage de la chaine pour afficher votre image.
url = './' + rep + '/' + numimage + extention ;
// Affiche le numéro d'image généré aléatoirement.
document.write( 'Numéro Image : ' + numimage + '

' );
// Affiche l'image choisie ainsi que le lien vers votre page d'accueil.
document.write
('
[' + Page + ' ]
');
}
</SCRIPT>

<style type="text/css">
<!--
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
-->

#bloc1 {
margin: 0;
padding: 0;
width: 100px;
height: 150px;
float:left;
background:#000000;
}

</style>

</head>

<SCRIPT language="JavaScript">
Images_Aleatoire();
</SCRIPT>

</html>

9 réponses

cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
31 janv. 2008 à 11:17
Bonjour,   

au lieu de faire un document.write, met le div en dur, en html
    et met l'image dans le innerHTML de ce div.

et d'ailleurs pourquoi un div ? une balise img toute simple
    dont on modifie le .src ne convient pas ?

<hr />                Cordialement            Bul         «mon Site»     «M'écrire»
0
cosycorner Messages postés 31 Date d'inscription samedi 19 novembre 2005 Statut Membre Dernière intervention 18 mai 2009
31 janv. 2008 à 11:54
oulala tout ça me parait abstrait.
Je ne connais pas trop le javascript... et jamais entendu parlé de innerHTML.
Il y a cet exemple qui est pas mal et qui pourrait fonctionner sur ce que je veux faire, mais ce que je voudrais, c'est que chaque image apparaisse au chargement de la page et que ça ouvre une pop-up au clic de celui ci.

Oui, en effet pourquoi dans une div précisément ? Parce que j'en suis au balbutiement...!
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
31 janv. 2008 à 12:10
>> Je ne connais pas trop le javascript...
    c'est le moment d'apprendre
       ta vie,ton job... ne dépend pas de cette application, tu as le temps.
    sinon, utilise ce qui existe, tel quel, il y a de nombreux exemples sur CodesSources.
<hr />                Cordialement            Bul         «mon Site»     «M'écrire»
0
cosycorner Messages postés 31 Date d'inscription samedi 19 novembre 2005 Statut Membre Dernière intervention 18 mai 2009
31 janv. 2008 à 12:28
c'est ce que je suis en train de faire ... !
Les bases du Javascript ... l'essentiel du langage dans sa structure....
0

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

Posez votre question
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
31 janv. 2008 à 12:35
si le script te convient, met le div là où tu veux
(
   )
<hr />                Cordialement            Bul         «mon Site»     «M'écrire»
0
cosycorner Messages postés 31 Date d'inscription samedi 19 novembre 2005 Statut Membre Dernière intervention 18 mai 2009
9 févr. 2008 à 08:11
Alors, ça a fonctionné, en fait, il fallait retirer les spécifications de la div dans le javascript.
Maintenant, ça marche en local, mais pas sur le serveur (les images ne s'affichent pas)

Voici mon code

HEAD

#bloc1 {

padding: 0;
width: 150px;
height: 200px;
float:left;
position:relative;
background-image:inherit;
}

BODY>>>

<script language="javascript">
Images_Aleatoire();
</SCRIPT>

Est ce un pb de serveur ? (je suis sur online.net)

Et merci de ton aide :))
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
9 févr. 2008 à 09:26
>>Est ce un pb de serveur ?
    probablement pas.
    une erreur dans l'adresse, le nom.... des images
    ( par exemple, respecter les Majuscules/minuscules ... alors qu'en local, si c'est
        avec windwos, ça baigne, sur le serveur, avec linux : non )
<hr />                Cordialement            Bul         «mon Site»     «M'écrire»
0
cosycorner Messages postés 31 Date d'inscription samedi 19 novembre 2005 Statut Membre Dernière intervention 18 mai 2009
9 févr. 2008 à 09:37
ca va mieux en le disant ... thx
0
lezouave33 Messages postés 8 Date d'inscription mardi 24 février 2004 Statut Membre Dernière intervention 2 février 2013
27 janv. 2010 à 15:41
Bonjour,

Moi mon CSS est ainsi fait :


#welcomeMessage{
height: 185px;
width: 944px;
margin: 0px auto;
padding: 25px;
position: relative;
background: url(images/globe.jpg) no-repeat 85% 60%;
text-align: left;

}

Et à "background" je ne sais pas comment dire que je veux une image aléatoire.

Pour info j'utilise le même javascript que celui sus cité.

Ma question :
Par quoi remplacer : "url(images/globe.jpg)" dans mon css ?

 
0
Rejoignez-nous