[HTML] rollover

**sole** · 17/09/2005, 20h38

Bonjour!!!

J'affiche une image; Je voudrai ensuite que lorsque je passe sur cette image ma souris , une autre image s'affiche ou alors que cette mm image devienne grisée.
Mais avec le code suivant, lorsque je passe ma souris sur l'image, l'image disparait et rien n'apparait à sa place.
Ou se trouve mon erreur?

Merci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
  <a  href="mon_cv.php"
onMouseOver="document.ex1.src='C:\Documents and Settings\yven solenn\Mes documents\Mes images\Nouveau dossier\Nouveau dossier\IMG_1636.jpg'"
onMouseOut="document.ex1.src='C:\Documents and Settings\yven solenn\Mes documents\Mes images\Nouveau dossier\Nouveau dossier\IMG_1637.jpg'">
    <img src="C:\Documents and Settings\yven solenn\Mes documents\Mes images\Nouveau dossier\Nouveau dossier\IMG_1637.jpg"
     WIDTH=76 HEIGHT=102 border="0" name="ex1" />
</a>

**xmarabout** · 17/09/2005, 21h11

Essaye un peu en ajoutant un petit "javascript:" devant tes commandes document.ex1.src...

**sole** · 17/09/2005, 21h17

ça ne fonctionne toujours pas

**Sub0** · 17/09/2005, 21h59

Sinon, une autre méthode sans Javascript, en CSS : Il faut utiliser le background-image dans un conteneur (div, span, etc...).
Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html> 
 
<head>
  <style type="text/css">
  <!--
 
  a .roll {
    background:url('out1.jpg');
  }
 
  a:hover .roll {
    background:url('over1.jpg');
  }
 
  -->
  </style>
</head>
 
<body>
 
<a href="#"><div class="roll"><img src="out1.jpg" alt="" style="visibility:hidden;"/><div/></a>
 
</body>
</html>

Lien tout en bas à gauche de cette fenêtre

**sole** · 17/09/2005, 23h46

j'ai réutilisé ton exemple mais pour la partie body je n'arrive pas a redimensionner mon image , je la voudrai en plus petit et en entier mais je n'arrive a avoir qu'une seule partie de l'image!!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="mon_cv.php"><div class="roll"><img src="C:\Documents and Settings\yven solenn\Mes documents\Mes images\Nouveau dossier\Nouveau dossier\IMG_1636.jpg" WIDTH=76 HEIGHT=102 alt="" style="visibility:hidden" /><div/></a>

**Sub0** · 18/09/2005, 06h22

On ne peut pas redimensionner une image en background.
Il faut utiliser les propriétés width et height de l'image :

http://cerig.efpg.inpg.fr/dossier/fe...yle/page12.htm

**sole** · 18/09/2005, 17h59

Je n'arrive toujours pas a dimensionner mes images!! je n'arrive a avoir qu'une parti de l'image

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
  <style type="text/css">
  <!--
 
  a .roll {
    background:url('C:\Documents and Settings\yven solenn\Mes documents\Mes images\Nouveau dossier\Nouveau dossier\IMG_1637.jpg');
   background-repeat: no-repeat;
 
  }
 
  a:hover .roll {
    background:url('C:\Documents and Settings\yven solenn\Mes documents\Mes images\Nouveau dossier\Nouveau dossier\IMG_1637bis.jpg');
    background-repeat: no-repeat;
 
  }
  
    a .roll1 {
    background:url('C:\Documents and Settings\yven solenn\Mes documents\Mes images\Photo\vacances_2004\Vacances pays basque\Pays basque_2.JPG');
   background-repeat: no-repeat;
 
  }
 
  a:hover .roll1 {
    background:url('C:\Documents and Settings\yven solenn\Mes documents\Mes images\Photo\vacances_2004\Vacances pays basque\Pays basque_2bis.JPG');
    background-repeat: no-repeat;
 
  }
  -->
  </style>

et dans le body:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="mon_cv.php"><div class="roll"><img src="C:\Documents and Settings\yven solenn\Mes documents\Mes images\Nouveau dossier\Nouveau dossier\IMG_1637.jpg" WIDTH="76" HEIGHT="102" style="visibility:hidden;"/><div/></a>

[/code]

**Sub0** · 18/09/2005, 18h07

Envoyé par Sub0

On ne peut pas redimensionner une image en background.
Il faut utiliser les propriétés width et height de l'image :

http://cerig.efpg.inpg.fr/dossier/fe...yle/page12.htm

Je pensais être pourtant assez clair; Impossible de redimensionner une image en background.
Tu devras utiliser une autre méthode (voir le lien que j'ai donné), à+

[HTML] rollover

HTML

Vue hybride

Discussions similaires

Partager

Partager