www.webdeveloper.com
Results 1 to 10 of 10

Thread: Daily image on a Webpage

  1. #1
    Join Date
    Aug 2014
    Posts
    5

    Daily image on a Webpage

    Hey!

    Here a question with some difficulty (for me) proposed by a beginner:

    I need to set a webpage showing a chosen image already prepared on a location (URL).

    I managed to write the code for the URL I need, and by miracle it works:

    Code:
    <a href=<p id="demo">
    http://www.site.com/PB/<script> var d=new Date()
    document.write(d.getMonth())
    document.write(d.getDate())
    </script>/today.jpg</a>

    What I don't know is, how to introduce that URL on a <img src="URL"> format so the image is shown on the webpage.

    Any hint?

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,438

    Lightbulb

    Try this instead...

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> HTML5 page </title>
    
    </head>
    <body>
    <a href="#" id="todaySite"></a>
    
    <script>
      var d=new Date();
      var today = 'http://www.site.com/PB/' + d.getMonth() + d.getDate()+'.jpg';
      var doc = document.getElementById('todaySite');
      doc.href = today;
      doc.innerHTML = today;
    </script>
    
    </body>
    </html>
    You can add an image if you want, but you will need to supply me with the URL of the image.

  3. #3
    Join Date
    Aug 2014
    Posts
    5
    Thank you JMRKER!!

    That gives an order to my chaos!

    The final step further I want to make is to introduce that URL on a <img src="URL"> format so the image is shown on the webpage.

    JMRKER, can you please help me?

    The code should be like you did, but introduction the image on the <body> :

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> HTML5 page </title>
    
    </head>
    <body>
    <a href="#" id="todaySite"></a>
    
    <img src=                 >
    
    <script>
      var d=new Date();
      var today = 'http://www.site.com/PB/' + d.getMonth() + d.getDate()+'.jpg';
      var doc = document.getElementById('todaySite');
      doc.href = today;
      doc.innerHTML = today;
    </script>
    
    </body>
    </html>

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,438

    Lightbulb

    All you need to do is insert the address of the image you wish to display.
    This is what I asked for in the last post.

    Substitute your own URL for the following image location.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> HTML5 page </title>
    
    </head>
    <body>
    <a href="#" id="todaySite"></a>
    <br />
    <img src="http://www.nova.edu/hpd/otm/pics/4fun/51.jpg">
    
    <script>
      var d=new Date();
      var today = 'http://www.site.com/PB/' + d.getMonth() + d.getDate()+'.jpg';
      var doc = document.getElementById('todaySite');
      doc.href = today;
      doc.innerHTML = today;
    </script>
    
    </body>
    </html>

  5. #5
    Join Date
    Aug 2014
    Posts
    5
    Thank you JMRKER for your fast answer!!

    Nice picture on' "http://www.nova.edu/hpd/otm/pics/4fun/51.jpg"

    But the picture that I what to show is the same one at <a href="#" id="todaySite"></a>

    Thank you for your time!!

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,438
    What image?

    The href formed is a site (page) that appears to be redirected to when you click on the link.
    Do a 'right' click and 'view source' of the page.

    There are several images on this site. Which image do you what to display?

  7. #7
    Join Date
    Aug 2014
    Posts
    5
    The site is not prepared. The address that apear on the code are generic.

    We are going to have a daily .jpg. The link for those daily images are defined by the code you have already wrote (thank you!).

    I need to find the way to insert that dynamic link inside a <ing src= > format.

    If that help you, I show you the code with functional links.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> HTML5 page </title>
    
    </head>
    <body>
    <a href="#" id="todaySite"></a>
    
    <img src=                 >
    
    <script>
      var d=new Date();
      var today = 'http://www.regojo-quinta.com/PuertoBahia/' + d.getMonth() + d.getDate()+'/hoy.jpg';
      var doc = document.getElementById('todaySite');
      doc.href = today;
      doc.innerHTML = today;
    </script>
    
    </body>
    </html>
    Again the result of this code needs to be inserted on a html page, and the only propose is to show a daily image.

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,438

    Smile

    Still a bit unclear of the concept, but see if this fits your needs...

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> HTML5 page </title>
    
    </head>
    <body>
    <a href="#" id="todaySite"></a>
    <br>
    <img src="" alt="" id="todayImage"><br>
    
    <script>
      var d=new Date();
      var today = 'http://www.regojo-quinta.com/PuertoBahia/' + d.getMonth() + d.getDate()+'/hoy.jpg';
      var doc = document.getElementById('todaySite');
      doc.href = today;
      doc.innerHTML = today;
      document.getElementById('todayImage').src = today;
      document.getElementById('todayImage').alt = today;
    </script>
    
    </body>
    </html>

  9. #9
    Join Date
    Aug 2014
    Posts
    5
    JMRKER, It woks.
    This is just a small part of a bigger work. It has to make a daily announcement of activities on a hotel, showing a banner that changes every day according to the activity of the day.

    Please, JMRKER, solve me a doubt: Why if I erase the line

    Code:
    <a href="#" id="todaySite"></a>
    the next line

    Code:
    <img src="" alt="" id="todayImage"><br>
    does not work?

    I ask you that because we probably will not show the URL in some cases. We need the URL just, on implement stage, to be sure we are pointing the right file.

    Thank you JMKER!!

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,438

    Red face

    If you just want the image to be displayed and then go to that same image when clicked to be displayed again,
    you can use the following...

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> HTML5 page </title>
    
    </head>
    <body>
    <a href="#" id="todaySite">
    <img src="" alt="" id="todayImage"><\a>
    
    <script>
      var d=new Date();
      var today = 'http://www.regojo-quinta.com/PuertoBahia/' + d.getMonth() + d.getDate()+'/hoy.jpg';
      var doc = document.getElementById('todaySite');
      doc.href = today;
    //  doc.innerHTML = today;
      document.getElementById('todayImage').src = today;
      document.getElementById('todayImage').alt = today;
    </script>
    
    </body>
    </html>
    If you want the image to be clicked and then link to another site, you will need to provide that URL
    or add some additional commands to the script above.

    If you remove the anchor tag <a....>, there will be errors induced if you don't also change the <script> section.
    Check your error console (F12) to see what the error messages are.
    Any errors that JS cannot resolved, just stops execution of all other commands in the script!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles