Retour à Forum de programmation

texte / image rollovers

  • astrid+
  • Novice
  • Novice
  • No Avatar
  • Inscription: Juil 13, 2009
  • Messages: 17
  • Status: Offline

Message Juillet 31st, 2009, 3:56 pm

Bonjour à tous,

Je suis la conception d'une page pour une bande dessinée qui Im allant à afficher sur mon site. Je veux que ce soit pour que quatre images à la fois montrer, et que l'on peut accéder à d'autres parties de la bande dessinée seulement en roulant sa souris sur un lien, sans avoir à charger une nouvelle page. En supposant que cet objectif peut être atteint par JavaScript?

Merci de l'aide.
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Juillet 31st, 2009, 3:56 pm

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • Avatar de l’utilisateur
  • Inscription: Juil 25, 2005
  • Messages: 2735
  • Loc: Nashville, TN
  • Status: Offline

Message Juillet 31st, 2009, 5:09 pm

Vous pouvez spécifier le comme ceci:
Code: [ Select ]
 
<html>
    <head>
        <script language="JavaScript">
 
            function doSwap(newSrc, targ)
            {                          
                document.getElementById(targ).src = newSrc;        
            }
        </script>
    </head>
    <body>
        <img id="target" src="" />
        <br />
        <a href="#" onMouseOver="doSwap('http://davidnaylor.org/temp/firefox-logo-200x200.png', 'target');">Hover here!</a><br/>
        <a href="#" onMouseOver="doSwap('http://davidnaylor.org/temp/thunderbird-logo-200x200.png', 'target');">Hover here!</a><br/>
        <a href="#" onMouseOver="doSwap('http://markcarson.com/images/Sunbird-4-200x200.png', 'target');">Hover here!</a><br/>
    </body>
</html>
 
  1.  
  2. <html>
  3.     <head>
  4.         <script language="JavaScript">
  5.  
  6.             function doSwap(newSrc, targ)
  7.             {                          
  8.                 document.getElementById(targ).src = newSrc;        
  9.             }
  10.         </script>
  11.     </head>
  12.     <body>
  13.         <img id="target" src="" />
  14.         <br />
  15.         <a href="#" onMouseOver="doSwap('http://davidnaylor.org/temp/firefox-logo-200x200.png', 'target');">Hover here!</a><br/>
  16.         <a href="#" onMouseOver="doSwap('http://davidnaylor.org/temp/thunderbird-logo-200x200.png', 'target');">Hover here!</a><br/>
  17.         <a href="#" onMouseOver="doSwap('http://markcarson.com/images/Sunbird-4-200x200.png', 'target');">Hover here!</a><br/>
  18.     </body>
  19. </html>
  20.  


...mais thats kinda facile. Maintenant des images aléatoires, qui était un poil plus fun à écrire, mais encore simple:

Code: [ Select ]
 
<html>
    <head>
        <script language="JavaScript">
 
            function doRandSwap(curr, targ)
            {          
                var pics, next;
               
                pics = new Array("http://davidnaylor.org/temp/firefox-logo-200x200.png",
                             "http://davidnaylor.org/temp/thunderbird-logo-200x200.png",
                             "http://markcarson.com/images/Sunbird-4-200x200.png"
                            );
                do {
                    next = Math.floor(Math.random()*pics.length);
                } while (next == curr);
                document.getElementById(targ).src = pics[next];        
                document.getElementById('curr').value = next;
            }
        </script>
    </head>
    <body>
        <img id="target" src="" />
        <br /><br />
        <input id="curr" type="hidden" />
        <br />
        <a href="#" onMouseOver="doRandSwap(document.getElementById('curr').value, 'target');">Hover here!</a>
    </body>
</html>
 
  1.  
  2. <html>
  3.     <head>
  4.         <script language="JavaScript">
  5.  
  6.             function doRandSwap(curr, targ)
  7.             {          
  8.                 var pics, next;
  9.                
  10.                 pics = new Array("http://davidnaylor.org/temp/firefox-logo-200x200.png",
  11.                              "http://davidnaylor.org/temp/thunderbird-logo-200x200.png",
  12.                              "http://markcarson.com/images/Sunbird-4-200x200.png"
  13.                             );
  14.                 do {
  15.                     next = Math.floor(Math.random()*pics.length);
  16.                 } while (next == curr);
  17.                 document.getElementById(targ).src = pics[next];        
  18.                 document.getElementById('curr').value = next;
  19.             }
  20.         </script>
  21.     </head>
  22.     <body>
  23.         <img id="target" src="" />
  24.         <br /><br />
  25.         <input id="curr" type="hidden" />
  26.         <br />
  27.         <a href="#" onMouseOver="doRandSwap(document.getElementById('curr').value, 'target');">Hover here!</a>
  28.     </body>
  29. </html>
  30.  
I'd love to change the world, but they won't give me the source code.
  • astrid+
  • Novice
  • Novice
  • No Avatar
  • Inscription: Juil 13, 2009
  • Messages: 17
  • Status: Offline

Message Août 1st, 2009, 3:15 pm

Thank you so much! Cela a été une énorme aide.
J'ai une autre question. Que dois-je faire si je veux que la première image à être déjà sur la page par défaut, sans que la personne d'avoir à rouler sur le texte afin de le voir?
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • Avatar de l’utilisateur
  • Inscription: Juil 25, 2005
  • Messages: 2735
  • Loc: Nashville, TN
  • Status: Offline

Message Août 1st, 2009, 3:55 pm

Il suffit de régler l'image src à ce que vous voulez y apparaître. Dans ce code, si vous voulez que l'image chargé en premier, puis comme le swap cette ligne:

Code: [ Select ]
<img id="target" src="" />


à ceci:

Code: [ Select ]
<img id="target" src="http://davidnaylor.org/temp/firefox-logo-200x200.png" />
I'd love to change the world, but they won't give me the source code.
  • astrid+
  • Novice
  • Novice
  • No Avatar
  • Inscription: Juil 13, 2009
  • Messages: 17
  • Status: Offline

Message Août 3rd, 2009, 9:31 pm

Merci! :)

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 5 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 162 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC