SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict Hero Doug's Avatar
    Join Date
    Nov 2003
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help With Planning Sun Like Splash

    I'd like to make something like the splash page at http://www.sun.com or http://www.ibm.com .

    I'd like a few tabs or boxes that when a user hovers their mouse over, the splash picture changes.

    This is my first attempt at using JavaScript, so I'm not entirely sure where the best spot to put the events are.

    I know I'll need an event on each tab (styled href) to send a signal to a function that will change the image. I can manage this much.

    However, I'm not sure how to actually change the image once the function is called. From what I can gather I need to assign an identifier to the image in question, and then use that identifier to change the img tag. Is this correct? If so, how would it be done?

    Also, it would be better if the image was a background image so I don't need to worry about quarky browsers messing up the layout, so would I be able to override a CSS setting instead?

    Thanks for the help.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    presuming that you're wanting to do image rollovers, here's a way of doing it that keeps things nice and clean.

    Code html4strict:
    <div id="nav">
        <a href="#info"><img src="image1.gif"></a>
        <a href="#about"><img src="image2.gif"></a>
    </div>

    Code javascript:
    var rollovers = [];
    rollovers['image1.gif'] = 'image1over.gif';
    rollovers['image2.gif'] = 'image2over.gif';
    var nav = document.getElementById('nav'),
        links = nav.getElementsByTagName('a'),
        linksLen = links.length,
        link,
        i,
        img,
    	src;
    for (i = 0; i < linksLen; i += 1) {
        link = links[i];
        img = link.getElementsByTagName('img')[0];
    	src = img.getAttribute('src');
        if (rollovers[src]) {
            img.onmouseover = function (img) {
                return function () {
                    setImage(this, img);
                }
            }(rollovers[src]);
            img.onmouseout = function (img) {
                return function () {
                    setImage(this, img);
                }
            }(src);
        }
    }
    function setImage(el, img) {
    	console.log('changing ', el, ' to ', img);
        el.setAttribute('img', img);
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict Hero Doug's Avatar
    Join Date
    Nov 2003
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, it's sort of like an image rollover, except that the links and images are seperated. I want to float the links over the image and change the image when someone mouses over it.

    I looked through your code, and luckly stumbled across a tutorial that illustrated how to set document elements, I got it working the way I want. The code is posted below if someone else wants to reference it.

    The Script
    [code]
    <script type="text/javascript" language="JavaScript">

    // Set images here
    var images = [];
    images['1'] = '1.jpg';
    images['2'] = '2.jpg';
    images['3'] = '3.jpg';

    // Obtain Splash Image Container
    var splash = document.getElementsByName("splash");

    // Update the image
    function change(number) {
    splash[0].style.background = "url('" + images[number] + "')";
    }

    </script>

    The HTML
    Code:
    <!-- Links to Control Splash Image -->
    <a onmouseover='change(1)' href='#'>Image One</a> - 
    <a onmouseover='change(2)' href='#'>Image Two</a> - 
    <a onmouseover='change(3)' href='#'>Image Three</a>
    
    <br /><br />
    
    <!-- Splash Image -->
    <div id='splash'>
        &nbsp;
    </div>
    The (external) CSS
    Code:
    div#splash {
        height: 50px; 
        width: 50px; 
        background: url('1.jpg');
    }
    pmw57 >> Thanks for taking the time to help.

  4. #4
    SitePoint Member
    Join Date
    Oct 2006
    Location
    Pennsylvania, USA
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just found this link which sounds like what you want to do.


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
  •