iWeb Beginner Forum Iweb Beginner : Forum d'assistance sur Apple iWeb

[jeffscubadoo]

Merci Caribou, c'est fait

[Marc]

Si ça t'amuse, j'ai un peu simplifié le code de ce rollover déporté
et j'ai positionné toutes les images en position "absolute" ce qui permet de les mettre où on veut sur la page en fonction de la gauche (left="20px") et du haut (top="50px") du widget (les valeurs entre parenthèses sont celles de la première vignette

j'ai rajouté une div invisible(style="display:none;") contenant les url des images utilisées par le rollover), ceci permet au navigateur de charger les images avant de commencer le rollover.

Code: Tout sélectionner

<script type="text/javascript">
   function SwapImg(imgMainId, newSrc)   {
      var img = document.getElementById(imgMainId);
      img.src = newSrc;               
    }
</script>
<div>         
   <img src="http://web.me.com/jeffscubadoo/bikinis/oludum/hello.jpg" id="rollover1" class="imgMain" alt="0" Title="0" width="260" height="342" style="position: absolute; top: 20px;left:100px;"/>     
   <div class="ThumbContainer" >
      <div style="position: absolute; top: 50px;left: 10px; width:80px;">
         <img src="http://web.me.com/jeffscubadoo/bikinis/oludum/t_bikini-bresilien-authentique.jpg" class="thumb" alt="1" Title="1" onmouseover="SwapImg('rollover1', 'http://web.me.com/jeffscubadoo/bikinis/oludum/bikini-bresilien-authentique.jpg')" onmouseout="SwapImg('rollover1', 'http://web.me.com/jeffscubadoo/bikinis/oludum/hello.jpg')" />
      </div>
      <div style="position: absolute; top: 160px;left: 10px;width:80px;">
         <img src="http://web.me.com/jeffscubadoo/bikinis/oludum/t_bikini-bresilien-ete-2010.jpg" class="thumb" alt="2" Title="2" onmouseover="SwapImg('rollover1', 'http://web.me.com/jeffscubadoo/bikinis/oludum/bikini-bresilien-ete-2010.jpg')" onmouseout="SwapImg('rollover1', 'http://web.me.com/jeffscubadoo/bikinis/oludum/hello.jpg')" />
      </div>
      <div style="position: absolute; top: 270px;left: 10px;width:80px;">
         <img src="http://web.me.com/jeffscubadoo/bikinis/oludum/t_bikini-bresilien-femme.jpg" class="thumb" alt="3" Title="3" onmouseover="SwapImg('rollover1', 'http://web.me.com/jeffscubadoo/bikinis/oludum/bikini-bresilien-femme.jpg')" onmouseout="SwapImg('rollover1', 'http://web.me.com/jeffscubadoo/bikinis/oludum/hello.jpg')" />
      </div>
   </div>
</div>
<div style="display:none;">
   <img src="http://web.me.com/jeffscubadoo/bikinis/oludum/bikini-bresilien-authentique.jpg"/>
   <img src="http://web.me.com/jeffscubadoo/bikinis/oludum/bikini-bresilien-ete-2010.jpg"/>
   <img src="http://web.me.com/jeffscubadoo/bikinis/oludum/bikini-bresilien-femme.jpg"/>
   <img src="http://web.me.com/jeffscubadoo/bikinis/oludum/hello.jpg"/>
</div>

[jeffscubadoo]

BRAVO, et MERCI.

[glisda]

Bonjour,
Suite au petit code pour rollover sur la page suivante:
http://www.iwebeginner.com/forum/topic507.html#p2127
J'ai une petite question:
Dans la première ligne, il faut mettre l'url de la page à atteindre, lorsque j'installe ce code (fragment hyml) toute est ok, par contre je trouve au dessus de mon image l'url que j'ai saisi dans le code vers la page désirée (pas sur le site, mais dans la mise en forme du widget).
Résultat du code sur le site:
l'image de base -1- s'affiche, lors du survol elle change pour laisser l'image suivante -2- mais ne revient pas à l'image-1- lorsque je quitte la zone.
le lien lui est fonctionnel.
Est-ce que le code est bon?:

Code: Tout sélectionner

a href="http://www.christopheruelle.com/oxhwave.html”>
<script type="text/javascript">
function SourisSur()
{
document.adresse.src ="http://dl.dropbox.com/u/5497711/ON.jpg" [color=#800000](c'est l'image 1)[/color]
}
function Sourisdehors()
{
document.adresse.src ="http://dl.dropbox.com/u/5497711/OFF.jpg" (c'est l'image 2)
}
</script>

<img  src="http://dl.dropbox.com/u/5497711/OFF.jpg" name="adresse"
width="50" height="50"
border="0"
alt="iwebegginer - Le site pour débuter"
onmouseover="SourisSur()"
onmouseout="Sourisdehors()"
/></a>



Ou est-ce que je me suis encore planté?
Merci d'avance aux hotmailiens charitables...

[Marc]

Le code que vous avez copié est erroné (il faudrait éditer le message de Zep), en voici une correction

Code: Tout sélectionner

<script type="text/javascript">
function SourisSur()
{
document.adresse.src= "http://dl.dropbox.com/u/5497711/ON.jpg"
}
function Sourisdehors()
{
document.adresse.src= "http://dl.dropbox.com/u/5497711/OFF.jpg"
}
</script>
<a href="http://www.christopheruelle.com/oxhwave.html" target="_top">
<img  src="http://dl.dropbox.com/u/5497711/OFF.jpg" width="50" height="50" border="0"
name="adresse" alt="texte alternatif"
onmouseover="SourisSur()" onmouseout="Sourisdehors()" />
</a>