Results 1 to 3 of 3

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

Threaded View

  1. #1
    Join Date
    Jul 2009

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


    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") {

    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.

    Last edited by MultiMediaMan; 08-12-2009 at 01:20 PM.

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