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 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Write test on an image in a slideshow

    I have a very basic slideshow and I would lilke to know how can I add some text to each of the images on the slideshow.

    THANKS SO MUCH

    Here is the code of my slideshow.


    </head>
    <script language="javascript" type="text/javascript">
    var imagenesCA = ['http://lh6.ggpht.com/_sIFcB4A_jT4/SnnTvYyrECI/AAAAAAAABjE/jYXMTrokCJo/s512/30.jpg',
    'http://lh5.ggpht.com/_Eg1ks9CXra8/SHOdVTsctZI/AAAAAAAAEtU/I7GKbE71934/s512/espa%C3%B1a%20174.jpg'];
    var enlacesCA = ['http://goplanettravel.blogspot.com/2009/10/central-america.html',
    'http://goplanettravel.blogspot.com/2009/10/central-america.html'];
    var anchoCA = [680, 680];
    var altoCA = [400, 400];
    var cantidadCA = imagenesCA.length;
    var actualCA = 0;
    function fn_empezarCA(){
    if (actualCA==cantidadCA)
    actualCA = 0;
    var imagenCA = document.getElementById('imagenCA');
    var enlaceCA = document.getElementById('enlaceCA');
    imagenCA.src = imagenesCA[actualCA];
    imagenCA.width = anchoCA[actualCA];
    imagenCA.height = altoCA[actualCA];
    enlaceCA.href = enlacesCA[actualCA];
    actualCA = actualCA + 1;
    setTimeout('fn_empezarCA();', 6000);
    }
    </script>

    </head>
    <body>

    <a href='' id='enlaceCA'><img id='imagenCA' src=''/></a><script language='javascript' type='text/javascript'>fn_empezarCA();</script>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    
    var imagenesCA = [
    ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','http://goplanettravel.blogspot.com/2009/10/central-america.html','Text 1'],
    ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://goplanettravel.blogspot.com/2009/10/central-america.html','Text 2']
    ];
    
    var imagenesCA2 = [
    ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','http://goplanettravel.blogspot.com/2009/10/central-america.html','Text 1'],
    ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://goplanettravel.blogspot.com/2009/10/central-america.html','Text 2'],
    ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://goplanettravel.blogspot.com/2009/10/central-america.html','Text 3']
    ];
    
    function fn_empezarCA(id,ary,ms,nu){
     var img=document.getElementById(id),lk=document.getElementById(id+'A'),d=document.getElementById(id+'D');
     if (img){
      nu=nu||0;
      img.src=ary[nu][0];
      if (lk){
       lk.removeAttribute('href');
       if (ary[nu][1]){
        lk.href = ary[nu][1];
       }
      }
      if (d){
       d.innerHTML=ary[nu][2]||'';
      }
      nu=++nu%ary.length;
      setTimeout(function(){ fn_empezarCA(id,ary,ms,nu); }, ms||1000);
     }
    }
    </script>
    
    </head>
    
    <body>
    <a href='' id='imagenCAA'><img id='imagenCA' src='' width="680" height="400"/></a><div id='imagenCAD' ></div>
    <a href='' id='imagenCA2A'><img id='imagenCA2' src='' width="200" height="150"/></a><div id='imagenCA2D' ></div>
    <script> vic=0; </script>
    <script type='text/javascript'>
     fn_empezarCA('imagenCA',imagenesCA,6000);
     fn_empezarCA('imagenCA2',imagenesCA2,2000);
    </script>
    </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 Coder
    Join Date
    Nov 2011
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for your reply.

    I was looking to introduce the text within the picture.

    Something like the attachment.


    Thanks
    Attached Thumbnails Attached Thumbnails Write test on an image in a slideshow-imagen.jpg  

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .text {
      position:absolute;top:-50px;height:20px;width:100px;text-Align:left;padding:5px;color:red;margin:6px;background-Color:#FFFFCC;
    /* Moz */
      opacity: .5;
    /* IE5-7 */
      filter: alpha(opacity=50);
    /* IE8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
    
    .text2 {
      position:absolute;;top:-50px;height:20px;width:200px;text-Align:center;color:white;margin-Top:130px;
    }
    
    /*]]>*/
    </style><script type="text/javascript">
    
    var imagenesCA = [
    ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','http://goplanettravel.blogspot.com/2009/10/central-america.html','Text 1'],
    ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://goplanettravel.blogspot.com/2009/10/central-america.html','Text 2']
    ];
    
    var imagenesCA2 = [
    ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','http://goplanettravel.blogspot.com/2009/10/central-america.html','Text 1'],
    ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://goplanettravel.blogspot.com/2009/10/central-america.html','Text 2'],
    ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://goplanettravel.blogspot.com/2009/10/central-america.html','Text 3']
    ];
    
    function fn_empezarCA(id,run,ms,ary,cls){
     var o=fn_empezarCA[id],img=document.getElementById(id),d,lk,p;
     if (!o&&img){
      if (typeof(cls)=='string'){
       d=document.createElement('DIV');
       d.className=cls;
       document.body.appendChild(d);
      }
      o=fn_empezarCA[id]={
       ary:typeof(ary)=='object'&&ary.constructor==Array?ary:false,
       d:d,
       ms:typeof(ms)=='number'&&ms>0?ms:2000,
       nu:0
      }
     }
     if (o){
      clearTimeout(o.to);
      if (run){
       if (o.ary[o.nu][0]){
        img.src=o.ary[o.nu][0];
        img.style.borderWidth='0px';
        lk=img.parentNode;
        lk.removeAttribute('href');
        if (o.ary[o.nu][1]){
         lk.href = o.ary[o.nu][1];
        }
        if (o.d){
         p=pos(img);
         o.d.style.left=p[0]+'px';
         o.d.style.top=p[1]+'px';
         o.d.innerHTML=o.ary[o.nu][2]||'';
        }
       }
       o.to=setTimeout(function(){ o.nu=++o.nu%o.ary.length; fn_empezarCA(id,true); },ms||o.ms);
      }
     }
    }
    
    function pos(obj){
     var rtn=[0,0];
     while(obj){
      rtn[0]+=obj.offsetLeft;
      rtn[1]+=obj.offsetTop;
      obj=obj.offsetParent;
     }
     return rtn;
    }
    
    function Resize(){
     // parameter 0 = the unique ID name of the image.                                   (string)
     // parameter 1 = true = auto rotate, false = pause.                                 (number)
     // parameter 2 = the auto rotate 'hold duration in milli seconds.                   (number)
     // parameter 3 = an array of arrays defining the SRCs, Link HREFs and caption text. (array, only required for initialization)
     // parameter 4 = the class name of the DIV to display the captions.                 (string, only required for initialization)
     fn_empezarCA('imagenCA',true,6000,imagenesCA,'text');
     fn_empezarCA('imagenCA2',true,2000,imagenesCA2,'text2');
    }
    
    window.onload=function(){
     Resize();
    }
    
    window.onresize=function(){
     Resize();
    }
    
    </script>
    
    </head>
    
    <body>
    <center>
    <a href='' ><img id='imagenCA' src='' width="680" height="400"/></a>
    <br />
    <a href=''><img id='imagenCA2' src='' width="200" height="150" onmouseover="fn_empezarCA('imagenCA2');" onmouseout="fn_empezarCA('imagenCA2',true,500);" /></a>
    </center>
    <div class="text2" >Riii</div>
    
    </body>
    
    </html>
    Last edited by vwphillips; 12-03-2012 at 03:38 PM. Reason: window resize and mouseover pause
    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/


  •  

    Posting Permissions

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