Besoin d'aide pour un forum
Résolu
Lys Swan
Messages postés
12
Date d'inscription
Statut
Membre
Dernière intervention
-
Lys Swan Messages postés 12 Date d'inscription Statut Membre Dernière intervention -
Lys Swan Messages postés 12 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai créé un forum et dans la PA, j'ai mis les les icônes des avatars des administrateurs. Seulement, il y a quelque chose que j'aimerais faire en plus, l'embêtant c'est que je ne connais pas le nom... Je vais essayer de bien le décrire. J'aimerais que, lorsque l'on passe le curseur sur l'icône, une autre image apparaisse avec un lien vers le profil de la personne. J'ai vu ça sur un autre forum, j'envoie donc des screens car mon explication n'est pas très claire...
Avant de positionner le curseur sur l'icône :
http://img4.hostingpics.net/pics/930864screen1.png
Le curseur est sur l'icône :
http://img4.hostingpics.net/pics/341197screen2.png
Voilà, merci d'avance !
Lys Swan
J'ai créé un forum et dans la PA, j'ai mis les les icônes des avatars des administrateurs. Seulement, il y a quelque chose que j'aimerais faire en plus, l'embêtant c'est que je ne connais pas le nom... Je vais essayer de bien le décrire. J'aimerais que, lorsque l'on passe le curseur sur l'icône, une autre image apparaisse avec un lien vers le profil de la personne. J'ai vu ça sur un autre forum, j'envoie donc des screens car mon explication n'est pas très claire...
Avant de positionner le curseur sur l'icône :
http://img4.hostingpics.net/pics/930864screen1.png
Le curseur est sur l'icône :
http://img4.hostingpics.net/pics/341197screen2.png
Voilà, merci d'avance !
Lys Swan
5 réponses
Merci mais... en fait je n'ai pas la moindre compétence en langage Ajax... ni en Javascript. Je me limite au HTML, et encore je ne suis pas très douée... Est-ce que c'est possible autrement ?
Salut,
Pour avancer forme toi à CSS, Javascript et Ajax, tu as des dossier sur CCM ou aussi ces cours gratuits webmaster.
Pour avancer forme toi à CSS, Javascript et Ajax, tu as des dossier sur CCM ou aussi ces cours gratuits webmaster.
Bonjour je vous ai fait un petit script vite fait
on a une page index.html avec deux photo qui corresponde a deux usager du forum
une page a.html avec une autre photo en background-image qui correspond au profil 1
pareil pour b.html le profil 2
le code de a.html
b.html qui est identique mais je le mais quand même
et la page qui nous intéresse index.html
ce code fonctionne mais a l'inconvénient d'ouvrir la page html au passage de la souris et de ne pas la refermer quand la souris sort, je sait pas comment faire pour fermer une page html avec mouseout, il faudra les fermer manuellement
on a une page index.html avec deux photo qui corresponde a deux usager du forum
une page a.html avec une autre photo en background-image qui correspond au profil 1
pareil pour b.html le profil 2
le code de a.html
<!DOCTYPE html>
<html>
<head>
<title>a</title>
<meta charset="UTF-8" />
<style type="text/css">
body {
background-image: url("image3.jpg");
}
</style>
</head>
<body><h1>profil usager 1</h1></body>
</html>
</body>
</html>
b.html qui est identique mais je le mais quand même
<!DOCTYPE html>
<html>
<head>
<title>b</title>
<meta charset="UTF-8" />
<style type="text/css">
body {
background-image: url("image4.jpg");
}
</style>
</head>
<body><h1>profil usager 2</h1></body>
</html>
</body>
</html>
et la page qui nous intéresse index.html
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Ma super page de site web qui tue tout</h1>
<a href="a.html"><img src="image1.jpg" alt="image1" id="image1" /></a>
<a href="b.html"><img src="image2.jpg" alt="image2" id="image2" /></a>
<script type="text/javascript">
var lien = document.getElementsByTagName("a");
var image1 = document.getElementById("image1");
var image2 = document.getElementById("image2");
lienlen = lien.length;
for(var i = 0; i < lienlen; i++) {
lien[0].onmouseover = function() {
test(this);
return false;
};
lien[1].onmouseover = function() {
test2(this);
return false;
};
}
function test(lien) {
if(image1) {
var page = window.open("/home/mickael/prog/a.html", "a.html", "width=300px, height=300px");
}
}
function test2() {
if(image2) {
var page2 = window.open("/home/mickael/prog/b.html", "b.html", "width=300px, height=300px");
}
}
</script>
</body>
</html>
</body>
</html>
ce code fonctionne mais a l'inconvénient d'ouvrir la page html au passage de la souris et de ne pas la refermer quand la souris sort, je sait pas comment faire pour fermer une page html avec mouseout, il faudra les fermer manuellement
je vous ai fait un autre code avec l'ouverture d'une image plutôt que d'une page html l'avantage est que lorsque la souris sort de l'image elle se referme toute seule
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<meta charset="UTF-8" />
<style type="text/css">
#effet {
display: none; /* Par défaut, on cache l'overlay */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center; /* Pour centrer l'image que l'overlay contiendra */
/* Ci-dessous, nous appliquons un background de couleur noire et d'opacité 0.6. Il s'agit d'une propriété CSS3. */
background-color: rgba(0,0,0,0.6);
}
#effet img {
margin-top: 100px;
}
p {
margin-top: 300px;
text-align: center;
}
</style>
</head>
<body>
<h1>Ma super page de site web qui tue tout</h1>
<a href="image3.jpg"><img src="image1.jpg" alt="image1" id="image1" /></a>
<a href="image4.jpg"><img src="image2.jpg" alt="image2" id="image2" /></a>
<div id="effet"></div>
<script type="text/javascript">
var lien = document.getElementsByTagName('a'), lienLen = lien.length;
for(var i = 0; i < lienLen; i++) {
lien[i].onmouseover = function() {
affichage(this);
return false;
};
}
function affichage(lien) {
var img = new Image(), effet = document.getElementById('effet');
img.onload = function() {
effet.innerHTML = '';
effet.appendChild(img);
};
img.src = lien.href;
effet.style.display = 'block';
effet.innerHTML = '<span>Chargement en cours...</span>';
}
document.getElementById('effet').onmouseout = function() {
this.style.display = 'none';
};
</script>
</body>
</html>
</body>
</html>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
