11550 sujets

JavaScript, DOM et API Web HTML5

Desencadré un logo si je clique sur un autre logo

Bonjour,
J'ai des logos sur ds un div dans ma page web,
j'utilise ça :

onclick="this.style.border=\'3px solid #FF6A22\';"
pour encadrer le logo cliqué,
mais mon probleme c'est: comment desencadré un logo si je clique sur un autre logo ?
ça fais une semaine que ce truc mon prend la tête
Salut.

Je serais toi, j'écrirais un .js à part.
En admettant que tu donnes à tes divs des identifiants div1, div2,... divn.
- Tu écris dans ce .js ta fonction encadre(iddivaencadrer)
- Pour chacun de tes divs, tu déclare un onclick=encadre(id_du_div_en_question)
- dans la fonction encadre, tu mémorises l'id du div que tu encadres dans une variable globale,
- Toujours dans ta fonction encadre, si cette variable globale est assignée, tu désencadre le div en question avant d'encadrer le nouveau et de réassigner la variable.
Modifié par aCOSwt (28 Nov 2006 - 10:26)
Salut,
younes475 a écrit :
onclick="this.style.border=\'3px solid #FF6A22\';"
Petite remarque en passant : il est totalement inutile (et dommageable ?) d'échapper les apostrophes dans ce cas-là. Il suffit d'écrire :
onclick="this.style.border='3px solid #FF6A22';"
Tu peux essayer ça:

<script type="text/javascript">

function ChangeLogo(lien) {

// Assigne la class logo a tout les liens ayant logoon
var link = document.getElementsByTagName('a');
for (var a = 0; a < link.length; a++) {
  if (link[a].className == clas+'on') link[a].className  = clas;
  }

// Assigne la class logoon au lien clické
lien.className = 'logoon';

}
</script>

<style>
.logoon{border:3px solid #FF6A22}
.logo{border:0px}
</style>

<body>
<a href="#" OnClick="ChangeLogo(this)" class="logo">logo1</a>
<a href="#" OnClick="ChangeLogo(this)" class="logo">logo2</a>
<a href="#" OnClick="ChangeLogo(this)" class="logo">logo3</a>
</body>

Modifié par matmat (29 Nov 2006 - 20:48)
bonjour,
pas besoin de js pour ça :
<style>
a.logo{border:0px}
a.logo:active,a.logo:focus{border:3px solid #FF6A22}
</style>

<body>
<a href="#" class="logo">logo1</a>
<a href="#" class="logo">logo2</a>
<a href="#" class="logo">logo3</a>
</body>
Ce code m'a servit pour mettre en évidence la vignette cliquée sur une gallerie js (d'ailleur c'est peut-être pour ça que younes475 a besoin de js). Il me semble que la classe "active" ne prend pas en compte en item sans changer de page. Par contre focus ça fait quoi exactement?
Modifié par matmat (29 Nov 2006 - 22:32)
chmel a écrit :
bonjour,
pas besoin de js pour ça :
<style>
a.logo{border:0px}
a.logo:active,a.logo:focus{border:3px solid #FF6A22}
</style>

<body>
<a href="#" class="logo">logo1</a>
<a href="#" class="logo">logo2</a>
<a href="#" class="logo">logo3</a>
</body>
Je ne suis pas convaincu par cette solution. Quand la personne cliquera sur les liens, le navigateur les suivra et l'utilisateur se retrouvera en haut de page (à part avec Opera). De toute façon, ça n'a aucun sens de créer des liens pour un simple changement visuel quand l'utilisateur clique dessus.

En fait, j'ai du mal à comprendre le besoin de départ...
Sujet clos
Aller à