50 users online (0 members and 50 guests)  


  Results 1 to 7 of 7

Related

  1. FriEnd ADDERs    Forum: Myspace Forum
    Replies: 2
  2. Replies: 1
  3. Tell a Friend Form    Forum: Website Scripts Forum
    Replies: 3
  4. Why cant my friend see graphics?    Forum: HTML Forum
    Replies: 11
  1. #1
    ericjiii's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2007
    Posts
    6

    Doing a friend a favor

    Hi.
    A friend of mine asked me if I could look at one of his java scripts in order to get it working. Unfortunately I am stumped and was wondeirng if somebody with a bit more experience than myself can look it over and help me identify what is wrong .

    <SOURCE ATTACHED>
    The mouseover does not appear to be working. The gif appears and if I click on it (the gif) I can get a new window to open and the image will load. However, the mouseover does not work. Can anybody help me? Thanks in advance.
    Attached Files Attached Files

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Doing a friend a favor

    Hi there ericjiii,

    as document.write() is deprecated you will find that I have made some modifications that bring the script into the twenty first century.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>the thong collection</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #container {
        width:136px;
        padding:5px;
        background-color:#333;
        text-align:center;
        margin:auto;
     }
    #thong img {
        width:136px;
        height:140px;
        display:block;
        border:0 solid;
     }
    #thong {
        font-family:verdana,sans-serif;
        font-size:14px;
        color:#fff;
        text-decoration:none;
        display:block;
     }
    </style>
    
    <script type="text/javascript">
    
      var image10=new Image();
      var imageDir='http://2005.rock103.com/pages/bod/thong/';
      var d=new Date();
      var month=String(d.getMonth()+1);
      var day=String(d.getDate());
      var year=String(d.getUTCFullYear());
      var imagename; 
    
    if(d.getMonth()<10){
      imagename='0'+month;
     }
    else {
       imagename=month;
     }
    if(d.getDate()<10){
       imagename=imagename+'0'+day;
     }
    else {
       imagename=imagename+day;
     }
       imagename=imagename+year.substr(2);
       image10.src=imageDir+imagename+'.jpg';
    
    window.onload=function() {
       document.getElementById('thong').href=image10.src;
       document.getElementById('thong').onmouseover=function(){
       this.firstChild.src=image10.src;
     }
       document.getElementById('thong').onmouseout=function(){
       this.firstChild.src='http://www2.bc.edu/~olivieri/animated_gifs/football_spinning.gif';
     }
    }
    </script>
    
    </head>
    <body>
    
    <div id="container">
    <a id="thong" href="#"><img src="http://www2.bc.edu/~olivieri/animated_gifs/football_spinning.gif" alt=""/>BONUS BABE</a>
    </div>
    
    </body>
    </html>
    

  3. #3
    ericjiii's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2007
    Posts
    6

    Re: Doing a friend a favor

    Quote Originally Posted by coothead View Post
    Hi there ericjiii,

    as document.write() is deprecated you will find that I have made some modifications that bring the script into the twenty first century.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>the thong collection</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     
    <style type="text/css">
    #container {
       width:136px;
       padding:5px;
       background-color:#333;
       text-align:center;
       margin:auto;
    }
    #thong img {
       width:136px;
       height:140px;
       display:block;
       border:0 solid;
    }
    #thong {
       font-family:verdana,sans-serif;
       font-size:14px;
       color:#fff;
       text-decoration:none;
       display:block;
    }
    </style>
     
    <script type="text/javascript">
     
     var image10=new Image();
     var imageDir='http://2005.rock103.com/pages/bod/thong/';
     var d=new Date();
     var month=String(d.getMonth()+1);
     var day=String(d.getDate());
     var year=String(d.getUTCFullYear());
     var imagename; 
     
    if(d.getMonth()<10){
     imagename='0'+month;
    }
    else {
      imagename=month;
    }
    if(d.getDate()<10){
      imagename=imagename+'0'+day;
    }
    else {
      imagename=imagename+day;
    }
      imagename=imagename+year.substr(2);
      image10.src=imageDir+imagename+'.jpg';
     
    window.onload=function() {
      document.getElementById('thong').href=image10.src;
      document.getElementById('thong').onmouseover=function(){
      this.firstChild.src=image10.src;
    }
      document.getElementById('thong').onmouseout=function(){
      this.firstChild.src='http://www2.bc.edu/~olivieri/animated_gifs/football_spinning.gif';
    }
    }
    </script>
     
    </head>
    <body>
     
    <div id="container">
    <a id="thong" href="#"><img src="http://www2.bc.edu/~olivieri/animated_gifs/football_spinning.gif" alt=""/>BONUS BABE</a>
    </div>
     
    </body>
    </html>
    Thanks!
    Sorry for not getting back to you sooner. I was out on vacation when you responded.
    So if my friend wanted to add mulitple images he wouldn't need to add anything to the stylesheet elements and just the script. Could you provide me with an example of what the second window.onload funtion would look like? Thanks in advance.

  4. #4
    ericjiii's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2007
    Posts
    6

    Re: Doing a friend a favor

    I took a stab at it. See Attached.

    The second mouseover works but the first one breaks.

  5. #5
    ericjiii's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2007
    Posts
    6

    Re: Doing a friend a favor

    I took a stab at it. See Attached.

    The second mouseover works but the first one breaks.
    Attached Files Attached Files

  6. #6
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Doing a friend a favor

    Hi there ericjiii,
    I took a stab at it. See Attached.
    I could not find an attachment.

    Try this modification, it may suit your requirements...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>the thong collection</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #container {
        width:138px;
        padding:4px;
        border:1px solid #000;
        background-color:#333;
        text-align:center;
        margin:auto;
     }
    .thong {
        font-family:verdana,sans-serif;
        font-size:14px;
        color:#fff;
        text-decoration:none;
     }
    .thong img {
        width:136px;
        height:140px;
        border:1px solid #fff;
        cursor:pointer;
        display:block;
        margin:2px 0;
     }
    
    </style>
    
    <script type="text/javascript">
    window.onload=function() {
     anc=document.getElementById('container').getElementsByTagName('a');
      var image10=new Image();
      var imageDir='http://2005.rock103.com/pages/bod/thong/';
      var d=new Date();
      var month=String(d.getMonth()+1);
      var day=String(d.getDate());
      var year=String(d.getUTCFullYear());
      var imagename=new Array(); 
    for(c=0;c<anc.length;c++){
    if(d.getMonth()<10){
      imagename[c]='0'+month;
     }
    else {
       imagename[c]=month;
     }
    if(d.getDate()<10){
       imagename[c]=imagename[c]+'0'+(day-c);
     }
    else {
       imagename[c]=imagename[c]+(day-c);
     }
       imagename[c]=imagename[c]+year.substr(2);
       image10.src=imageDir+imagename[c]+'.jpg';
    
    
    anc[c].href=image10.src;
    anc[c].onmouseover=function() {
       this.firstChild.src=this.href;
     }
    anc[c].onmouseout=function() {
       this.firstChild.src='http://www2.bc.edu/~olivieri/animated_gifs/football_spinning.gif'
       }
      }
     }
    
    </script>
    
    </head>
    <body>
    
    <div id="container">
    <a class="thong" href="#"><img src="http://www2.bc.edu/~olivieri/animated_gifs/football_spinning.gif" alt=""/>BONUS BABE 1</a>
    <a class="thong" href="#"><img src="http://www2.bc.edu/~olivieri/animated_gifs/football_spinning.gif" alt=""/>BONUS BABE 2</a>
    <a class="thong" href="#"><img src="http://www2.bc.edu/~olivieri/animated_gifs/football_spinning.gif" alt=""/>BONUS BABE 3</a>
    <a class="thong" href="#"><img src="http://www2.bc.edu/~olivieri/animated_gifs/football_spinning.gif" alt=""/>BONUS BABE 4</a>
    </div>
    
    </body>
    </html>

  7. #7
    ericjiii's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2007
    Posts
    6

    Re: Doing a friend a favor

    Quote Originally Posted by coothead View Post
    Hi there ericjiii,

    I could not find an attachment.

    Try this modification, it may suit your requirements...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>the thong collection</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     
    <style type="text/css">
    #container {
      width:138px;
      padding:4px;
      border:1px solid #000;
      background-color:#333;
      text-align:center;
      margin:auto;
    }
    .thong {
      font-family:verdana,sans-serif;
      font-size:14px;
      color:#fff;
      text-decoration:none;
    }
    .thong img {
      width:136px;
      height:140px;
      border:1px solid #fff;
      cursor:pointer;
      display:block;
      margin:2px 0;
    }
     
    </style>
     
    <script type="text/javascript">
    window.onload=function() {
    anc=document.getElementById('container').getElementsByTagName('a');
    var image10=new Image();
    var imageDir='http://2005.rock103.com/pages/bod/thong/';
    var d=new Date();
    var month=String(d.getMonth()+1);
    var day=String(d.getDate());
    var year=String(d.getUTCFullYear());
    var imagename=new Array(); 
    for(c=0;c<anc.length;c++){
    if(d.getMonth()<10){
    imagename[c]='0'+month;
    }
    else {
     imagename[c]=month;
    }
    if(d.getDate()<10){
     imagename[c]=imagename[c]+'0'+(day-c);
    }
    else {
     imagename[c]=imagename[c]+(day-c);
    }
     imagename[c]=imagename[c]+year.substr(2);
     image10.src=imageDir+imagename[c]+'.jpg';
     
     
    anc[c].href=image10.src;
    anc[c].onmouseover=function() {
     this.firstChild.src=this.href;
    }
    anc[c].onmouseout=function() {
     this.firstChild.src='http://www2.bc.edu/~olivieri/animated_gifs/football_spinning.gif'
     }
    }
    }
     
    </script>
     
    </head>
    <body>
     
    <div id="container">
    <a class="thong" href="#"><img src="http://www2.bc.edu/~olivieri/animated_gifs/football_spinning.gif" alt=""/>BONUS BABE 1</a>
    <a class="thong" href="#"><img src="http://www2.bc.edu/~olivieri/animated_gifs/football_spinning.gif" alt=""/>BONUS BABE 2</a>
    <a class="thong" href="#"><img src="http://www2.bc.edu/~olivieri/animated_gifs/football_spinning.gif" alt=""/>BONUS BABE 3</a>
    <a class="thong" href="#"><img src="http://www2.bc.edu/~olivieri/animated_gifs/football_spinning.gif" alt=""/>BONUS BABE 4</a>
    </div>
     
    </body>
    </html>
    Thanks! Unfortunately I'm not sure I understand it completely nor am I sure it's what my friend wants. First let me clarify what my friend is looking for and second maybe you could help me understand your latest code for my own learning experience (even if it isn't exactly what my friend desires)?
    (1) If I understand my friend correctly he would like to have a collection of images that change daily. The URL provided in the code is one site that happens to have new images that load daily. So he wanted to be able to change the URL to reflect the latest daily image. He wanted to be able to add other URLs that also might have images that update daily. For example, there would be a daily image from site #1, a daily image from site #2, site #3 etc etc.
    (2) In your code, is 'anc' being set to the # of anchor tags? Can you try and summarize what's going on in the for loop?

    Also, would there be an 'easy' way of making the images display left to right instead of up to down?



Tags for this Thread