text/image rollovers

  • astrid+
  • Novice
  • Novice
  • astrid+
  • Posts: 17

Post 3+ Months Ago

Hello all,

I am designing a page for a comic strip that I'm going to post on my site. I want it to be so that four images at a time show up, and that one can access other parts of the comic strip just by rolling his/her mouse over a link, without having to load an entirely new page. I'm assuming this can be accomplished through JavaScript?

Thanks for the help.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

You can specify it like so:
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.  


...but that's kinda easy. Now random images, that was a tad more fun to write, but still 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.  
  • astrid+
  • Novice
  • Novice
  • astrid+
  • Posts: 17

Post 3+ Months Ago

Thank you so much! That was a tremendous help.
I have another question, though. What do I do if I want the first image to already be there on the page by default, without the person having to roll over the text in order to see it?
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Just set the image src to what you want to appear there. In this code, if you want the first image loaded, then just swap this line:

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


to this:

Code: [ Select ]
<img id="target" src="http://davidnaylor.org/temp/firefox-logo-200x200.png" />
  • astrid+
  • Novice
  • Novice
  • astrid+
  • Posts: 17

Post 3+ Months Ago

Thanks! :)

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 76 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.