Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Location
    Queens NY
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Rollover program with captions making me crazy!

    Hi, newbie here, rollover program with captions is making me crazy!

    Any help would be appreciated. Here's what I got

    Hi, my name is Trish, and I'm trying to get this routine working. Any suggestions? Any help would be appreciated.

    Thanks. Trish


    <HTML>
    <HEAD>
    <style type="text/css">
    .pos_right
    {
    position: relative;
    left:120px; bottom: 186px;
    }

    </style>
    <script type="text/javascript" src="rollovercaption.js">
    </script>

    </HEAD>
    <BODY link=black alink=black vlink=black>
    Roll mouse over thumbnail for larger picture<BR><BR>
    <A HREF="javascript:void(0)"
    onmouseover="document.images.large.src='ring1large.jpg'"
    onmouseout="document.large.src='space.jpg'" >
    <IMG SRC="ring1.jpg" border=1 bordercolor="black" ALT=" "> </a>
    <br><p align=center id="caption">caption1</p>
    <A HREF="javascript:void(0)"
    onmouseover="document.images['large'].src='ring2large.jpg'"
    onmouseout="document.images['large'].src='space.jpg'">
    <IMG SRC="ring2.jpg" border=1 bordercolor="black" ALT=" "> </a><br>

    <A HREF="javascript:void(0)"
    onmouseover="document.images['large'].src='ring3large.jpg'"
    onmouseout="document.images['large'].src='space.jpg'">
    <IMG SRC="ring3.jpg" border=1 bordercolor="black" ALT=" "> </a><br>

    <A HREF="javascript:void(0)"
    onmouseover="document.images['large'].src='ring4large.jpg'"
    onmouseout="document.images['large'].src='space.jpg'">
    <IMG SRC="ring4.jpg" border=1 bordercolor="black" ALT=" "> </a><br>

    <BR><BR>
    <IMG SRC="space.jpg" class= "pos_right" ALT=" " NAME="large" >


    </BODY>
    </HTML>



    rollovercaption.js follows:

    <style language="JavaScript" type="text/javascript">
    if (document.images) {
    image0= new Image;
    image1= new Image;
    image2= new Image;
    image3= new Image;
    image0.src='ring1large.jpg';
    image1.src='ring2large.jpg';
    image2.src='ring3large.jpg';
    image3.src='ring4large.jpg';
    document.large="";
    }
    var cap=['Picture One', 'Second Picture', 'Three'];
    function rollover(n){
    document.large.src=window['image'+n].src;
    document.getElementById('caption').inner.HTML=cap[n];
    }



    </script>

    Thanks much!

    Trish

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    try(untested)
    Code:
    <HTML>
    <HEAD>
    <style type="text/css">
    .pos_right
    {
    position: relative;
    left:120px; bottom: 186px;
    }
    
    </style>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    var cap=['Picture One', 'Second Picture', 'Three',''];
    
    
    function Swap(zxcid,img,capid,capt){
     if (document.getElementById(zxcid)&&img){
      document.getElementById(zxcid).src=img
     }
     if (document.getElementById(capid)&&capt){
      document.getElementById(capid).innerHTML=capt;
     }
    }
    
    //-->
    </script>
    
    
    
    </script>
    
    </HEAD>
    <BODY link=black alink=black vlink=black>
    Roll mouse over thumbnail for larger picture<BR><BR>
    <IMG SRC="ring1.jpg" border=1 bordercolor="black" ALT=" "
     onmouseover="Swap('large','ring1large.jpg','caption',cap[0]);"
     onmouseout="Swap('large','space.jpg','caption',cap[2]);" >
    
    >
    <br><p align=center id="caption">caption1</p>
    
    <IMG SRC="ring2.jpg" border=1 bordercolor="black" ALT=" "
    onmouseover="Swap('large','ring2large.jpg','caption',cap[3]);"
    onmouseout="Swap('large','space.jpg','caption',cap[2]);">
    
    ><br>
    
    <IMG SRC="ring3.jpg" border=1 bordercolor="black" ALT=" "
    onmouseover="Swap('large','ring3large.jpg','caption',cap[1]);"
    onmouseout="Swap('large','space.jpg','caption',cap[0]);">
    
    ><br>
    
    <IMG SRC="ring4.jpg" border=1 bordercolor="black" ALT=" "
     onmouseover="Swap('large','ring4large.jpg','caption',cap[0]);"
     onmouseout="Swap('large','space.jpg','caption',cap[3]);">
    
    >
    <br>
    
    <BR><BR>
    <IMG SRC="space.jpg" class= "pos_right" ALT=" " id="large" >
    <div id="caption" ></div>
    
    </BODY>
    </HTML>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Location
    Queens NY
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, thank you, you're a life-saver. Code works great!

    Tricia


  •  

    Posting Permissions

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