Results 1 to 2 of 2

Thread: changing image each day

  1. #1
    Join Date
    Apr 2022
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default changing image each day

    I'm using the following script to change an image each day showing the date etc... But it doesn't resize for iphones ... Looks great on a pc... Can anyone help me so it will fit all screens the same...

    Code:
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    today = new Date();
    day = today.getDay();
    arday = new Array("sunday.jpg", "monday.jpg", "tuesday.jpg",
    "wednesday.jpg", "thursday.jpg", "friday.jpg", "saturday.jpg");
    document.write("<img src='" + arday[day] + "'>");
    // End -->
    </SCRIPT>
    <script>
    document.write(dateMsg());
    </script>
    Thanks Tony
    Last edited by james438; 04-03-2022 at 06:17 PM. Reason: format

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,272
    Thanks
    3
    Thanked 284 Times in 277 Posts

    Default

    Hi there Maxwell007,

    and a warm welcome to these forums.

    I am sorry but I overlooked your post.

    Just in case you have not found a satisfactory
    solution to your problem here is one...

    Code:
    <!DOCTYPE HTML>
    <html lang='en'>
    <head>
    
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,height=device-height,initial-scale=1'>
    
    <title>daily image</title>
    
    <link rel='stylesheet' href='screen.css' media='screen'>
    
    <style media='screen'>
    body {
        background-color: #f9f9f9;
        font: normal 1em / 1.5em  sans-serif;
     }
     h1 {
       font-size: 1.5em;
       color: #444;
       text-align: center;
     }
     #weekday {
       margin-left: 0.5em; 
    }
     #image-container{
        max-width: 50em;
        padding: 0.5em;           /* this can be removed */
        border: 1px solid #000;   /* this can be removed */
        background-color: #fff;   /* this can be removed */
        box-shadow: 0.4em 0.4em 0.4em rgba(0,0,0,0.4);   /* this can be removed */
        margin: 1em auto;
        text-align: center; 
     }
     #daily-image {
        display: block;
        width:  100%;
        height: auto;
        border: 1px solid #888;   /* this can be removed */
        background-color: #ccc;   /* this can be removed */
    
     }
    </style>
    
    </head>
    <body>
    
    <h1>Your image for<span id="weekday"></span></h1>
    
     <div id="image-container">
       <img id="daily-image" src="sunday.jpg" alt="sunday">
     </div>
    
    <script>
       var today = new Date(),
             day = today.getDay(),
             img = document.getElementById('daily-image'),
             spn = document.getElementById('weekday'),
           arday = [
             'sunday.jpg', 'monday.jpg', 'tuesday.jpg','wednesday.jpg', 
             'thursday.jpg', 'friday.jpg', 'saturday.jpg'
             ];
    
          img.src = arday[day];
          img.alt = arday[day].split('.')[0];
          spn.textContent = img.alt;
    </script>
    
    </body>
    </html>
    coothead
    ~ the original bald headed old fart ~

Similar Threads

  1. Dynamically changing image color and specific items on image...
    By Nuwanda in forum Looking for such a script or service
    Replies: 1
    Last Post: 04-28-2013, 03:52 AM
  2. Changing parts of an image
    By [Nicolas] in forum Looking for such a script or service
    Replies: 1
    Last Post: 02-02-2011, 12:23 AM
  3. Changing Image
    By wizkidweb in forum CSS
    Replies: 3
    Last Post: 09-18-2006, 09:41 PM
  4. Help Changing Color To Image
    By Big Red in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 02-17-2006, 07:01 AM
  5. Help Changing Color To Image
    By Big Red in forum HTML
    Replies: 0
    Last Post: 02-15-2006, 01:47 AM

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
  •