Bonjour,
idée intéressante
Fichier triangle.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Menu triangulaire</title>
<link href="triangle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="triangle">
<img alt="triangle violet" src="images/violet.png"/>
<img alt="triangle bleu" src="images/bleu.png"/>
<img alt="triangle vert" src="images/vert.png"/>
<img alt="triangle jaune" src="images/jaune.png"/>
<img alt="triangle orange" src="images/orange.png"/>
<img alt="triangle rouge" src="images/rouge.png"/>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="triangle.js"></script>
</body>
</html>
Fichier triangle.css dans le même répertoire
body {
background:black
}
div#triangle {
height: 275px;
margin:auto;
width: 382px
}
div#triangle img {
position:absolute;
}
Fichier triangle.js dans le même répertoire
$(function(){
// On peut accéder aux éléments.
/**
* Abscisse de la souris par rapport à la div#triangle
*
* @return entier
*/
function x(e) {
return e.pageX - $('#triangle').position().left;
}
/**
* Ordonnée de la souris par rapport à la div#triangle
*
* @return entier
*/
function y(e) {
return e.pageY - $('#triangle').position().top;
}
/**
* Retourne vrai si le point (x, y) est à gauche de la droite passant par les points (rx1, ry1), (rx2, ry2)
*
* @param x
* @param y
* @param rx1
* @param ry1
* @param rx2
* @param ry2
* @return booléen
*/
function aGaucheDe(x, y, rx1, ry1, rx2, ry2) {
return (rx2 - rx1) * (y - ry1) - (x - rx1) * (ry2 - ry1) > 0;
}
/**
* Retourne vrai si le point (x, y) est à droite de la droite passant par les points (rx1, ry1), (rx2, ry2) ou appartient à cette droite.
*
* @param x
* @param y
* @param rx1
* @param ry1
* @param rx2
* @param ry2
* @return booléen
*/
function aDroiteDe(x, y, rx1, ry1, rx2, ry2) {
return !aGaucheDe(x, y, rx1, ry1, rx2, ry2);
}
/**
* Test si le point de coordonnées (x, y) appartient au triangle équilatéral dont le sommet est (sommetTriangleX, sommetTriangleY), dont la longueur des côtés est cote, et dont le côté opposé au sommet est horizontal.
*
* @param x abscisse du point
* @param y ordonée du point
* @param sommetTriangleX abscisse du sommet
* @param sommetTriangleY ordonnée du sommet
* @param cote longueur du côté
* @return booléen
*/
function appartientTriangle(x, y, sommetTriangleX, sommetTriangleY, cote) {
var base1X = sommetTriangleX - cote / 2, base1Y = sommetTriangleY + cote * Math.sqrt(3) / 2 /* sin(π/3) */, base2X = sommetTriangleX + cote / 2, base2Y = base1Y;
return ((y < base1Y) /* Au-dessus de la base */
&& aGaucheDe(x, y, sommetTriangleX, sommetTriangleY, base2X, base2Y)
&& aDroiteDe(x, y, sommetTriangleX, sommetTriangleY, base1X, base1Y));
}
/**
* Retourne vrai si la souris survole le nième triangle
*
* @param e
* @param n 0=rouge, 1=orange etc…
* @return booléen
*/
function sourisSurvoleNiemeTriangle(e, n) {
var tabSommets = [[109, 89], [145, 68], [178, 49], [214, 33], [245, 16], [273, 3]];
return appartientTriangle(x(e), y(e), tabSommets[n][0], tabSommets[n][1], 215);
}
var triangleAuPremierPlan = 0, nomTriangles = ["rouge", "orange", "jaune", "vert", "bleu", "violet"], zIndex = 1;
$('#triangle').mousemove(function(e) {
if(sourisSurvoleNiemeTriangle(e, triangleAuPremierPlan) === false) {
for (i = 0; i < nomTriangles.length; i += 1) {
if (sourisSurvoleNiemeTriangle(e, i)) {
triangleAuPremierPlan = i;
$('#triangle>img:eq(' + (nomTriangles.length - i - 1) + ')').css('z-index', zIndex++);
break;
}
}
}
});
});
et 6 images dans un sous-répertoire images (clic droit sur les images enregistrer sous. Il faudra enlever les préfixes «21414-» qui ont été rajoutés quand j’ai téléchargé les images vers le serveur d’alsacréation)
Testé sous ff4 et ie7.
Modifié par adrien881 (11 Aug 2011 - 19:01)
, car l'idée c'est que quand j'en survole un, il se superpose par rapport aux autres