Alex XIV
Admin
Nombre de messages : 236
Age : 48
Localisation : par GPS
Date d'inscription : 02/02/2007
 |  Sujet: Cours n°2  Mar 13 Fév 2007 - 13:01 | |
| Galerie d'image avec défilement par flêches gauche et droite - Citation :
- <html>
<head>
<title></title>
<!--Déclaration des styles CSS, ici on applique des styles aux cellules tableaux et boutons--->
<style>
td{
background:#000000;
}
table{
background-image:url(images/fond.gif);
}
input{
font-size:25;
width:40;
height:40;
cursor:hand;
background:transparent;
color:#ffffff;
border:double 1 #ffffff
}
</style>
<script language="javascript">
////////début du SCRIPT///////////////////////////
/////// On crée une liste d'images avec leurs chemins
liste=["images/cruaute.jpg","images/esprit.jpg","images/mensonge.jpg","images/nemo.jpg","images/purificateur.jpg","images/tais-toi.jpg","images/vaillant.jpg"];
//On déclare la valeur de nbr qui sera le nombre d'éléments dans la liste. et on initialise i à 0
nbr=liste.length-1;
i=0;
///////FONCTION DROITE/////////////////////////
//Tant que l'image appartient à la liste on ajoute 1 à l'image donc on passe à l'image suivante
// Au premier clic i qui vaut 0 passera à 1 (car on a i++)
function droite(){
if(i<nbr){
i++;
}
//Sinon on repart au début de la liste à liste[0] , dans le cas ou on est arrivé à la fin de la liste cad à liste[6])
else{
i=0;
}
// Au premier clic i=1 on passera donc de: liste[0](cad cruaute.jpg) à: liste[1](cad esprit.jpg)
//liste[1] va s'afficher dans "main" qui correspond à la balise d'insertion d'image, donc on affichera : esprit.jpg etc...
document.getElementById("main").src=liste[i];
}
//////FONCTION GAUCHE///////////////////////////
// même principe que fonction droite mais en décrementant i
function gauche(){
if(i>0){
i--;
}
else{
//sinon on va à la fin de liste.
i=nbr;
}
document.getElementById("main").src=liste[i];
}
////FIN du script
</script>
</head>
<body topmargin="150">
<center>
<table border="0" cellspacing="20" cellpadding="10">
<tr>
<td colspan="2">
<!--IMAGE-->
<!--On nomme l'image en écrivant id="main"--->
<img src="images/cruaute.jpg" id="main">
</td>
</tr>
<tr>
<td align="center">
<!--Chaque button recoit un style CSS et appelle une fonction au mousedown--->
<input type="button" value="<<" onmousedown="gauche()">
</td>
<td align="center">
<input type="button" value=">>" onmousedown="droite()">
</td>
</tr>
</table
</center>
</body>
</html> | |
|
Alex XIV
Admin
Nombre de messages : 236
Age : 48
Localisation : par GPS
Date d'inscription : 02/02/2007
| | Sujet: exo2 Mar 13 Fév 2007 - 13:10 | |
| Un message s'affiche dans un div au passage de la souris sur une image. - Citation :
- <html>
<head>
<title></title>
<!-- Style s'appliquant au div, ici nommé "comment"-->
<!--On laisse juste le width pour laisser le height se gérer automatiquement en fonction du contenu!-->
<!--background-image:url(images/fond.gif) appele une image de fond dans le div!-->
<!--la div doit apparaitre uniquement au rollover sur les images! Pour cela on place : visibility:hidden --->
<!-- Si l'on faire bouger le div on DOIT LE PLACER EN POSITION ABSOLUE ! --->
<style>
#comment{
width: 100;border:double 1 #05193c;
background-image:url(images/fond.gif);
visibility:hidden;
position:absolute
}
</style>
<!--SCRIPT grace a ce script le div sera visible au passage de la souris sur les images -->
<!--style.visibility="visible" pour rendre le div visible (contraire de hidden)--->
<!--tt sera la valeur contenu dans les balises images est sera plaçé dans le div sur la page au rollover-->
<script>
function bulle(tt){
document.getElementById("comment").style.visibility="visible"
document.getElementById("comment").innerText=tt;
}
/// cette fonction va permettre de cacher le div dés que la souris n'est plus sur une image///////////////////////
function cacher(){
document.getElementById("comment").style.visibility="hidden";
}
function changer(){
///// Permet de faire suivre la souris par le div /////////////////////////
//// Je recupere la position de la souris par event///////////////////////
posx=event.x;
posy=event.y;
document.getElementById("comment").style.left=posx+25;
document.getElementById("comment").style.top=posy+20;
}
</script>
</head>
<body topmargin="150 ">
<center>
<img src="images/tais-toi.jpg" onmousemove="changer(); bulle('Film tout pourri!')" onmouseout="cacher()">
<img src="images/vaillant.jpg" onmousemove="changer(); bulle('Plus nul tu meurs!')" onmouseout="cacher()" hspace="50">
<img src="images/nemo.jpg" onmousemove="changer(); bulle('A chier des bulles!')" onmouseout="cacher()">
<!---On nomme la balise div en écrivant id="comment"--->
<div id="comment"></div>
</center>
</body>
</html> | |
|
