Rechercher : dans
Par :

[JAVASCRIPT] Changer de feuille de style CSS

Dernière réponse le 3 mar 2008 à 23:51:17 GhostGrapher, le 23 fév 2008 à 17:29:37 
 Signaler ce message aux modérateurs

Bonjour chers amis,

voici ma question qui me bloque depuis quelques temps :

je voudrai remplacer une image située au milieu de mon code HTML a l'aide de Javascript. Je voudrai que l'image qui porte l'ID "imgporte1" ne pointe plus vers le fichier "machin.png" mais vers "truc.png". Comment faire ? Je suppose qu'on doit passer par un

document.getElementById('imgporte1')
mais après je sais pas du tout comment faire...

Quelqu'un pourrait-il m'aider ?

Merci d'avance !
Configuration: Windows Vista
Firefox 2.0.0.11

Meilleures réponses pour « [JAVASCRIPT] Changer de feuille de style CSS » dans :
Feuilles de style - CSS Voir Présentation des feuilles de style Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS. Le principe des...
Changer l'aspect du curseur en CSS VoirLa propriété cursor permet de changer l'aspect du curseur sur un élément d'une page web. Le client affichera automatiquement le curseur de son ordinateur qui correspond au type de curseur que vous aurez choisi. Exemples Liste des attributs...
Javascript - Modifier la hauteur (height) d'un élément HTML VoirPour modifier la hauteur d'un élément HTML en javascript, il suffit d'utiliser sa propriété de style "height". Pour cela vous pouvez y faire référence de la manière suivante : Si vous souhaitez connaître la hauteur (height) d'un bloc HTML, il...
Javascript - Librairies d'effets pour vos images VoirAu gré de vos explorations du web, vous avez vu de superbes effets de présentation des images. Et ça vous plairaît bien de pouvoir proposer les mêmes à vos visiteurs. Voici quelques solutions en Javascript couplées à des CSS. Elles sont plus...
Déclaration d'une feuille de style (CSS) VoirDéclaration d'une feuille de style Les feuilles de style sont un sur-ensemble du langage HTML, cela signifie qu'elle ne sont pas intégrées directement dans les recommandations HTML du W3C. Ainsi, il est nécessaire de renseigner le code HTML avec...
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...
La syntaxe des style (CSS) VoirDéfinition d'un style La définition d'un style se fait à l'aide de règles en texte simple permettant de décrire l'aspect des éléments de la page. Une règle CSS est caractérisée par deux principaux éléments : Un sélecteur de balises, permettant de...

1

GhostGrapher, le 23 fév 2008 à 17:30:30

Mince, j'me suis planté dans le titre... désolé

Répondre à GhostGrapher

2

Enax, le 23 fév 2008 à 20:58:12

Ca dépend un peu de ce que tu veux faire. Par exemple, le code suivant changera l'image au passage de la souris et remettra la première image lorsqu'il la quittera.


<image src="image1.png" onMouseOver="this.src='image2.png';" onMouseOut="this.src='image1.png';" />

Répondre à Enax

3

GhostGrapher, le 23 fév 2008 à 22:35:28

En fait, je voudrai que ce soit définitif jusqu'a ce que j'ai une seconde fonction qui vienne le remettre comme a l'origine. Ce que voudrai c'est que lorsque tu clique sur l'image, l'image devienne donc image2, et que quand tu clique sur un bouton du style reset qui lance une fonction untel() qui va remettre l'image comme a l'origine.

J'espère que je suis limpide... ^^

question : le code que tu viens de mettre, je dois le mettre entre balises <script></script> ? Parce que là actuellement mon code est entre balises <script></script> mais dans le head , et l'image que je souhaites changer est dans le body. En gros : ca marche le Javascript en dehors des balises <script></script> en le mettant directement dans le HTML ?

Répondre à GhostGrapher

4

Enax, le 23 fév 2008 à 23:50:46

Le JS, c'est un peu comme le CSS :
- Tu peux en mettre dans un fichier à part (avec l'extension .js). Tu appelles une seule fois ton fichier dans ta page, et toutes les fonctions du fichier seront accessibles sur l'ensemble de ta page,
- Tu peux en mettre entre <script type="text/javascript"><!-- --></script>,
- Et enfin, en mettre directement dans tes balises en tant que valeur de certains attributs (onClick, onMouseOver, onKeyUp...)

Le code que je t'ai donné, c'est du HTML (me suis planté, fallait voir une balise <img /> et non <image />), donc la 3e méthode.

Répondre à Enax

5

 GhostGrapher, le 3 mar 2008 à 23:51:17

J'ai enfin trouvé comment faire. L'astuce consistait a mettre :

Document.GetElementById('imgporte1').src = 'frigo.png' ;


Merci tout de même pour votre aide!

Répondre à GhostGrapher