www.webdeveloper.com
Results 1 to 3 of 3

Thread: Image Rollovers That Aren't Supposed to be Image Rollovers

  1. #1
    Join Date
    Jul 2009
    Posts
    15

    Unhappy Image Rollovers That Aren't Supposed to be Image Rollovers

    Hello,

    First off, thank you so much to everyone that has helped me with overcoming my Javascript disability... As a designer, my journey into this foreign land has been scary and oftentimes a little overwhelming.

    Having said this, my problem is as follows. I have a a script for image rollovers:

    // JavaScript Document
    window.onload = rolloverInit;

    function rolloverInit() {
    for (var i=0; i<document.images.length; i++) {
    if (document.images[i].parentNode.tagName == "A") {
    setupRollover(document.images[i]);
    }
    }
    }

    function setupRollover(thisImage) {
    thisImage.outImage = new Image();
    thisImage.outImage.src = thisImage.src;
    thisImage.onmouseout = rollOut;

    thisImage.overImage = new Image();
    thisImage.overImage.src = "rollOvers/" + thisImage.id + "_on.jpg";
    thisImage.onmouseover = rollOver;
    }

    function rollOut() {
    this.src = this.outImage.src;
    }

    function rollOver() {
    this.src = this.overImage.src;
    }

    So basically the idea is that if the image has an "A" tag for a parent, and an id, than that image rolls over. The problem is that all images with an "A" tag for a parent, even the ones that aren't supposed to rollover, flash sporadically. It's as if the browser is trying to make a rollover out of every image that has a link.

    The HTML for an image this is supposed to rollover looks like this:

    <a href="http://www.appleblossom.org/" onclick="LinkAlert();return true" onmouseover="rollOver()" onmouseout="rollOut()" title="Apple Blossom Festival" class="no_border" target="_blank"><img src="rollOvers/appleBlossom_off.jpg" alt="Buy tickets for the Apple Blossom Festival" width="150" height="100" id="appleBlossom" />Apple Blossom Festival</a>

    The HTML for an image this is NOT supposed to rollover looks like this:

    <a href="http://mvmvideo.com/"><img src="border/mvm_logo.png" border= "none" width="170" height="122" alt="Designed by Magaurn Video Media" /></a>


    The actual page is live and can be found by going to: http://mvmvideo.com/funtastic/buy_carnival_tickets.html

    If anyone can help me solve this problem, it would be terrific because I use this script for rollovers on all of my sites now and they all have the same problem.

    THANK YOU, THANK YOU, THANK YOU!
    Last edited by MultiMediaMan; 08-12-2009 at 01:20 PM.

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    I tested this in Firefox 3 and IE 7 and did not witness this behavior.

    But just to throw something out there -- you don't need to use javascript for this -- it can be done with CSS using background images for the links, and having the "rollover" image as the background on hover.

  3. #3
    Join Date
    Aug 2009
    Posts
    25
    I believe the problem is that your "rolloverinit()" event targets all Anchor elements, not just the ones with IDs. Simply add a unique name to each anchor element of the image you want to roll over, then use document.anchors instead of document.images to reference the elements.

    Code:
    function rolloverInit() {
    for (var i=0; i<document.anchors.length; i++) {
    if (document.anchors[i].name == "RollOverBeethoven") {
    setupRollover(document.anchors[i]);
    }

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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