|
|
| Voir le sujet précédent
:: Voir le sujet suivant
|
rock45200
Nouveau
Inscrit le: 01 Jan 1970
Messages: 11
|
 Posté le:
Dim Nov 13, 2005 4:14 pm Sujet du message:
effet rollover |
|
|
|
slt a tous je voudrais savoir comment faire un effet rollover sur une presentation de 3 photos alligné donc je voudrais un effet rollover sur ces trois photos j'arrive a en faire une mes des que je mes une autre sa fonctionne plus j'utilise frontpage voici le code que j'utilise
<script language="javascript" type="text/javascript">
Image1 = new Image();
Image1.src = "http://forum.rock45200.com/main.php?g2_view=core.DownloadItem&g2_itemId=204&g2_serialNumber=2";
Image2 = new Image();
Image2.src = "http://forum.rock45200.com/main.php?g2_view=core.DownloadItem&g2_itemId=221&g2_serialNumber=2";
</script>
<img name="RollImage" style="border : 1px solid #" src="http://forum.rock45200.com/main.php?g2_view=core.DownloadItem&g2_itemId=204&g2_serialNumber=2" alt="" onMouseOver="document.RollImage.src='http://forum.rock45200.com/main.php?g2_view=core.DownloadItem&g2_itemId=221&g2_serialNumber=2'" onMouseOut="document.RollImage.src='http://forum.rock45200.com/main.php?g2_view=core.DownloadItem&g2_itemId=204&g2_serialNumber=2'">
ce code est pour 1 photo
et si je mes 3fois ce code aved les autre photos le rollover ne fonctionne plus
merci d'avance pour vos reponse
merci d'avance pour vos reponse |
|
| Revenir en haut de page |
|
|
mumulafrite
Administrateur
Inscrit le: 01 Jan 1970
Messages: 1260
Localisation: Marseille
|
| Posté le:
Dim Nov 13, 2005 6:44 pm Sujet du message:
|
|
|
|
Bon alors voila, jai fais ma petite rechercher et le mieu c'est de faire ca en css:
<head>
<style>
a.E { display: block; width: 100px; height: 30px; background-image: url('http://forum.rock45200.com/main.php?g2_view=core.DownloadItem&g2_itemId=204&g2_serialNumber=2') }
a.E:hover { visibility: visible }
a.E:hover img { visibility: hidden }
a.B { display: block; width: 100px; height: 30px; background-image: url('http://forum.rock45200.com/main.php?g2_view=core.DownloadItem&g2_itemId=204&g2_serialNumber=2') }
a.B:hover { visibility: visible }
a.B:hover img { visibility: hidden }
</style>
</head>
<body>
<center>
<a class="E" href="#back-inline-5"><img border="0" src="http://forum.rock45200.com/main.php?g2_view=core.DownloadItem&g2_itemId=221&g2_serialNumber=2"></a>
</br><a class="B" href="#back-inline-5"><img border="0" src="http://forum.rock45200.com/main.php?g2_view=core.DownloadItem&g2_itemId=221&g2_serialNumber=2"></a>
</center>
</body>
Sur cet exemple jen ai mis deux, mais tu peux en mettre autant que tu veux, suffit de recopier ces lignes et de changer une lettre
ex:
a.E { display: block; width: 100px; height: 30px; background-image: url('http://forum.rock45200.com/main.php?g2_view=core.DownloadItem&g2_itemId=204&g2_serialNumber=2') }
a.E:hover { visibility: visible }
a.E:hover img { visibility: hidden }
devient:
a.rock { display: block; width: 100px; height: 30px; background-image: url('http://forum.rock45200.com/main.php?g2_view=core.DownloadItem&g2_itemId=204&g2_serialNumber=2') }
a.rock:hover { visibility: visible }
a.rock:hover img { visibility: hidden }
pour le mettre ou tu veux:
<a class="rock" href="#back-inline-5"><img border="0" src="http://forum.rock45200.com/main.php?g2_view=core.DownloadItem&g2_itemId=221&g2_serialNumber=2"></a>
Voilà, tout devrait marcher.
_________________
 |
|
| Revenir en haut de page |
|
|
rock45200
Nouveau
Inscrit le: 01 Jan 1970
Messages: 11
|
| Posté le:
Lun Nov 14, 2005 4:51 pm Sujet du message:
|
|
|
|
merci mumulafrite je testerais ce week-end mes sa a pas l'air evident  je te tiens au courant  |
|
| Revenir en haut de page |
|
|
|
|
|
Vous ne pouvez pas poster de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum
Vous ne pouvez pas voter dans les sondages de ce forum
|
|
|
|
|
