11548 sujets

JavaScript, DOM et API Web HTML5

Changer le style d'une bordure image après un événement

salut,

je possède une image dans ma page web qui utilise une feuille de style :
- elle possède une bordure de 1 px noire quand elle n'est pas survolée ni cliquée
- elle devient discontinue lors du survol.

=> Une fois que l'image est cliquée, j'appelle une fonction javascript pour faire un traitement.
J'aimerai donc que cette image qui a été sélectionnée, change de bordure et devienne rouge.

Comment procéder pour changer la bordure d'une image qui possède un style au départ avec un script javascript?

Merci beaucoup d'avance pour votre aide Smiley cligne
Salut,

Le plus simple et le plus maintenable a priori consiste à modifier l'attribut "class" de ton image et à définir le rendu pour cette classe dans ton code CSS.
img.className = "active"; // simpliste, on écrase carrément l'attribut

Tu peux aussi modifier directement l'attribut "style".
img.style.borderColor = "red"; // border-color devient borderColor
merci pour ces indications julien.

J'aimerai gérer ça avec le CSS, mais je n'ai pas bien compris comment tu pratique le :

img.className = "active"; // simpliste, on écrase carrément l'attribut


je procède comment pour utiliser un truc de ce genre ?
Un petit exemple, qui je l'espère sera plus clair. Smiley smile 
[b]CSS[/b]

img.active {
  border-color: red;
}

[b]JavaScript[/b]

function setImgActive(img, active) {
  img.className = active ? "active" : "";
}

// Exemple d'utilisation
setImgActive(document.getElementById("img1"), true);

Je disais dans mon message précédent que l'écrasement du className est simpliste car on ne gère pas la cas où l'image peut être marquée par plusieurs classes. Si c'est la cas, il faut un peu plus de boulot.
Modifié par Julien Royer (07 Jul 2008 - 15:20)
ok merci beaucoup, ça marche super !

Juste que le Red veut pas se mettre et qu'il me laisse la couleur par défaut Smiley decu
xlight a écrit :
Juste que le Red veut pas se mettre et qu'il me laisse la couleur par défaut Smiley decu

Est-ce que tu as un exemple en ligne ?
Sujet clos
Aller à