SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple Image Preview with javascript

    Hi

    I'm new with Javascript and I found a post with this code in this forum that preview multiple images with mouse over several images. The code is kinda jumbled up and I dunno how to piece it up properly. Its provided by Paul Wilkins in response to user Jscript.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
    <html xmlns="xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script>
    var container = document.getElementById('myGallery');
    var mouseImages = [
    {over: 'movedown1.gif', overend: 'an1.gif', out: 'moveup1.gif', outend: 'an2.gif'},
    {over: 'movedown2.gif', overend: 'an3.gif', out: 'moveup2.gif', outend: 'an4.gif'}
    ];
    var container = document.getElementById('myGallery');
    var images = document.getElementsByTagName('img');
    for (var i = 0; i< images.length; i++) {
    for (var rollover in mouseImages) {
    if (rollover.out == images[i].getAttribute('src')) {
    images[i].roll = rollover.out;
    images[i].onmouseover = rollOver;
    images[i].onmouseout = rollOut;
    }
    }
    }
    function rollOver() {
    var endImage = document.getElementById('endImage');
    this.setAttribute('src', this.roll.over);
    endImage.setAttribute('src', this.roll.overend);
    }
    function rollOut() {
    var endImage = document.getElementById('endImage');
    this.setAttribute('src', this.roll.out);
    endImage.setAttribute('src', this.roll.outend);
    }
    </head>

    <body>
    <div id="imgGallery">
    <p>
    <img src="menu1.bmp">
    <img src="menu2.bmp">
    </p>
    <img src="menu3.bmp">
    </div>
    <script src="rolloveImage.js"></script>
    </body>
    </html>


    Appreciate if anyone can help me piece this codes properly so i can study it.
    Thanks

    Darrennsz

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    This is a nice surprise.

    Place the script code at the bottom of the body, jsut before the </body>. If you don't want to do that then you'll have to use some technique to run the script after the page has loaded.

    As for the script in general, he was wanting to solve a specific situation where a rolover of one image would change not oly that image, but also another one at some different location. That is why there are over and out properties, as well as overend and outend properties for storing the related image files.

    Unless you're wanting this same scenario, there are better standard techniques for doing rollovers of images.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    Thanks I'm shock to see ya reply so soon. I have try to move th codes down but it seems its not recognised when i preview it in my browser.

    Is this how I'm suppose to put it ? Please guide me if there's any adjustments needed. Honestly speaking I'm so new I cant validate codes properly.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
    <html xmlns="xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    </head>

    <body>
    <div id="imgGallery">
    <p>
    <img src="menu1.bmp">
    <img src="menu2.bmp">
    </p>
    <img src="menu3.bmp">
    </div>
    <script src="rolloveImage.js"></script>

    <script>
    var container = document.getElementById('myGallery');
    var mouseImages = [
    {over: 'movedown1.gif', overend: 'an1.gif', out: 'moveup1.gif', outend: 'an2.gif'},
    {over: 'movedown2.gif', overend: 'an3.gif', out: 'moveup2.gif', outend: 'an4.gif'}
    ];
    var container = document.getElementById('myGallery');
    var images = document.getElementsByTagName('img');
    for (var i = 0; i< images.length; i++) {
    for (var rollover in mouseImages) {
    if (rollover.out == images[i].getAttribute('src')) {
    images[i].roll = rollover.out;
    images[i].onmouseover = rollOver;
    images[i].onmouseout = rollOut;
    }
    }
    }
    function rollOver() {
    var endImage = document.getElementById('endImage');
    this.setAttribute('src', this.roll.over);
    endImage.setAttribute('src', this.roll.overend);
    }
    function rollOut() {
    var endImage = document.getElementById('endImage');
    this.setAttribute('src', this.roll.out);
    endImage.setAttribute('src', this.roll.outend);
    }
    </body>
    </html>

    Regards
    Darren

  4. #4
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes Paul

    I'm exactly trying to do what your script is doing. Pointing on one or more images and causing another fixed area on the page to show related image depending on which image the mouse hovers to. I have searching across the webs for 2 days. But your codes seem to be the best that I can somehow understand. I just didnt manage to put it correctly to begin with..

    Regards
    Darren

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The HTML has an identifier of "imgGallery" whereas the javascript is trying to access 'myGallery' instead. make the javascript one 'imgGallery' and it will go a lot better.

    The related image, (overend and outend) uses an identifier of "endImage" on the image itself.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •