JavaScript - Imagemap With No Links Just Rollover Images

Hello,

I need the links to the rotating images to open in a new window. Is there an easy way to do this?

Here is my code:

[CODE]
<script type="text/javascript">
var preload_ctrl_images=true;

//And configure the image buttons' images he
var previmg='left.gif';
var stopimg='stop.gif';
var playimg='play.gif';
var nextimg='right.gif';

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["/pics/nav/home2/music-club_manatella.jpg", "", "/progs/main/manatella.pdf"];
slides[1] = ["/pics/nav/home2/teen-read-week2011.jpg", "", "/teens/teen-read-week2011.pdf"];
slides[2] = ["/pics/nav/home2/oceanway-express.jpg", "", "/lib/branches/OWY.html"];
slides[3] = ["/pics/nav/home2/jea-green.jpg", "", "/progs/jpl/home-energy-evaluation.html"];
slides[4] = ["/pics/nav/home2/childrens-summer-reading.jpg", "", "/kids/kids-summer-reading2011.pdf"];
slides[5] = ["/pics/nav/home2/teen-summer-reading.jpg", "", "/teens/teens-summer-reading2011.pdf"];
slides[6] = ["/pics/nav/home2/internet-safety.jpg", "", "/Training/Internet-Safety/internet-safety.html"];
slides.no_descriptions=1; //use for no descriptions displayed //use for no descriptions displayed
//above slide show uses only the defaults
</script>

<script src="http://jpl.coj.net/common/javascripts/swissarmy.js" type="text/javascript">
</script>
[CODE]

[URL]http://jpl.coj.net

Thank you so much for your help, Elbee

Hey

Im trying to add links in the images for EasySlide but I cant see to see where to put it.....

Here is the .js code:

Code:

/**
 * @author Bruno Bornsztein <bruno@missingmethod.com>
 * @copyright 2007 Curbly LLC
 * @package Glider
 * @license MIT
 * @url http://www.missingmethod.com/projects/glider/
 * @version 0.0.3
 * @dependencies prototype.js 1.5.1+, effects.js
 */
/*  Thanks to Andrew Dupont for refactoring help and code cleanup - http://andrewdupont.net/  */

Glider = Class.create();
Object.extend(Object.extend(Glider.prototype, Abstract.prototype), {
    initialize: function(wrapper, options){
        this.handStopped = false;
        this.animating = false;
        this.wrapper = $(wrapper);
        this.scroller = this.wrapper.down('div.scroller');
        this.contentDiv = this.scroller.down('div');
        this.current = $(this.contentDiv.children[0].id);
        this.sectionWidth = this.contentDiv.children[0].getWidth();
        this.slideRelations = {};

        this.options = Object.extend({
            effectType: 'mosaic',
            duration: 3.0,
            frequency: 3,
            eRows: Prototype.Browser.IE ? 3 : 6,
            eCols: Prototype.Browser.IE ? 6 : 12,
            eColor: '#FFFFFF'
        }, options || {});

        this.effects = {
            'scroll'        : this.scroll,
            'speedscroll'   : this.speedscroll,
            'fade'          : this.fade,
            'blend'         : this.blend,
            'mosaic'        : this.mosaic
        };

        this.sections = this.wrapper.getElementsBySelector('div.section');
        for (var i = 0; i < this.sections.length; i++) {
            var nextSibling = this.sections[i].nextSiblings()[0];
            if (nextSibling){
                this.slideRelations[this.sections[i].id] = nextSibling.id;
            } else {
                this.slideRelations[this.sections[i].id] = this.sections[0].id;
            }
            this.effects[this.options.effectType].bind(this)().prepare(this.sections[i], i);
        }

        this.events = {
            mouseover: this.pause.bind(this),
            mouseout: this.resume.bind(this)
        };

        this.addObservers();
		

        if (this.options.autoGlide) {
            this.start();
        } else {
            this.handStopped = true;
        }
    },
	
	

    scroll: function() {
        var glider = this;
        return {
            prepa  function(el, i) {
                if (i > 0) {
                    $(el).setStyle('left: ' + glider.sectionWidth + 'px;');
                } else {
                    glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
					
                }
            },
            animate: function(elementIdToShow, direction) {
                $(elementIdToShow).setStyle('left: ' + (direction === 'normal' ? glider.sectionWidth : -glider.sectionWidth) + 'px;');

                new Effect.Parallel([
                    new Effect.Move(elementIdToShow, {
                        sync: true,
                        x: 0,
                        y: 0,
                        mode: 'absolute'
                    }),
                    new Effect.Move(glider.current.id, {
                        sync: true,
                        x: direction === 'normal' ? -glider.sectionWidth : glider.sectionWidth,
                        y: 0,
                        mode: 'absolute'
                    })
                ], {
                    duration: glider.options.duration,
                    afterFinish: function() {
                        glider.setAnimating(false);
                    }.bind(glider)
                });

            }
        }
    },
	
	

    speedscroll: function() {
        var glider = this;
        return {
            prepa  function(el, i) {
                if (i > 0) {
                    $(el).setStyle('left: ' + glider.sectionWidth + 'px;');
                } else {
                    glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);

                }
            },
            animate: function(elementIdToShow, direction) {
                $(elementIdToShow).setStyle('left: ' + (direction === 'normal' ? glider.sectionWidth : -glider.sectionWidth) + 'px;');
                $(elementIdToShow).setStyle({zIndex: 5});
                $(glider.current.id).setStyle({zIndex: 1});
                var currentId = glider.current.id;

                new Effect.Move(elementIdToShow, {
                    x: 0,
                    y: 0,
                    mode: 'absolute',
                    transition: Effect.Transitions.linear,
                    duration: glider.options.duration / 2,
                    afterFinish: function() {
                        moveCurrent.cancel();
                        $(currentId).setStyle('left: ' + (direction === 'normal' ? -glider.sectionWidth : glider.sectionWidth) + 'px;');
                        glider.setAnimating(false);
                    }
                });

                var moveCurrent = new Effect.Move(glider.current.id, {
                    x: direction === 'normal' ? -glider.sectionWidth : glider.sectionWidth,
                    y: 0,
                    mode: 'absolute',
                    transition: Effect.Transitions.linear,
                    duration: glider.options.duration
                });
            }
        }
    },

    fade: function() {
        var glider = this;
        return {
            prepa  function(el, i) {
                if (i > 0) {
                    el.setOpacity(0);
                    $(el).setStyle({ zIndex : '0' });
                } else {
                    glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
                    $(el).setStyle({ zIndex : '998' });
                    $$('.easyslidecontrolwr')[0].setStyle({ zIndex : '999' });
                }
            },
            animate: function(elementIdToShow, direction) {
                $(elementIdToShow).setStyle({ zIndex : '998' });
                $(glider.current.id).setStyle({ zIndex : '0' });

                new Effect.Opacity(glider.current.id, {
                duration: glider.options.duration,
                from: 1.0,
                to: 0.0,
                afterFinish: function() {
                    new Effect.Opacity(elementIdToShow, {
                        duration: glider.options.duration,
                        from: 0.0,
                        to: 1.0,
                        afterFinish: function() {
                            glider.setAnimating(false);
                        }.bind(glider)
                    });

                }.bind(glider)
            });
            }
        }
    },

    blend: function() {
        var glider = this;
        return {
            prepa  function(el, i) {
                if (i > 0) {
                    el.setOpacity(0);
                    $(el).setStyle({ zIndex : '0' });
                } else {
                    glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
                    $(el).setStyle({ zIndex : '998' });
                    $$('.easyslidecontrolwr')[0].setStyle({ zIndex : '999' });
                }
            },
            animate: function(elementIdToShow, direction) {
                $(elementIdToShow).setStyle({ zIndex : '998' });
                $(glider.current.id).setStyle({ zIndex : '0' });
                new Effect.Parallel([
                    new Effect.Opacity(glider.current.id, {
                        sync: true,
                        duration: glider.options.duration,
                        from: 1.0,
                        to: 0.0
                    }),
                    new Effect.Opacity(elementIdToShow, {
                        sync: true,
                        duration: glider.options.duration,
                        from: 0.0,
                        to: 1.0
                    })
                ], {
                    duration: glider.options.duration,
                    afterFinish: function() {
                        glider.setAnimating(false);
                    }.bind(glider)
                });
            }
        }
    },

    mosaic: function() {
        var glider = this;
        var delayedAppear = function(eSquare) {
            var opacity = Math.random();
            new Effect.Parallel([
                new Effect.Appear ( eSquare, {from: 0, to: opacity, duration: this.options.duration} ),
                new Effect.Appear ( eSquare, {from: opacity, to: 0, duration: this.options.duration/1.25} )
            ], {sync: false});
        };
        return {
            prepa  function(el, i) {
                if (i > 0) {
                    el.setStyle({ zIndex : 0 });
                    el.hide();
                } else {
                    el.setStyle({ zIndex : 999 });
                    glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
					
					
                }
                if (i == (glider.sections.length - 1)) {
                    glider.eSquares 	= [];
                    var elDimension	 	= el.getDimensions();
                    var elWidth  		= elDimension.width;
                    var elHeight 		= elDimension.height;

                    var sqWidth 		= elWidth / glider.options.eCols;
                    var sqHeight 		= elHeight / glider.options.eRows;

                    $R(0, glider.options.eCols-1).each(function(col) {
                        glider.eSquares[col] = [];
                        $R(0, glider.options.eRows-1).each(function(row) {
                            var sqLeft = col * sqWidth;
                            var sqTop  = row * sqHeight;
                            glider.eSquares[col][row] = new Element('div').setStyle({
                                opacity         : 0,
                                backgroundColor : glider.options.eColor,
                                position        : 'absolute',
                                zIndex          : 5,
                                left            : sqLeft + 'px',
                                top             : sqTop + 'px',
                                width           : sqWidth + 'px',
                                height          : sqHeight + 'px'
                            });

                            el.up('div').insert(glider.eSquares[col][row]);
                        }.bind(glider))
                    }.bind(glider));
                }
            },

            animate: function(elementIdToShow, direction) {
                $(elementIdToShow).setStyle({ zIndex : 999 });
                $(glider.current.id).setStyle({ zIndex : 0 });
                new Effect.Parallel([
                    new Effect.Fade(glider.current.id, {sync: true}),
                    new Effect.Appear(elementIdToShow, {sync: true})
                ], {
                    duration: glider.options.duration,
                    afterFinish: function() {
                        glider.setAnimating(false);
                    }.bind(glider)
                });
                $R(0, glider.options.eCols-1).each(function(col) {
                    $R(0, glider.options.eRows-1).each(function(row) {
                        var eSquare = glider.eSquares[col][row];
                        var delay = Math.random() * (glider.options.duration / 3) * 1000;
                        setTimeout(delayedAppear.bind(glider, eSquare), delay);
                    }.bind(this))
                }.bind(this));
            }
        }
    },

    setAnimating: function(flag) {
        this.animating = flag;
        if (flag) {
            $$('.easyslidecontrolwr')[0].addClassName('disabled');
        } else {
            $$('.easyslidecontrolwr')[0].removeClassName('disabled');
        }
    },

    addObservers: function(){
        this.wrapper.observe('mouseover', this.events.mouseover);
        this.wrapper.observe('mouseout', this.events.mouseout);

        var descriptions = this.wrapper.getElementsBySelector('div.sliderdescription');
        descriptions.invoke('observe', 'mouseover', this.makeActive);
        descriptions.invoke('observe', 'mouseout', this.makeInactive);

        //Nubmbers
        var controls = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslidedirect');
        controls.invoke('observe', 'click', this.numClick.bind(this));

        //Arrows
        var stop = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslidestop');
        stop.invoke('observe', 'click', this.stop.bind(this));

        var play = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslideplay');
        play.invoke('observe', 'click', this.start.bind(this));

        var prev = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslideprev');
        prev.invoke('observe', 'click', this.previous.bind(this));

        var next = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslidenext');
        next.invoke('observe', 'click', this.next.bind(this));
    },

    numClick: function(event){
        var element = Event.findElement(event, 'a'); /*clicked link*/
        var nextElementId = element.href.split('#')[1];
        var direction = 'normal';
        for (var i in this.slideRelations) {
            if (i === this.current.id) {
                direction = 'normal';
                break;
            }
            if (i === nextElementId) {
                direction = 'reverse';
                break;
            }
        }
        this.animate(nextElementId, direction);
        Event.stop(event);
    },

    animate: function(elementIdToShow, direction){
        if (this.animating || this.current.id == elementIdToShow) {
            return;
        }
        this.setAnimating(true);
        this.toggleControl($$('a[href="#' + elementIdToShow + '"]')[0]);
		
	
        this.effects[this.options.effectType].bind(this)().animate(elementIdToShow, direction);

        this.current = $(elementIdToShow);
    },

    next: function(event){
        var nextMove = '';
        nextMove = this.slideRelations[this.current.id];
        this.animate(nextMove, 'normal');
        if (event) {
            Event.stop(event);
        }
    },

    previous: function(event){
        var prevMove = '';
        for (var i in this.slideRelations) {
            if (this.slideRelations[i] == this.current.id) {
                prevMove = i;
                break;
            }
        }
        this.animate(prevMove, 'reverse');
        if (event) {
            Event.stop(event);
        }
    },

    makeActive: function(event){
        var element = Event.findElement(event, 'div');
        element.addClassName('active');
    },

    makeInactive: function(event){
        var element = Event.findElement(event, 'div');
        element.removeClassName('active');
    },

    toggleControl: function(el){
        if (!el) return false;
        $$('.easyslidercontrol a').invoke('removeClassName', 'active');
        el.addClassName('active');
    },

    stop: function(event){
        this.handStopped = true;
        clearTimeout(this.timer);
        Event.stop(event);
    },

    start: function(event){
        this.handStopped = false;
        this.periodicallyUpdate();
        if (event) {
            Event.stop(event);
        }
    },

    pause: function(event){
        if (!this.handStopped) {
            clearTimeout(this.timer);
            this.timer = null;
        }
        Event.stop(event);
    },

    resume: function(event){
        if (!this.handStopped) {
            this.periodicallyUpdate();
        }
    },

    periodicallyUpdate: function(){
        if (this.timer != null) {
            clearTimeout(this.timer);
            this.next();
        }
        this.timer = setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency * 1000);
    }
});

Somewhere there each time a image appears I want it to go to a certain link (for example purposes: google.com). How can I do this?

I imagine there is a onClick event somewhere in there but I just cannot find it.

Thanks!

Hello, I am trying to connect images to some anchor tags, but each anchor matches a specific image. The aim is that when someone clicks on a certain link it will display an image (which is some text information). I have some code from a previous thread which I gained a really good script from the help. I'm not sure how to connect these anchors to the specific image. I'm sure this code only needs tweaking slightly to give me what I need.

Here is the code relevant to my issue:

HTML:
Code:

<div id="faqBox">
	 <h1 id="faqHeader"><u>F.A.Q's</u></h1>
	 <ul>
		 <li><a href="#" onclick="">What is the purpose of this website?</a></li>
		 <li><a href="#">What type of achievements would someone of had to do to be eligable?</a></li>
		 <li><a href="#">Why was this award created?</a></li>
		 <li><a href="#">How do we nominate somebody?</a></li>
		 <li><a href="#">How are people presented with this award?</a></li>
	 </ul>
</div>
<div id="faqInfoBox">
	 <img src="images/content1.png" name="allimage" id="allimage" alt="content1" border="0" />
</div>

CSS:
Code:

#faqInfoBox {width: 40%;
             border: 5px ridge;
			 height: 310px;
			 background: #606626;
			 float: right;
			 margin-right: 3%;}
			 
#faqBox ul li{font-family: trebuchet ms;
              line-height: 30px;
			  list-style-type: square;}

JS:
Code:

var imgArray = new Array(4);

     imgArray[0] = 'images/content1.png';
     imgArray[1] = 'images/content2.png';
     imgArray[2] = 'images/content3.png';
     imgArray[3] = 'images/content4.png';
     imgArray[4] = 'images/content5.png';
	 
	 var currIndex = 0;
 
     function imgChange(that)
     {
	 if(currIndex < myImages.length - 1) {
         that.src = myImages[++currIndex];
         }else {
         currIndex = 0;
         that.src = myImages[currIndex];
         }
     }

The JavaScript is what needs tweaking. I also have it uploaded to my free domain which you can find the site he http://abjava.host22.com/Site1/ if you would care to take a look.

I don't want to be fed the answer but just some pointers/tips on what I could do.

I was thinking of connecting the function to the anchor tags onclick event. But because I need the specific images to display when their relative link is clicked I know it could be harder to do this. I want to stack the images on top of each other and hide their display then when a link is clicked show it, when another is clicked, hide the first and show that one. (Please note,the last 4 images have not yet been created).

I can figure out to do the CSS for this so just any help on the JS side will be very helpful to me.

Thank you very much in advance if anyone can help.

Regards,

LC.

Hi. I'm Matthew, the creator of the Easing Slider Wordpress plugin. Currently I'm working on the next update of the slider which is to allow the user to assign a link to each image. This is working fine with the slide animations but is creating problems with the fade animation (note I'm using jQuery). Here are the two issues:

1) Using .animate({opacity:0}) & .animate({opacity:1}) the slider is only linking to the link assigned to the last image in the slider. The links are supposed to link: 1. google.com, 2. hotmail.com & 3. fadebook.com. However the slider is only linking to the last link (facebook.com).

2) Using .fadeIn & .fadeOut everything appears to work correctly and the links correspond to the images however when using the pagination before the image has finished fading can cause the images to disappear or appear not fully faded.

You can see the overall code he

http://pastebin.com/9JwaM9tg (check lines 72, 215 & 216)

Example (using .animate):
http://www.matthewruddy.com/demo/

I've spent ages trying to figure this out but I really am struggling and cannot find a solution. Many people use the fade effect and I don't particularly want to get rid of it but I will have to if I can't find a solution.

I would appreciate if anyone could help me out. Thanks in advance. Matthew.

hey guys this is my first post, looking at the sheer wwealth of knowledge on here i thought you guys would be the best people to ask.

I have created a photography website myself and coded it all in dreamweaver cs4. Now i have created it using html, as i didnt want to limit it to flash users and loading times etc etc. So today i found myself a nice simple slideshow tool that uses html and javascript. i created it using a site online (which i will not post as i dont think we are allowed to post to online sites).

The slideshow loads images up in the background, and it plays them in a random order.

Now i am able to define individual image links to either a url of the an image, or point it to individual images, listing them one by one in my coding, which as a photographer having differet galleries is goign to be a royal pain when i want to have new images showing up.

So my idea is to replace the code that retrieves in dividual images from url's, to replace it with a piece of code that will display an image from a list of about 7 or 8 folders on my server all containing images....

i.e. displays an image from the folder .../images/models/pic01.jpg then it brings up an iamge from a different folder .../images/portrait/pic08.jpg.

Is there a way to do this and how can i go about it?

this is the code i currently have:

Code:

<!-- configurable script -->
<script type="text/javascript">
theimage = new Array();


// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["/images/models/photo01.jpg", "", ""];
theimage[1]=["/images/models/photo02.jpg", "", ""];
theimage[2]=["/images/models/photo03.jpg", "", ""];
theimage[3]=["/images/models/photo04.jpg", "", ""];
theimage[4]=["/images/models/photo05.jpg", "", ""];

///// Plugin variables

playspeed=3000;// The playspeed determines the delay for the "Play" button in ms
dotrans=1; // if value = 1 then there are transitions played in IE
transtype='revealtrans';// 'blendTrans' or 'revealtrans'
transattributes='0';// duration=seconds,transition=#<24
//#####
//key that holds where in the array currently are
i=0;


//###########################################
//if random
function SetRandom() {
	tempimage = new Array();
	for(p=0; p<theimage.length; p++){
		for(p1=0; p1>-1; p1) {
			tempNum = Math.floor(Math.random()*theimage.length)
			if(!tempimage[tempNum]){
				tempimage[tempNum]=theimage[p];
				break;
			}
		}
	}
	for(p=0;p<theimage.length;p++)theimage[p]=tempimage[p];
}

//if random order
SetRandom()


//###########################################
window.onload=function(){

	//preload images into browser
	preloadSlide();

	//set transitions
	GetTrans();

	//set the first slide
	SetSlide(0);

	//autoplay
	PlaySlide();
}

//###########################################
function SetSlide(num) {
	//too big
	i=num%theimage.length;
	//too small
	if(i<0)i=theimage.length-1;

	//switch the image
	if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Apply()')
	document.images.imgslide.src=theimage[i][0];
	if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Play()')

}


//###########################################
function PlaySlide() {
	if (!window.playing) {
		PlayingSlide(i+1);
		if(document.slideshow.play){
			document.slideshow.play.value="   Stop   ";
		}
	}
	else {
		playing=clearTimeout(playing);
		if(document.slideshow.play){
			document.slideshow.play.value="   Play   ";
		}
	}
	// if you have to change the image for the "playing" slide
	if(document.images.imgPlay){
		setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
		imgStop=document.images.imgPlay.src
	}
}


//###########################################
function PlayingSlide(num) {
	playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}


//###########################################
//desc: picks the transition to apply to the images
function GetTrans() {
	//si=document.slideshow.trans.selectedIndex;

		if((document.slideshow.trans && document.slideshow.trans.selectedIndex == 0) || (!document.slideshow.trans && dotrans==0)){
		dotrans=0;
	}
	else if ((document.slideshow.trans && document.slideshow.trans.selectedIndex == 1) || (!document.slideshow.trans && transtype == 'blendTrans')){
		dotrans=1;
		transtype='blendTrans';
		document.imgslide.style.filter = "blendTrans(duration=1,transition=1)";
	}else{
		dotrans=1;
		transtype='revealtrans';
		if(document.slideshow.trans) transattributes=document.slideshow.trans[document.slideshow.trans.selectedIndex].value;
		document.imgslide.style.filter = "revealTrans(duration=1,transition=" +transattributes+ ")";
	}

}
//###########################################
function preloadSlide() {
	for(k=0;k<theimage.length;k++) {
		theimage[k][0]=new Image().src=theimage[k][0];
	}
}


</script>

then this is the little bit of html

Code:

<!-- slide show HTML -->
<form name="slideshow">

<table border="1" cellpadding="2" cellspacing="0">
<tr>
	<td align="center">
	<a href="#" onMouseOver="this.href=theimage[i][1];return false">
	<script type="text/javascript">
		document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
	</script>
	</a>
	</td>
</tr>
</table>

</form>
<!-- end of slide show HTML -->

hope someone can shed a little light on this for me

thank you

Chris

Hey guys,

Lookin' for a little help, not sure if it can even be done? hopefully someone has the answer.

I'm trying to design myself an online portfolio; here's what I got so far...

http://www.gregorymstevens.com/testsite/site.html

As you can see my navigation is represented by each bird on the tree (every bird is a link), when you rollver one of the green birds they turn white, however, I am looking to not only have the green bird rollver to white but ALSO have the "choose a" image on the bottom right change to the corresponding page.

For instance, when the mouse rolls over a bird-- this image:



will turn into this image:



while maintaining the original "white bird" rollover.



Hopefully I'm explaining this correctly -- Any help greatly appreciated!

this page will display new images when you mouseover the red and orange arrows on the menu on the right side in chrome, but not ff, ie, opera, and safari. Any ideas as to why these other browsers aren't running the code like chrome? guessing this is javascript related - anyone want to offer any clues?

Ahoy,

Lemme try to explain this as best as I can. Bullet points might help:
When someone clicks on an image here (http://gta.kwivia.co.uk/gta-iv/), the rest of the images collapse and become invisible Below the image, some links appear Also, there will be a "show other images" button which will then show the rest of the images
http://gta.kwivia.co.uk/gta-iv/

I will appreciate all solutions to this problem. If you need to know anything, simply ask me.

I'm having trouble with a 3-state rollover with rollClick staying active for a series of buttons. Each button reveals it's own content within the same page.

Here's a working example of what I have.

The roll in and out works fine at first, but after the second click the images start getting jumbled together. Something to do with the lastClick code at the bottom I think.

HTML-side my button images get class="rollover" and a unique id.

Code:

window.onload = rolloverInit;
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
function rolloverInit(){
	var rollOvers = document.getElementsByClassName("rollover");
	for(var i=0; i<rollOvers.length; i++){
		setupRollover(rollOvers[i]);
		}
}
function setupRollover(thisImage){
	//UP
	thisImage.outImage = new Image();
	thisImage.outImage.src = "images/" + thisImage.id + "1.gif";
	thisImage.onerror = thisImage;
	thisImage.onmouseout = rollOut;
	//OVER
	thisImage.clickImage = new Image();
	thisImage.clickImage.src = "images/" + thisImage.id + "2.gif";
	thisImage.onerror = rollOut;
	thisImage.onmousedown = rollClick;
	//DOWN
	thisImage.overImage = new Image();
	thisImage.overImage.src = "images/" + thisImage.id+"2.gif";
	thisImage.onerror = rollOut;
	thisImage.onmouseover = rollOver;
	thisImage.onmouseup = rollOver;
}
function rollOver() {
	this.src = this.overImage.src;
}
function rollOut() {
	this.src = this.outImage.src;
}
function rollClick() {
	if(lastClick){
	lastClick.onmouseout = rollOut;
	lastClick.src = this.outImage.src;
	}	
this.src = this.clickImage.src;
this.onmouseout = rollClick;
lastClick = this;
}
var lastClick = null;

What I'd also like, since these buttons act as tabs, is for the first button to already be in the rollClick active state on page load (since that button's content is already displayed by default). Is this possible?

Thanks for any help you can provide!

Hello, my first post here; and i am new to javascript i actually am just starting to learn the concept of javascript; and I am wondering....

if certain aspects of a website are made by using javascript such as

the part on facebook "My Account"; where on click it opens a "window" with options.

OR,
on amazon where the menu items pop out on rollover;;

can someone please tell me if they are acomplishing that by using javascript?

thank you and i appreciate who ever is reading this.

I have a div in my HTML that that when rolled over reveals an image.

I can't figure out how to place a random image from a set of 5 images to appear in the background of that div when it is rolled over again. Please help me!

I have a small .png on my site. I want to view at 250% when I rollover it.

Is there a way to have the 250% .png be centered vertically and horizontally where the 100% without making the 100% .png 250% bigger (ex. extra white space).

Any recommendations for other ways?

Okay so I am fairly new to Javascript and am having some difficulties getting this rollover to work. I've gotten this rollover code to work in multiple other pages and for some reason it just wont work for this page. The code is below, basically I have three buttons on the page that need to have a rollover effect to display an alternate image for each button, I started small to try and get just the first one to work and have not had any luck. Tried three different browsers, nothing. Any advice will be greatly appreciated.

Code:

<html>
<head>
<title>Ski Montana</title>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--

if (document.images) {
		photosUp = new Image

		photosDown = new Image

		

		photosUp.src = 'photosup.gif'

		photosDown.src = 'photosdown.gif'

}

		
          var images  = new Array(3);
          
          
          images[0] = new Image();
          images[1] = new Image();
          images[2] = new Image();

          
          images[0].src ="bannerad1.jpg"
          images[1].src ="bannerad2.jpg"
          images[2].src ="bannerad3.jpg"

          
          var outElm;
          
          
          var currentImageIndex = 0;
       
          var maxImageIndex = images.length-1;   
          
 
          function cycle(){        
           
                if (outElm) { 
           
                  outElm.src = images[currentImageIndex].src;
              
                  ++currentImageIndex;
        
                  if (currentImageIndex > maxImageIndex) {
                   
                        currentImageIndex = 0;
                  }
                }
          } 
          
         
          function initImageCycler(elmID){
                
                outElm = document.getElementById(elmID);
                      
                if (outElm) {
                  setInterval("cycle()", 2000);
                }
          } 

//-->
</SCRIPT>
</head>

<body bgcolor="#FFFFFF" onload="initImageCycler('adBanner');">
<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td width="15" height="6" valign="top"></td>
    <td width="103" height="6" valign="top"></td>
    <td width="10" height="6" valign="top"></td>
    <td width="9" height="6" valign="top"></td>
    <td width="176" height="6" valign="top"></td>
    <td width="1" height="6" valign="top"></td>
    <td width="96" height="6" valign="top"></td>
    <td width="1" height="6" valign="top"></td>
    <td width="209" height="6" valign="top"></td>
    <td width="11" height="6" valign="top"></td>
    <td width="6" height="6" valign="top"></td>
    <td width="133" height="6" valign="top"></td>
  </tr>
  <tr>
    <td width="15" height="89" valign="top"></td>
    <td width="103" height="89" valign="top"></td>
    <td width="10" height="89" valign="top"></td>
    <td width="503" height="89" colspan="7" valign="top"><img src="bannerad1.jpg" width="503" height="68" id="adBanner" alt="Ad Banners" /></td>
    <td width="6" height="89" valign="top"></td>
    <td width="133" height="89" valign="top"></td>
  </tr>
  <tr>
    <td width="15" height="108" valign="top"></td>
    <td width="103" height="108" valign="top"></td>
    <td width="10" height="108" valign="top"></td>
    <td width="9" height="108" valign="top"></td>
    <td width="483" height="222" colspan="5" rowspan="3" valign="top"> 
  <h1 align="center"><b><font size="+7">Welcome to Montana</font></b></h1>
  <h2 align="center"><font size="+7"><b><font size="+3">Home of the Wild West 
    and some of the Best Ski Slopes in the World</font></b></font></h2>
</td>
    <td width="11" height="108" valign="top"></td>
    <td width="6" height="108" valign="top"></td>
    <td width="133" height="108" valign="top"></td>
  </tr>
  <tr>
    <td width="15" height="2" valign="top"></td>
    <td width="103" height="2" valign="top"></td>
    <td width="10" height="2" valign="top"></td>
    <td width="9" height="2" valign="top"></td>
    <td width="11" height="2" valign="top"></td>
    <td width="6" height="2" valign="top"></td>
    <td width="133" height="114" rowspan="2" valign="top"><img src="skiban2.jpg" width="130" height="99"></td>
  </tr>
  <tr>
    <td width="15" height="112" valign="top"></td>
    <td width="103" height="158" rowspan="2" valign="top"><img src="montana1.gif" width="103" height="115"></td>
    <td width="10" height="112" valign="top"></td>
    <td width="9" height="112" valign="top"></td>
    <td width="11" height="112" valign="top"></td>
    <td width="6" height="112" valign="top"></td>
  </tr>
  <tr>
    <td width="15" height="46" valign="top"></td>
    <td width="10" height="46" valign="top"></td>
    <td width="9" height="46" valign="top"></td>
    <td width="176" height="46" valign="top"></td>
    <td width="97" height="46" colspan="2" valign="top"><a href="photos.htm" onMouseover="document.rollover.src=photosDown.src" onMouseout="document.rollover.src=photosUp.src"><img name="rollover" src="photosup.gif" border=0></a></td>
    <td width="1" height="46" valign="top"></td>
    <td width="209" height="46" valign="top"></td>
    <td width="11" height="46" valign="top"></td>
    <td width="6" height="46" valign="top"></td>
    <td width="133" height="46" valign="top"></td>
  </tr>
  <tr>
    <td width="15" height="44" valign="top"></td>
    <td width="103" height="44" valign="top"></td>
    <td width="10" height="44" valign="top"></td>
    <td width="9" height="44" valign="top"></td>
    <td width="176" height="44" valign="top"></td>
    <td width="1" height="44" valign="top"></td>
    <td width="97" height="44" colspan="2" valign="top"><a href="resorts.htm" onMouseover="document.rollover.src=resortsdown.src" onmouseout="document.rollover.src=resortsup.src"><img src="resortsup.gif" width="97" height="30" border="0" name="rollover"></a></td>
    <td width="209" height="44" valign="top"></td>
    <td width="11" height="44" valign="top"></td>
    <td width="6" height="44" valign="top"></td>
    <td width="133" height="44" valign="top"></td>
  </tr>
  <tr>
    <td width="15" height="49" valign="top"></td>
    <td width="103" height="49" valign="top"></td>
    <td width="10" height="49" valign="top"></td>
    <td width="9" height="49" valign="top"></td>
    <td width="176" height="49" valign="top"></td>
    <td width="97" height="49" colspan="2" valign="top"><a href="contactus.htm" onmouseover="document.rollover.src=contactusdown.src" onmouseout="document.rollover.src=contactusup.src"><img src="contactusup.gif" width="97" height="30" border="0" name="rollover"></a></td>
    <td width="1" height="49" valign="top"></td>
    <td width="209" height="49" valign="top"></td>
    <td width="11" height="49" valign="top"></td>
    <td width="6" height="49" valign="top"></td>
    <td width="133" height="49" valign="top"></td>
  </tr>
  <tr>
    <td width="15" height="1" valign="top"><img width="15" height="1" src="transparent.gif"></td>
    <td width="103" height="1" valign="top"><img width="103" height="1" src="transparent.gif"></td>
    <td width="10" height="1" valign="top"><img width="10" height="1" src="transparent.gif"></td>
    <td width="9" height="1" valign="top"><img width="9" height="1" src="transparent.gif"></td>
    <td width="176" height="1" valign="top"><img width="176" height="1" src="transparent.gif"></td>
    <td width="1" height="1" valign="top"><img width="1" height="1" src="transparent.gif"></td>
    <td width="96" height="1" valign="top"><img width="96" height="1" src="transparent.gif"></td>
    <td width="1" height="1" valign="top"><img width="1" height="1" src="transparent.gif"></td>
    <td width="209" height="1" valign="top"><img width="209" height="1" src="transparent.gif"></td>
    <td width="11" height="1" valign="top"><img width="11" height="1" src="transparent.gif"></td>
    <td width="6" height="1" valign="top"><img width="6" height="1" src="transparent.gif"></td>
    <td width="133" height="1" valign="top"><img width="133" height="1" src="transparent.gif"></td>
  </tr>
</table>
</body>
</html>

I'm having an issue with the main logo in the navigation bar, each time I hover over it, it searches for the rollover image. I only want this javascript function to be activated over the div "navigation_menu"

here's the html code for the logo
<div id="nav">
<a href="index.php"> <img src="images/logo_05.jpg" alt="Home Page"/></a>
</div><!-- nav -->

here's the javascript code that's causing the problems
window.onload = rolloverInit;

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

any help would be very appreciated