Your browser does not support CSS. If images appear below, please disregard them.
Connexion

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

FAQ Membres>M’enregistrer

Rollover (encore)

Pour aller plus loin avec iWeb

Modérateurs: les9viesduchat, Anselm, zepatente

  • Publicité

Re: Rollover (encore)

Messagepar jeffscubadoo » Dim 7 Nov 2010 08:45

Merci Caribou, c'est fait ;)
Avatar de l’utilisateur
jeffscubadoo
Persévérant
Persévérant
 
Messages: 79
Inscription: Sam 22 Nov 2008 09:53
Localisation: france
Votre version d'iWeb: iWeb 09
Votre hébergement: FTP

Publicité

Re: Rollover (encore)

Messagepar Marc » Jeu 11 Nov 2010 00:44

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>
Dernière édition par Marc le Jeu 11 Nov 2010 13:34, édité 1 fois.
Avatar de l’utilisateur
Marc
Génius
Génius
 
Messages: 1447
Inscription: Mar 17 Fév 2009 18:40
Votre version d'iWeb: IWeb 3.0.4
Votre hébergement: FTP

Re: Rollover (encore)

Messagepar jeffscubadoo » Jeu 11 Nov 2010 07:11

BRAVO, et MERCI.
Avatar de l’utilisateur
jeffscubadoo
Persévérant
Persévérant
 
Messages: 79
Inscription: Sam 22 Nov 2008 09:53
Localisation: france
Votre version d'iWeb: iWeb 09
Votre hébergement: FTP

Re: Rollover (encore)

Messagepar glisda » Dim 13 Fév 2011 12:51

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...
Image
Avatar de l’utilisateur
glisda
Bible
Bible
 
Messages: 722
Inscription: Dim 9 Jan 2011 23:29
Localisation: Boulogne
Votre version d'iWeb: iWeb 09
Votre hébergement: FTP

Re: Rollover (encore)

Messagepar Marc » Dim 13 Fév 2011 17:38

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>
Avatar de l’utilisateur
Marc
Génius
Génius
 
Messages: 1447
Inscription: Mar 17 Fév 2009 18:40
Votre version d'iWeb: IWeb 3.0.4
Votre hébergement: FTP

Précédente

Retourner vers Code HTML

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 7 invités