CSS : Redimensionnement d'image

[Standyfordy]

Helloo all,

Je suis en train de faire de l'interface d'un futur site. J'utilise le css. En haut du site, je fais une entête avec la partie "forum", "download" et les trucs habituels quoi !

Le problème c'est que je veut faire des rollovers sur chaque image (forum, download...) en CSS mais avec ce code, je n'arrive pas a redimensionner l'image.

Le code

#entete-home {position:absolute;left: 91px;top: 0px;width: 212px;height: 45px;background: url(../images/entete_home_hover.jpg) top left no-repeat;}
#entete-home a {display: block;height: 45px;background: white url(../images/entete_home.jpg) top left no-repeat;color: #000;}
#entete-home a:hover {background: transparent none;}

#entete-forum {position:absolute;left: 300px;top: 0px;width: 212px;height: 45px;background: url(../images/entete_forum_hover.jpg) top left no-repeat;}
#entete-forum a {display: block;height: 45px;background: white url(../images/entete_forum.jpg) top left no-repeat;}
#entete-forum a:hover {background: transparent none;}

Et l'html :

<div id="entete-home"><a href="#"></a></div>
<div id="entete-forum"><a href="#"></a></div>

Le truc c'est que que quand je change "width: 212px;height: 45px", l'image n'est pas redimensionnée mais par contre elle est "mangée". Donc si je rentre des valeurs plus petites que la réel taille de l'image, celle ci n'est plus visible entierement... C'est balot hein ??

Merci d'avance de vos futurs réponses qui vont m'être d'un grand aide

[Standyfordy]

Yop Yop, alors personne ??

[Ago]

le css ne peut pas redimensionner une image (il me semble), il ne peut que les rogner, comme tu l'as dis ....

[Standyfordy]

Ok merci beaucoup...

Mais dans ce cas comment je fais pour redimensionner mon image ??

Standyfordy

[Ago]

tu crées une autre image aux dimensions qui t'interesse ... je ne vois que ca

[Standyfordy]

Heu... ... comment ça ??

Si je crée une autre image les propriétés qui css qui lui sont attribués ne seront plus valides !!

Je comprends pas trop ce que tu veux dire ...

Standyfordy

[Ago]

la en fait je n'ai pas vraiment le temps de voir ... mais en javascript c'est possible ... en css peut etre que oui mais faut que j'analyse ton cas

[buppe]

tu peut le faire comme ca je crois:

<div onmouseover="xxxx.height='xx';xxxx.width='xx'" onmouseout="xxxx.height='xx';xxxx.width='xx'">

<img src="x.jpg" name="xxxx" />

</div>

[Standyfordy]

Je veux pas paraître ignorant mais je mets quoi à la place des termes en rouges :

<div onmouseover="xxxx.height='xx';xxxx.width='xx'" onmouseout="xxxx.height='xx';xxxx.width='xx'">

<img src="x.jpg" name="xxxx" />

</div>

Standyfordy

[Ago]

hop voila

<div onmouseover="image1.height='120';image1.width='80'" onmouseout="image1.height='40';image1.width='20'">

<img src="leliendemonimage.jpg" name="image1" />

</div>

ps : j'ai pus revenir et j'ai regardé ton prob, et je crois que cette solution est la + simple

[Standyfordy]

Je viens d'essayer et ça marche pô

CSS :

#entete-home {
position : absolute; 
left : 91px; 
top : 0; 
width : 212px; 
height : 45px; 
background : url(../images/entete_home_hover.jpg) no-repeat 0% 0%; 
} 
#entete-home a {
display : block; 
height : 45px; 
background : white url(../images/entete_home.jpg) no-repeat 0% 0%; 
color : #000; 
} 
#entete-home a:hover {
background : transparent none repeat;} 

HTML :

<div onmouseover="entete-home.height='120';entete-home.width='80'" onmouseout="entete-home.height='40';entete-home.width='20'">
<img src="images/entete_home.jpg" name="entete-home" />
</div>

Standyfordy

[Standyfordy]

Persônnnnne ??

Standyfordy

[buppe]

postes l'url de ta page web, je veux bien t'aider, mais il me manque l'apercu global de ce que tu voudrais faire.

[The Lootrophile]

Même chose please.

[Standyfordy]

Ouai ok... J'ai supprimé tout ce qui n'était pas necessaire... pour laisser du suspens

Comme vous pouvez le voir j'aimerais que les "images-liens" soient a la meme hauteur que le petit carré a gauche...

SITE

Standyfordy

[buppe]

pourquoi tu ne redimentionne pas simplement les images des liens ?

je ne vois pas ce que vient faire du css ou javascript la-dedans, ou j'ai peut-etre mal compris ?

[Standyfordy]

je ne vois pas ce que vient faire du css ou javascript la-dedans

Javascript il n'y en a pas , et CSS c'est pour que le lien change d'image au passage de la souris...

pourquoi tu ne redimentionne pas simplement les images des liens ?

Parce que la source est : <div id="entete-home"><a href="#"></a></div>

Donc le with et le height je le mets où ?

Standyfordy

[buppe]

il faut redimentionner les images elle-memes, sous totoshop par exemple. nan ?

[Standyfordy]

Comment ne pas y avoir pensé avant. Je n'ai pas essayé mais ça ne peut que marcher... à coup sûr !!

Merci beaucoup

Standyfordy

[Ago]

tu crées une autre image aux dimensions qui t'interesse ... je ne vois que ca