Besoin d'aide pour un forum

Résolu

Lys Swan Messages postés 15 Statut Membre -
Lys Swan Messages postés 15 Statut Membre - 9 août 2012 à 15:10

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

Afficher la suite

5 réponses

Réponse 1 / 5
Célien Messages postés 5702 Date d'inscription Statut Membre Dernière intervention 1 995

Salut,

C'est possible en Ajax ou tout simplement en Javascript.
0
Réponse 2 / 5
Lys Swan Messages postés 15 Statut Membre

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 ?
0
1. Pierrecastor Messages postés 10830 Date d'inscription Statut Modérateur Dernière intervention 4 215
  
  Salut
  
  Regarde du coté de la fonction css hover.
  
  0
2. Lys Swan Messages postés 15 Statut Membre
  
  Eh bien... vraiment désolée, mais je comprends encore moins (je suis en train de faire une recherche sur tout ce dont vous me parlez)
  
  0
3. Célien Messages postés 5702 Date d'inscription Statut Membre Dernière intervention 1 995
  
  Salut,
  
  Pour avancer forme toi à CSS, Javascript et Ajax, tu as des dossier sur CCM ou aussi ces cours gratuits webmaster.
  
  0
4. Lys Swan Messages postés 15 Statut Membre
  
  Merci, je vais essayer de progresser dans tout ça.
  
  0
5. Pierrecastor Messages postés 10830 Date d'inscription Statut Modérateur Dernière intervention 4 215
  
  hover permet de déterminer une apparence particulière dans ton CSS quand ton curseur sélectionne l'élément désigner.
  
  Par exemple, si ta classe css pour un avatar est : .avatar {propriété normal} tu ajoute en dessous .avatar:hover{propriété que tu veut au survole de la souris}
  
  0

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

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

<!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

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

le mieux est d'ouvrir une img au passage de la souris je vous fait un code est vous pourrez chosir
0

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

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
Réponse 5 / 5
Lys Swan Messages postés 15 Statut Membre

Voilà, j'ai enfin réussi à faire ce que je voulais ! Merci beaucoup !
0
1. Pierrecastor Messages postés 10830 Date d'inscription Statut Modérateur Dernière intervention 4 215
  
  Tu as fait comment ? Si quelqu'un d'autre se pose la même question. :-)
  
  0
2. Lys Swan Messages postés 15 Statut Membre
  
  J'ai pris le dernier code que m'a proposé @lobotomix:~# rm -rf *\, je l'ai légèrement modifié pour avoir ce que je voulais et je l'ai collé dans mon PA... :)
  
  0

Besoin d'aide pour un forum

5 réponses

Discussions similaires

Newsletters