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

Yop Yop, alors personne ??

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

Ok merci beaucoup...

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

Standyfordy

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

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

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

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>

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

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

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

Edited January 9, 200521 yr by Standyfordy

Persônnnnne ??

Standyfordy

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.

Même chose please.

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

Edited January 10, 200521 yr by Standyfordy

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 ?

Edited January 10, 200521 yr by buppe

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

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

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

Merci beaucoup

Standyfordy

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