Modification de la taille d'une image

Version imprimable

12/01/2015, 19h57
bernard26000

Modification de la taille d'une image
Bonjour

Me revoilà...:salut:

J'ai un select qui devrait me permettre de changer la taille d'une image en PX
Ma première question l'ID je dois la mettre dans la div qui contient l'image ou sur l'image même ?
Il me paraitrait normal de l'ID sur l'image
ensuite j'ai fait quelque chose du genre :
Code:

1 2 3 4 function changeWidth(){ var newWidth = document.getElementById('IDduselect').value; document.getElementById('monImage').style.width = newWidth; }
Que j'appelle avec un onChange
J'ai déjà du bol l'image ne disparait pas.... :mouarf:

Merci d'avance pour vos précieux conseils
12/01/2015, 20h00
NoSmoking

Bonjour,

Code:

document.getElementById('monImage').style.width = newWidth +'px'; // mettre l'unité c'est quand même mieux !!
12/01/2015, 20h06
bernard26000

Merci,

Je dois mettre l'unité même si dans mon select les valeurs sont déjà du genre 20px.... ?
Ca ne devrait pas mettre l'unité au même temps que la valeur ?
12/01/2015, 20h15
NoSmoking

Citation:

...même si dans mon select les valeurs sont déjà du genre 20px

non bien sûr, si ce n'est pas le cas le morceau de code que tu nous donnes n'est pas suffisant.

Bonjour,

Oui c'est vrai que je suis un peu radin sur mon code :)

Coté HTML <div> j'ai :

Code:

1
2
<div id="zone" contenteditable><font style="font-family: 'Courier New', Courier, monospace; font-weight:bold">CE QUE VOUS VOULEZ</font></div>
<div id="zone2"><img src="img/coeur.png" id="coeurlove"></div>

Mon select :

Code:

1
2
3
4
5
6
7
8
9
10
11
<select id="modifSize" onchange="JavaScript:appelDeuxFonctions()" >
            <option value="15px">15px</option>
            <option value="20px">20px</option>
            <option label="25px">25px</option>
            <option value="30px">30px</option>
            <option value="40px">35px</option>
            <option label="45px">45px</option>
            <option value="50px">50px</option>
            <option value="55px">55px</option>
            <option label="60px">60px</option>
        </select>

Mes 2 fonctions qui doivent modifier à la fois le texte et l'image

Code:

1
2
3
4
5
6
7
8
9
10
function changeSize()
    {
        var newSize = document.getElementById('modifSize').value;
        document.getElementById('zone').style.fontSize = newSize;
	}
 
function changeWidth(){
		var newWidth = document.getElementById('modifSize').value;
		document.getElementById('coeurlove').style.width = newWidth;
}

et pour finir l'appel de mes deux fonctions dans le select

Code:

1
2
3
4
function appelDeuxFonctions() {	
changeSize();
changeWidth() 
}

Bonne journée

13/01/2015, 19h00
bernard26000

J'ai résolu en intégrant le DIV contenant l'image dans le DIV contenant le texte et... ca marche

Bonne soirée l