Bonjour a tous,
Apres 2 semaines de recherches infructueuses, je me decide a demander
de l'aide.
Deja a la base, en plus d'etre con, je debute donc voila mon probleme:
Dans une page internet, je veux que mon image ait plusieurs liens et que quand la souris passe dessus, le lien en question change d'opacite (devient plus transparent).
Ce qui compte, c'est l'efficacite donc peu importe la methode.
Apres avoir cree des zones de mon image (a l'aide d'openoffice), je me sers des balises area map
Je reussis a changer l'opacite d'une image entiere (avec onmouseover) mais pas pour les area (le hover du css ne fonctionne pas non plus malgre la creation de class ou de id dans l'area en question. D'ailleurs, j'ai l'impression qu'on ne peut attribuer des class ou des id aux areas)
Par contre, j'arrive a creer 2 liens distincts pour chaque zone.
Sur le net, j'ai vu des exemples qui préconise l'utilisation de plusieurs images mais sachant que c'est un concept que je veux reutiliser souvent, je cherche une solution intelligente.
Je limite mon exemple a 2 zones, pour faire simple, un drapeau avec 2 zones rectangulaire.
Voici le code, j'ai rajouter des fonctions javascript vu sur un des forums, ca marche pas du tout pour moi.
Merci a tous ceux qui voudraient bien m'eclairer.
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Drapeau</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design1.css" />
</head>
<body>
<h2>Choisis l'une des 2 couleurs du drapeau </h2>
<SCRIPT LANGUAGE=Javascript SRC="ukraine.js"> </SCRIPT>
<IMG class="image"SRC="ukrainianflag.GIF" NAME="images1"
WIDTH=129 HEIGHT=81 BORDER=0 USEMAP="#MAP1">
<MAP NAME="MAP1"> <AREA class="zone1" SHAPE=RECT onMouseOver="afficheId('bloc');" onMouseOut="cacheId('bloc');"COORDS="0,41,129,81"/>
<AREA class="zone2" SHAPE=RECT onMouseOver="afficheId('bloc');" onMouseOut="cacheId('bloc');" COORDS="0,0,129,41"/></MAP>
</body>
</html>
le code css:
#bloc
{
display:none;
}
.zone1
{
opacity: 1;
}
.zone2
{
opacity:1;
}
.zone1:hover
{
opacity: 0.3;
}
.zone2: hover
{
opacity:0.3;
}
le code du fichier javascript (recuperer du forum)
function afficheId(baliseId)
{ document.getElementById(baliseId).style.display='block'; }
function cacheId(baliseId)
{ document.getElementById(baliseId).style.display='none'; }
Help me!