Results 1 to 2 of 2
  1. 07-15-2012, 03:10 AM #1
    mhunterjones
    mhunterjones is offline Member
    Join Date
    Jul 2012
    Posts
    1
    Rep Power
    0

    Default Add Fade In/Fade Out to multiple image swap script

    Hello, I would like to revive an old script i used by adding a fade effect when the images swap:

    http://www.mhunterj.com

    You can see when you mouseover the text on the left, both top and bottom images are swapped with new ones, abruptly. Is it possible to edit my script so the new images fade in on mouseover, and it fades back to default image on mouseout?

    You can see the script using View Source on the page above, or copied below:
    Thank you!
    Matt



    <html>
    <head>
    <title>
    </title>
    <STYLE type="text/css"> <!-- A { text-decoration:none } --> </STYLE>

    <script language="JavaScript">
    /* browserName = navigator.appName;
    browserVer = parseInt(navigator.appVersion);
    if (browserName == "Netscape" && browserVer > = 3) version = "n3";
    else version = "n2"; */

    if (document.images) version = "n3";
    else version = "n2";

    if (version == "n3") {
    but0on = new Image(218, 163);
    but0on.src = "grab-ziemba.gif";
    but1on = new Image(218, 163);
    but1on.src = "grab-linha.gif";
    but2on = new Image(218, 163);
    but2on.src = "grab-bendpress.gif";
    but3on = new Image(218, 163);
    but3on.src = "grab-landofplenty.gif";
    but4on = new Image(218, 163);
    but4on.src = "grab-flybar.gif";
    but5on = new Image(218, 163);
    but5on.src = "grab-curbfeeler.gif";
    but6on = new Image(218, 163);
    but6on.src = "grab-sakebomb.gif";
    but7on = new Image(218, 163);
    but7on.src = "grab-tokion.gif";
    but8on = new Image(218, 163);
    but8on.src = "grab-fecalface.gif";
    but9on = new Image(218, 163);
    but9on.src = "grab-sodaplay.gif";
    }

    function img0(imgName) {
    if (version == "n3") {
    imgOn = eval("but0on.src");
    document [imgName].src = imgOn; } }
    function img1(imgName) {
    if (version == "n3") {
    imgOn = eval("but1on.src");
    document [imgName].src = imgOn; } }
    function img2(imgName) {
    if (version == "n3") {
    imgOn = eval("but2on.src");
    document [imgName].src = imgOn; } }
    function img3(imgName) {
    if (version == "n3") {
    imgOn = eval("but3on.src");
    document [imgName].src = imgOn; } }
    function img4(imgName) {
    if (version == "n3") {
    imgOn = eval("but4on.src");
    document [imgName].src = imgOn; } }
    function img5(imgName) {
    if (version == "n3") {
    imgOn = eval("but5on.src");
    document [imgName].src = imgOn; } }
    function img6(imgName) {
    if (version == "n3") {
    imgOn = eval("but6on.src");
    document [imgName].src = imgOn; } }
    function img7(imgName) {
    if (version == "n3") {
    imgOn = eval("but7on.src");
    document [imgName].src = imgOn; } }
    function img8(imgName) {
    if (version == "n3") {
    imgOn = eval("but8on.src");
    document [imgName].src = imgOn; } }
    function img9(imgName) {
    if (version == "n3") {
    imgOn = eval("but9on.src");
    document [imgName].src = imgOn; } }

    </script>

    <script language="JavaScript">
    /* browserName = navigator.appName;
    browserVer = parseInt(navigator.appVersion);
    if (browserName == "Netscape" && browserVer > = 3) version = "n3";
    else version = "n2"; */

    if (document.images) version = "n3";
    else version = "n2";

    if (version == "n3") {
    but10on = new Image(198, 226);
    but10on.src = "txt-intro.gif";
    but11on = new Image(198, 226);
    but11on.src = "txt-linha.gif";
    but12on = new Image(198, 226);
    but12on.src = "txt-bendpress.gif";
    but13on = new Image(198, 226);
    but13on.src = "txt-landofplenty.gif";
    but14on = new Image(198, 226);
    but14on.src = "txt-flybar.gif";
    but15on = new Image(198, 226);
    but15on.src = "txt-curbfeeler.gif";
    but16on = new Image(198, 226);
    but16on.src = "txt-sakebomb.gif";
    but17on = new Image(198, 226);
    but17on.src = "txt-tokion.gif";
    but18on = new Image(198, 226);
    but18on.src = "txt-fecalface.gif";
    but19on = new Image(198, 226);
    but19on.src = "txt-sodaplay.gif";

    }

    function img10(imgName) {
    if (version == "n3") {
    imgOn = eval("but10on.src");
    document [imgName].src = imgOn; } }
    function img11(imgName) {
    if (version == "n3") {
    imgOn = eval("but11on.src");
    document [imgName].src = imgOn; } }
    function img12(imgName) {
    if (version == "n3") {
    imgOn = eval("but12on.src");
    document [imgName].src = imgOn; } }
    function img13(imgName) {
    if (version == "n3") {
    imgOn = eval("but13on.src");
    document [imgName].src = imgOn; } }
    function img14(imgName) {
    if (version == "n3") {
    imgOn = eval("but14on.src");
    document [imgName].src = imgOn; } }
    function img15(imgName) {
    if (version == "n3") {
    imgOn = eval("but15on.src");
    document [imgName].src = imgOn; } }
    function img16(imgName) {
    if (version == "n3") {
    imgOn = eval("but16on.src");
    document [imgName].src = imgOn; } }
    function img17(imgName) {
    if (version == "n3") {
    imgOn = eval("but17on.src");
    document [imgName].src = imgOn; } }
    function img18(imgName) {
    if (version == "n3") {
    imgOn = eval("but18on.src");
    document [imgName].src = imgOn; } }
    function img19(imgName) {
    if (version == "n3") {
    imgOn = eval("but19on.src");
    document [imgName].src = imgOn; } }

    </script>

    </head>
    <body bgcolor="white" marginheight="0" marginwidth="0" leftmargin="0"
    rightmargin="0" topmargin="0" bottommargin="0" OnLoad="swapPic();" link="#C0C0C0" alink="red" vlink="#C0C0C0">
    <center>
    <br><BR><br>
    <table border="0" cellspacing="0" cellpadding="0" width="847" height="515" background="bg-box-trans.gif">
    <tr>
    <td width="339" height="515">
    <font size="2" face="arial" color="#C0C0C0">
    <div id="links-external" style="position:relative; left:-20px; top:52px; z-index:4; width:90; height:150;">
    <a href="http://www.a-linha.org" TARGET="_BLANK" onMouseOver="img1('but1'), img11('but11')" onMouseOut="img0('but1'), img10('but11')">Linha</a><br>
    <a href="http://www.bendpress.com" TARGET="_BLANK" onMouseOver="img2('but1'), img12('but11')" onMouseOut="img0('but1'), img10('but11')">BendPress</a><br>
    <a href="http://www.thelandofplenty.org" TARGET="_BLANK" onMouseOver="img3('but1'), img13('but11')" onMouseOut="img0('but1'), img10('but11')">LandofPlenty</a><br>
    <a HREF="http://www.flybar.com" TARGET="_BLANK" onMouseOver="img4('but1'), img14('but11')" onMouseOut="img0('but1'), img10('but11')">Flybar</a><br>
    <a HREF="http://www.curbfeeler.com" TARGET="_BLANK" onMouseOver="img5('but1'), img15('but11')" onMouseOut="img0('but1'), img10('but11')">Curbfeeler</a><br>
    <a HREF="http://www.sakebomb.com" TARGET="_BLANK" onMouseOver="img6('but1'), img16('but11')" onMouseOut="img0('but1'), img10('but11')">Sakebomb</a><br>
    <a HREF="http://www.tokion.com" TARGET="_BLANK" onMouseOver="img7('but1'), img17('but11')" onMouseOut="img0('but1'), img10('but11')">Tokion!</a><br>
    <a HREF="http://www.fecalface.com" TARGET="_BLANK" onMouseOver="img8('but1'), img18('but11')" onMouseOut="img0('but1'), img10('but11')">FecalFace</a><br>
    <a HREF="http://www.sodaplay.com" TARGET="_BLANK" onMouseOver="img9('but1'), img19('but11')" onMouseOut="img0('but1'), img10('but11')">SodaPlay</a><br>
    </div></font>
    <div id="grabs" style="position:relative; left:79px; top:-101px; z-index:4; height:163; width:218;">
    <img src="grab-ziemba.gif" border="0" name="but1">
    </div>
    <div id="description" style="position:relative; left:89px; top:-73px; z-index:4; height:226; width:198;">
    <img src="txt-intro.gif" name="but11" height="226" width="198">
    </div>
    </td>
    <td width="508" height="515" align="center">

    </td></tr>
    </table>

    </center>
    </body>
    </html>
    Reply With Quote Reply With Quote
  2. 07-15-2012, 03:18 AM #2
    pbrockway2
    pbrockway2 is offline Moderator
    Join Date
    Feb 2009
    Location
    New Zealand
    Posts
    4,561
    Rep Power
    11

    Default Re: Add Fade In/Fade Out to multiple image swap script

    Hi mhunterjones, you seem to be in the wrong place... This is a forum for development in the Java programming language. JavaScript is a different language. Google should turn up any number of JavaScript forums. Good luck!
    Reply With Quote Reply With Quote
« Question about interfaces! | Questions about if statements? »

Similar Threads

  1. how to swap my image in java applet after drag.
    By ganesh.gothi@gmail.com in forum Java Applets
    Replies: 2
    Last Post: 05-03-2012, 05:27 PM
  2. Fade In JPanel
    By mafyou in forum AWT / Swing
    Replies: 2
    Last Post: 02-28-2012, 06:16 AM
  3. running through jlabel fade only once
    By droidus in forum AWT / Swing
    Replies: 2
    Last Post: 01-29-2012, 02:15 PM
  4. Fade in/Fade out Class for any object
    By eLancaster in forum New To Java
    Replies: 3
    Last Post: 04-13-2011, 03:19 PM
  5. Alpha Fade Flicker
    By jamesfrize in forum Java Applets
    Replies: 3
    Last Post: 04-02-2008, 02:02 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules