Gandi.net Groups

Bonjour, 

j'aimerai savoir s'il est possible de faire un... script (?) pour qu'une
image change quand celle-ci est survolé par la souris. Merci !

http://www.dandyman.fr

Bonjour,

Peut-être que cela peut être réalisé en modifiant les styles CSS.
Pouvez-vous nous donner plus d'informations sur ce que vous désirez
réaliser ? (Où se trouve l'image que vous voulez faire changer au
survol ? Pouvons-nous avoir un exemple ?)

Alexandre - http://www.livresanspage.net

ça serait pour mettre dans un billet et pas dans l'interface du blog...

le billet en question est celui-ci :

http://blog.dandyman.fr/post/2008/03/10/QU...

J'aimerai que quand on passe avec la souris sur les images (ici des
pubs), celles-ci changent et par le fait laisse apparaître le nom de la
marque. Mes images se trouvent dans gestionnaire-de-media/photo...

Vous croyez que c'est possible ? J'ai cherché sur le net et je crois
comprendre qu'il faut le faire en javascript et je crois que ça, on ne
peut pas sur les gandiblog ?

http://www.dandyman.fr

mmm... là, ça dépasse mes compétences.

Alexandre - http://www.livresanspage.net

Vous croyez que c'est possible ? J'ai cherché sur le net et je crois
comprendre qu'il faut le faire en javascript et je crois que ça, on
ne peut pas sur les gandiblog ?

Effectivement, pas de javascript dans les billets mais c'est permis dans
les widgets texte de présentation.

Il y a probablement une possibilité en CSS avec la propriété "hover"
qui s'applique aux liens mais peut-être aux images aussi.

Le 15 mar 2008 à 13:02 CET, Frédéric SCHWEBEL a écrit :

Il y a probablement une possibilité en CSS avec la propriété
"hover"
qui s'applique aux liens mais peut-être aux images aussi.

Pour cela, il faudra obligatoirement utiliser le thème "Custom theme",
pour avoir accès en modification au fichier de styles CSS du thème.

Dans le code du billet (ça devra être fait en XHTML) :

<div class="pub" id="pub1">&nbsp;</div>
<div class="pub" id="pub2">&nbsp;</div>
<div class="pub" id="pub3">&nbsp;</div>

Dans la feuille de styles :

.pub {width: 400px; height: 300px;}

#pub1 {background-image: url('http://www.monsite.com/public/pub1.png')
no-repeat top left;}
    #pub1:hover {background-image:
    url('http://www.monsite.com/public/pub1-survol....) no-repeat top
    left;}

#pub2 {background-image: url('http://www.monsite.com/public/pub2.png')
no-repeat top left;}
    #pub2:hover {background-image:
    url('http://www.monsite.com/public/pub2-survol....) no-repeat top
    left;}

#pub3 {background-image: url('http://www.monsite.com/public/pub3.png')
no-repeat top left;}
    #pub3:hover {background-image:
    url('http://www.monsite.com/public/pub3-survol....) no-repeat top
    left;}

Ça ne pourra pas rendre un effet de transition : ça passera net de
l'image 1 à l'image 2.

Alexandre - http://www.livresanspage.net

Merci Alexandre ! Pour quelqu'un qui pense que cela dépasse ses
compétences, tu as l'air de te débrouiller quand meme !

Je ne sais pas si je le ferai... je suis content du thème actuel et
passer Custom Theme me parait un peu "risqué"... 

En solution, j'ai juste fait un lien vers l'autre image quand on clique
sur la pub... moins proche mais, l'idée est là !

http://www.dandyman.fr

Hihi ! C'est en JavaScript que je ne sais pas me débrouiller. Avec les
feuilles de styles, ça va. ;-)

Alexandre - http://www.livresanspage.net