IMAGES

chmosiii · July 25th, 2005, 10:36 PM

Hi,:)

I'm learning CSS on my own, and I would like to be able to display celestial objects in a block named imgContainer defined in the html section below, and be able to change the image with another celestial object in the same block by just hovering above an <a> tag contained in another DIV block named linksID again in my html below.

I've tried different settings and was not able to change the image when I hovered over the <a> tag.

Here's the basic code below without the trick that I need you to show me in order for the code to work as I would like it to work.

Here's the external style sheet included properly.

#imgContainer
             {
                 margin:auto;
         width:200px;
                 padding:50px;
                 background-image:url(/earth.jpg);
                 background-repeat:no-repeat;
             display:block;
             }


#linksID p.logo_small a:hover
             {
                 background-image:url(/moon.jpg);
             }

and here is the html code :

<body>

<div id="imgContainer"></div>

<div id="linksID">
    <p class="logo_small">
         <a href="">Moon</a>
    </p>
</div>

</body>

Regards,

N.B : I would like to use CSS for that project unstead of JavaScript
     method for rollover.

Ramez

richard.york · July 28th, 2005, 07:55 PM

This looks like something you want to do with javascript. While CSS can do some mouseover effects, it isn't possible to select ancestors.

This script would actually be fairly trivial. Here's an example of how to do it.

Code:

    <head>
        <style type='text/css'>
            #imgContainer
             {
                margin: auto;
                width: 200px;
                padding: 50px;
                background: url('/earth.jpg') no-repeat;
                display: block;
             }
        </style>
        <script type='text/javascript'>
            var $image;
            var $obj = document.getElementById('imgContainer');

            function image_on()
            {
                // Put the original background in a global to save for later.
                $image = $obj.style.background;

                // Switch out the image
                $obj.style.background = "url('/path/to/replacement.jpg') no-repeat";
            }

            function image_off()
            {
                // Restore the original
                $obj.style.background = $image;
            }

            function attach_events()
            {
                // Get the object for the <a> element, 
                // attach mouseover and mouseout events
                var $a = document.getElementById('switch');

                $a.onmouseover = image_on;
                $a.onmouseout  = image_off;
            }

            // Attach those events
            window.onload = attach_events;
         </script>
    </head>
    <body> 
        <div id="imgContainer"></div> 
        <div id="linksID"> 
            <p class="logo_small">
                <a href="javascript:void(0);" id='switch'>Moon</a>       
            </p>
        </div>
    </body>

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

OldCoder · November 5th, 2005, 08:44 PM

Hi Ramez and Rich,

I would like to switch between 12 images, month1.gif, month2.gif,...,month12.gif.

How would I motify the above script to accomplish this? I don't know JavaScript, but maybe it would be something like:

Function swapImages( month )
{
     switch( month )
     {
        case 1: $obj.style.background = "url('/path/to/month1.gif') no-repeat";
                break;
        case 2: $obj.style.background = "url('/path/to/month2.gif') no-repeat";
                break;
        .
        .
        .
        case 12: $obj.style.background = "url('/path/to/month12.gif') no-repeat";
    }
}

<body>
      a href="javascript:void(0);" id='switch'>Moon</a>
</body>

Thanks
OldCoder

crmpicco · November 8th, 2005, 07:24 AM

just out of interest Richard

Code:

var $a

what is the dollar-sign used for?

$.

Picco

www.crmpicco.co.uk

richard.york · November 8th, 2005, 09:22 AM

Javascript variables can begin with a dollar sign, if desired.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

richard.york · November 8th, 2005, 10:03 AM

OldCoder, it'd look something like the following:

Approach 1, swap image automatically upon page load.

Code:

<html>
    <head>
        <style type='text/css'>
            div#month {
                width: 100px;
                height: 100px;
            }
        </style>
        <script type='text/javascript'>
            function getMonthImage()
            {
                var $date = new Date();
                var $month = $date.getUTCMonth();
                var $obj = document.getElementById('month');

                 switch($month)
                 {
                    // Jan
                    case 0: $obj.style.background = "url('/path/to/month1.gif') no-repeat";
                            break;
                    // Feb
                    case 1: $obj.style.background = "url('/path/to/month2.gif') no-repeat";
                            break;
                    .
                    .
                    .
                    // Dec
                    case 11: $obj.style.background = "url('/path/to/month12.gif') no-repeat";
                }
            }

            // Swap image automatically.
            window.onload = getMonthImage;
        </script>
    </head>
    <body>
          <div id='month'></div>  
    </body>
</html>

Approach 2, swap image upon clicking a link.

Code:

<html>
    <head>
        <style type='text/css'>
            /* If the <div> is empty and no dimensions are specified, 
               it will be invisible */
            div#month {
                width: 100px;
                height: 100px;
            }
        </style>
        <script type='text/javascript'>
            // This function is set up to fire off when the page loads
            function attachEvents()
            {
                // This makes the image be updated to the current month 
                // when the link is clicked.
                document.getElementById('swap').onclick = getMonthImage;
            }

            function getMonthImage()
            {
                // Get the date object
                var $date = new Date();

                // getUTCMonth is a method of the datae object
                // it returns the month as an integet 0 (Jan) to 11 (Dec).
                var $month = $date.getUTCMonth();

                // This is the element that the background image will be 
                // applied to
                var $obj = document.getElementById('month');

                 switch($month)
                 {
                    // Jan
                    case 0: $obj.style.background = "url('/path/to/month1.gif') no-repeat";
                            break;
                    // Feb
                    case 1: $obj.style.background = "url('/path/to/month2.gif') no-repeat";
                            break;
                    .
                    .
                    .
                    // Dec
                    case 11: $obj.style.background = "url('/path/to/month12.gif') no-repeat";
                }
            }

            window.onload = attachEvents;
        </script>
    </head>
    <body>
          <div id='month'></div>  
          <a href='javascript:void(0);' id='swap'>Get month image</a>
    </body>
</html>

Not usually one to just do it for you, but I hope you grasp what's going on and learn from it. :-)

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

richard.york · November 8th, 2005, 10:09 AM

You can also rewrite the following to be much simpler:

Code:

                 switch($month)
                 {
                    // Jan
                    case 0: $obj.style.background = "url('/path/to/month1.gif') no-repeat";
                            break;
                    // Feb
                    case 1: $obj.style.background = "url('/path/to/month2.gif') no-repeat";
                            break;
                    .
                    .
                    .
                    // Dec
                    case 11: $obj.style.background = "url('/path/to/month12.gif') no-repeat";
                }

Is equivalent to:

Code:

                $obj.style.background = "url('/path/to/month/" + ($month + 1) + ".gif') no-repeat";

Assuming month1.gif - month12.gif as the naming convention, and they exist in the same directory.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design