Definir la taille d'un lien image avec javascript

Et l'eau,

Ce n'est pas une question de JS mais plutôt de CSS à ce que j'ai cru comprendre. Pour redéfinir la largeur de ton sur une seule image :
html :

<p><a href="#ancre"><img src="chemin/mon_image.jpg" alt="description intuitive de mon image" id="image_de_la_mort_qui_tue" /></a></p>

css

#image_de_la_mort_qui_tue{
	width:1000px;
}

Si c'est une galerie avec plusieurs images
html :

<div id="galerie_de_la_mort_qui_tue">
	<h1>le titre de ma galerie</h1><!-- j'ai pris l'élément h1. Logiquement ça doit être un autre type de titre (h2, h3, etc.) -->
	<ul>
		<li><a href="#ancreA"><img src="chemin/image1.jpg" alt="description intuitive de mon image 1" /></a></li>
		<li><a href="#ancreB"><img src="chemin/image2.jpg" alt="description intuitive de mon image 2" /></a></li>
	<ul>
</div>

css :

#galerie_de_la_mort_qui_tue img{
	width:1000px;
}

Sinon en JS, c'est possible aussi via "l'objet" img ou en jouant avec l'attribut style et sa propriété.

html :

<p><a href="#ancre"><img src="chemin/mon_image.jpg" alt="description intuitive de mon image" id="image_de_la_mort_qui_tue" /></a></p>

js :

var image_de_la_mort_qui_tue = document.getElementById("image_de_la_mort_qui_tue");
image_de_la_mort_qui_tue.style.width = "50px";

Si c'est une galerie :
html :

<div id="galerie_de_la_mort_qui_tue">
	<h1>le titre de ma galerie</h1><!-- j'ai pris l'élément h1. Logiquement ça doit être un autre type de titre (h2, h3, etc.) -->
	<ul>
		<li><a href="#ancreA"><img src="chemin/image1.jpg" alt="description intuitive de mon image 1" /></a></li>
		<li><a href="#ancreB"><img src="chemin/image2.jpg" alt="description intuitive de mon image 2" /></a></li>
	<ul>
</div>

JS :

var id_galerie_image_de_la_mort_qui_tue = document.getElementById("galerie_de_la_mort_qui_tue");
var image_cible = id_galerie_image_de_la_mort_qui_tue.getElementsByTagName("img");
for(var image_actuelle in image_cible){
	image_cible[image_actuelle].style.width = "100px";
}

* code fait de tête. Je peux m'être trompé.

@+
Modifié par niuxe (07 Jul 2010 - 23:21)

non ce n'est pas un pb de css

voici le code html de ma galerie (généré en php) :
<div id="galery">

<ul id="parent1">
<li>
<div class="thumb">
<a href="#nogo" class="portrait"><img src="./images/1.jpg"/></a>
<a href="#nogo" class="portrait"><img src="./images/2.jpg"/></a>
<a href="#nogo" class="portrait"><img src="./images3.jpg"/></a>
</div>
</li>
</ul>

J'ai le code css suivant :
.thumb {border:1px #666666 solid;width:144px;height:300px;margin-top:20px;margin-left:20px;background:#333333;position:relative}
.thumb a {display:block;width:48px;height:48px;float:left;margin:6px;background:#000000}
.thumb a img {display:block;width:46px;height:46px;border:1px solid #666;border-top-color:#ccc;cursor:default;background:#000000;text-decoration:none;}

c'est le code par défaut si javascript est désactivé : tu remarquera que les icones sont carrées. Je voudrais via javascript retailler les icones pour leur redonner les bonnes proportions. J'arrive à le faire pour l'image mais par pour le lien .thumb a {width... height ...}
Du coup image et liens sont disjoints et sur certaines zones l'image va clignoter.

Ma question est donc comment acceder via js au paramètres de lien (width, height).

ça change selon le navigateur : en standard tu as element.getComputedStyle() qui est une fonction, mais pour IE c'est .currentStyle qui est un objet

Utilise (ou pompe le code) une librairie, exemple avec YUI getStyle