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

[jeffscubadoo]

Bonjour je voudrais appliquer ce style de rollover sur une de mes pages.
Voilà à quoi je voudrais que sa ressemble :http://www.zebuloni.com/bikini-shop.aspx
Voici le code que j'ai utiliser:

Code: Tout sélectionner

            <div>
                <img src="http://web.me.com/jeffscubadoo/bikinis/oludum/bresilienne-en-bikini.jpg" id="ctl00_cphContent_rptBoutique_ctl02_imgMain" class="imgMain" alt="Bikini Rayures Olodum - Le bikini 100% brasilien 50,00 €" Title="Bikini Rayures Olodum - Le bikini 100% brasilien 50,00 €" />     
<div class="ThumbContainer" >

                <img src="http://web.me.com/jeffscubadoo/bikinis/oludum/t_bikini-bresilien-authentique.jpg" id="ctl00_cphContent_rptBoutique_ctl02_imgThumb1" class="thumb thumbMargin" alt="Bikini Rayures Oludum - Le bikini fabriqué au Brésil 83% polyamide, 17% élasthanne, bandeau rembourré" Title="Bikini Rayures Oludum - Le bikini fabriqué au Brésil 83% polyamide, 17% élasthanne, bandeau rembourré" onmouseover="SwapImg('ctl00_cphContent_rptBoutique_ctl02_imgMain', 'http://web.me.com/jeffscubadoo/bikinis/oludum/bikini-bresilien-authentique.jpg')" onmouseout="SwapImg('ctl00_cphContent_rptBoutique_ctl02_imgMain', 'http://web.me.com/jeffscubadoo/bikinis/oludum/t_bikini-bresilien-authentique.jpg')" />

                <img src="http://web.me.com/jeffscubadoo/bikinis/oludum/t_bikini-bresilien-ete-2010.jpg" id="ctl00_cphContent_rptBoutique_ctl02_imgThumb2" class="thumb thumbMargin" alt="Bikini Rayures Oludum - Bikini made in Brazil - Zebuloni" Title="Bikini Rayures Oludum - Bikini made in Brazil - Zebuloni" onmouseover="SwapImg('ctl00_cphContent_rptBoutique_ctl02_imgMain', 'http://web.me.com/jeffscubadoo/bikinis/oludum/bikini-bresilien-ete-2010.jpg')" onmouseout="SwapImg('ctl00_cphContent_rptBoutique_ctl02_imgMain', 'http://web.me.com/jeffscubadoo/bikinis/oludum/bresilienne-en-bikini.jpg')" />

                <img src="http://web.me.com/jeffscubadoo/bikinis/oludum/t_bikini-bresilien-femme.jpg" id="ctl00_cphContent_rptBoutique_ctl02_imgThumb3" class="thumb" alt="Bikini Rayures Oludum - Sexy Brésilienne bikini" Title="Bikini Rayures Oludum - Sexy Brésilienne bikini" onmouseover="SwapImg('ctl00_cphContent_rptBoutique_ctl02_imgMain', 'http://web.me.com/jeffscubadoo/bikinis/oludum/bikini-bresilien-femme.jpg')" onmouseout="SwapImg('ctl00_cphContent_rptBoutique_ctl02_imgMain', 'http://web.me.com/jeffscubadoo/bikinis/oludum/bresilienne-en-bikini.jpg')" />
</div>

    <div style="clear:both;"></div></div>
        <script type="text/javascript">
            function SwapImg(imgMainId, newSrc)
 {

                var img = document.getElementById(imgMainId);
                img.src = newSrc;               
            }
           </script>

Problème : je voudrais que les vignettes soient exactement positionner comme la page indiquée ci dessus (en dessous de la grande image a l'horizontal avec une petite marge et toute lesimages encadrés. Merci du sérieux coup de main.

[jeffscubadoo]

Voilà j'ai trouvé. Je vous le donne si sa peut servir. Par contre je ne sais pas si c'est bien "propre" comme code mais sa marche. Si vous avez une ide pour l'améliorer....merci

Code: Tout sélectionner

            <div>           
                <img src="http://web.me.com/jeffscubadoo/bikinis/oludum/bresilienne-en-bikini.jpg" id="ctl00_cphContent_rptBoutique_ctl02_imgMain" class="imgMain" alt="Bikini Rayures Olodum - Le bikini 100% brasilien 50,00 €" Title="Bikini Rayures Olodum - Le bikini 100% brasilien 50,00 €" />     
<div class="ThumbContainer" >
            <div style="position: absolute; top: 350px; width: 250px;left:6px;">
                <img src="http://web.me.com/jeffscubadoo/bikinis/oludum/t_bikini-bresilien-authentique.jpg" id="ctl00_cphContent_rptBoutique_ctl02_imgThumb1" class="thumb thumbMargin" alt="Bikini Rayures Oludum - Le bikini fabriqué au Brésil 83% polyamide, 17% élasthanne, bandeau rembourré" Title="Bikini Rayures Oludum - Le bikini fabriqué au Brésil 83% polyamide, 17% élasthanne, bandeau rembourré" onmouseover="SwapImg('ctl00_cphContent_rptBoutique_ctl02_imgMain', 'http://web.me.com/jeffscubadoo/bikinis/oludum/bikini-bresilien-authentique.jpg')" onmouseout="SwapImg('ctl00_cphContent_rptBoutique_ctl02_imgMain', 'http://web.me.com/jeffscubadoo/bikinis/oludum/t_bikini-bresilien-authentique.jpg')" />

                <img src="http://web.me.com/jeffscubadoo/bikinis/oludum/t_bikini-bresilien-ete-2010.jpg" id="ctl00_cphContent_rptBoutique_ctl02_imgThumb2" class="thumb thumbMargin" alt="Bikini Rayures Oludum - Bikini made in Brazil - Zebuloni" Title="Bikini Rayures Oludum - Bikini made in Brazil - Zebuloni" onmouseover="SwapImg('ctl00_cphContent_rptBoutique_ctl02_imgMain', 'http://web.me.com/jeffscubadoo/bikinis/oludum/bikini-bresilien-ete-2010.jpg')" onmouseout="SwapImg('ctl00_cphContent_rptBoutique_ctl02_imgMain', 'http://web.me.com/jeffscubadoo/bikinis/oludum/bresilienne-en-bikini.jpg')" />

                <img src="http://web.me.com/jeffscubadoo/bikinis/oludum/t_bikini-bresilien-femme.jpg" id="ctl00_cphContent_rptBoutique_ctl02_imgThumb3" class="thumb" alt="Bikini Rayures Oludum - Sexy Brésilienne bikini" Title="Bikini Rayures Oludum - Sexy Brésilienne bikini" onmouseover="SwapImg('ctl00_cphContent_rptBoutique_ctl02_imgMain', 'http://web.me.com/jeffscubadoo/bikinis/oludum/bikini-bresilien-femme.jpg')" onmouseout="SwapImg('ctl00_cphContent_rptBoutique_ctl02_imgMain', 'http://web.me.com/jeffscubadoo/bikinis/oludum/bresilienne-en-bikini.jpg')" />
</div>

    <div style="clear:both;"></div>
        <script type="text/javascript">
            function SwapImg(imgMainId, newSrc)
 {

                var img = document.getElementById(imgMainId);
                img.src = newSrc;               
            }
           </script>


[jeffscubadoo]

J'avais oublier de fermer les balises div....et mis une mauvaise image en en lien. OK maintenant c'est bon.
VICTOIRE

Code: Tout sélectionner



            <div>           
                <img src="http://web.me.com/jeffscubadoo/bikinis/oludum/bresilienne-en-bikini.jpg" id="ctl00_cphContent_rptBoutique_ctl02_imgMain" class="imgMain" alt="Bikini Rayures Olodum - Le bikini 100% brasilien 50,00 €" Title="Bikini Rayures Olodum - Le bikini 100% brasilien 50,00 €" />     
<div class="ThumbContainer" >
            <div style="position: absolute; top: 350px; width: 250px;left:6px;">
                <img src="http://web.me.com/jeffscubadoo/bikinis/oludum/t_bikini-bresilien-authentique.jpg" class="thumb thumbMargin" alt="Bikini Rayures Oludum - Le bikini fabriqué au Brésil 83% polyamide, 17% élasthanne, bandeau rembourré" Title="Bikini Rayures Oludum - Le bikini fabriqué au Brésil 83% polyamide, 17% élasthanne, bandeau rembourré" onmouseover="SwapImg('ctl00_cphContent_rptBoutique_ctl02_imgMain', 'http://web.me.com/jeffscubadoo/bikinis/oludum/bikini-bresilien-authentique.jpg')" onmouseout="SwapImg('ctl00_cphContent_rptBoutique_ctl02_imgMain', 'http://web.me.com/jeffscubadoo/bikinis/oludum/bresilienne-en-bikini.jpg')" />

                <img src="http://web.me.com/jeffscubadoo/bikinis/oludum/t_bikini-bresilien-ete-2010.jpg" class="thumb thumbMargin" alt="Bikini Rayures Oludum - Bikini made in Brazil - Zebuloni" Title="Bikini Rayures Oludum - Bikini made in Brazil - Zebuloni" onmouseover="SwapImg('ctl00_cphContent_rptBoutique_ctl02_imgMain', 'http://web.me.com/jeffscubadoo/bikinis/oludum/bikini-bresilien-ete-2010.jpg')" onmouseout="SwapImg('ctl00_cphContent_rptBoutique_ctl02_imgMain', 'http://web.me.com/jeffscubadoo/bikinis/oludum/bresilienne-en-bikini.jpg')" />

                <img src="http://web.me.com/jeffscubadoo/bikinis/oludum/t_bikini-bresilien-femme.jpg" class="thumb" alt="Bikini Rayures Oludum - Sexy Brésilienne bikini" Title="Bikini Rayures Oludum - Sexy Brésilienne bikini" onmouseover="SwapImg('ctl00_cphContent_rptBoutique_ctl02_imgMain', 'http://web.me.com/jeffscubadoo/bikinis/oludum/bikini-bresilien-femme.jpg')" onmouseout="SwapImg('ctl00_cphContent_rptBoutique_ctl02_imgMain', 'http://web.me.com/jeffscubadoo/bikinis/oludum/bresilienne-en-bikini.jpg')" />
</div>

    <div style="clear:both;"></div>
        <script type="text/javascript">
            function SwapImg(imgMainId, newSrc)
 {

                var img = document.getElementById(imgMainId);
                img.src = newSrc;               
            }
           </script>
</div>