Menu

Effets quand la souris passe sur une cellule [Fermé]

- - Dernière réponse : @lobotomix:~# rm -rf *\
Messages postés
1414
Date d'inscription
dimanche 1 juillet 2012
Dernière intervention
14 décembre 2012
- 21 sept. 2012 à 17:54
Bonjour,

J'ai créé un petit site avec frontpage, je sais, c'est pas le top mais je ne sais utiliser que ce programme là et de toute façon, c'est un site sans prétentions.
J'ai créé un tableau avec des noms et je voudrais que lorsque la souris passe sur l'un de ces noms, la cellule (le fond) change de couleur et lorsqu'on clique dessus, ça ramène vers une autre page.
Je suppose que c'est une ligne de code à insérer mais bon, je suis vraiment novice, si une bonne âme pouvait m'aider, ce serait super sympa,
Merci.

Afficher la suite 

2 réponses

Messages postés
23142
Date d'inscription
samedi 22 octobre 2005
Statut
Contributeur
Dernière intervention
16 février 2019
3127
0
Merci
site avec frontpage, je sais, c'est pas le top

justement ... faudrait quand même essayer de changer car pour de l'aide ce sera de plus en plus dur ... et ensuite de plus en plus cher pour les hébergeurs
... et ensuite ... de plus en plus nul pour les moteurs de recherche ;)
Messages postés
1414
Date d'inscription
dimanche 1 juillet 2012
Dernière intervention
14 décembre 2012
260
0
Merci
Bonjour, je me suis amuser a faire une redirection sur cette page du forum lorsque l'on clique sur une cellule et attribuer une couleur par cellules pour essayer copier ceci dans votre bloc note et visualiser le et si cela vous intéresse on essaiera de l'adapter a votre site

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>test</title>
		<style>
			table {
				border-collapse: collapse;
			}
			td {
				border: 1px solid black;
			}
			a {
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td id="cell1" style="background-color: white;"><a href="http://www.commentcamarche.net/forum/affich-26112564-effets-quand-la-souris-passe-sur-une-cellule">Carmen</a></td>
				<td id="cell2" style="background-color: white;"><a href="http://www.commentcamarche.net/forum/affich-26112564-effets-quand-la-souris-passe-sur-une-cellule">33 ans</a></td>
				<td id="cell3" style="background-color: white;"><a href="http://www.commentcamarche.net/forum/affich-26112564-effets-quand-la-souris-passe-sur-une-cellule">Espagne</a></td>
			</tr>
			<tr>
				<td id="cell4" style="background-color: white;"><a href="http://www.commentcamarche.net/forum/affich-26112564-effets-quand-la-souris-passe-sur-une-cellule">Michelle</a></td>
				<td id="cell5" style="background-color: white;"><a href="http://www.commentcamarche.net/forum/affich-26112564-effets-quand-la-souris-passe-sur-une-cellule">26 ans</a></td>
				<td id="cell6" style="background-color: white;"><a href="http://www.commentcamarche.net/forum/affich-26112564-effets-quand-la-souris-passe-sur-une-cellule">États-Unis</a></td>
			</tr>
		</table>
		<script type="text/javascript">
			var cell1 = document.getElementById("cell1");
			var cell2 = document.getElementById("cell2");
			var cell3 = document.getElementById("cell3");
			var cell4 = document.getElementById("cell4");
			var cell5 = document.getElementById("cell5");
			var cell6 = document.getElementById("cell6");

			cell1.addEventListener("mouseover", function() {
				cell1.style.backgroundColor = "red";
			},false);
			cell1.addEventListener("mouseout", function() {
				cell1.style.backgroundColor = "white";
			},false);
			
			cell2.addEventListener("mouseover", function() {
				cell2.style.backgroundColor = "yellow";
			},false);
			cell2.addEventListener("mouseout", function() {
				cell2.style.backgroundColor = "white";
			},false);
			
			cell3.addEventListener("mouseover", function() {
				cell3.style.backgroundColor = "green";
			},false);
			cell3.addEventListener("mouseout", function() {
				cell3.style.backgroundColor = "white";
			},false);
			
			cell4.addEventListener("mouseover", function() {
				cell4.style.backgroundColor = "pink";
			},false);
			cell4.addEventListener("mouseout", function() {
				cell4.style.backgroundColor = "white";
			},false);
			
			cell5.addEventListener("mouseover", function() {
				cell5.style.backgroundColor = "blue";
			},false);
			cell5.addEventListener("mouseout", function() {
				cell5.style.backgroundColor = "white";
			},false);
			
			cell6.addEventListener("mouseover", function() {
				cell6.style.backgroundColor = "orange";
			},false);
			cell6.addEventListener("mouseout", function() {
				cell6.style.backgroundColor = "white";
			},false);
		</script>
	</body>
</html>
</body>
</html>