Random mouseover image with link

[Alliesev]

Hi guys,

As a relative newcomer to Javascript this is killing me! Maybe someone can help...

I am trying to put an image on the front page of my website that changes to one of two random images on mouseover. This part was easy, and has been done (I got the code from http://www.joemaller.com/javascript/randomroll.shtml).

But what I am finding difficult is to make each image link to a different page.

For example, if the user mouseovers the main image and sees the 'thumbs up' image, then clicks on it, they should be taken to the 'thumbs up' page. And if the user mouseovers the main image and sees the 'thumbs down' image, then clicks on it, they should be taken to the 'thumbs down' page.

The site is here: www.uninvitedcritic.com

I think using 2 arrays is the way to go, but am not sure. Any help would be appreciated!

[abduraooft]

I'd do something like

<script type="text/javascript"><!--
// javascript random rollover

			
				roller= new Array();
				links=new Array();
				roller[1]= new Image(322,322)
				roller[1].src ='http://www.uninvitedcritic.com/ratings/wp-content/themes/MinimalistBlack/images/thumbsup_black.gif'
				roller[2]= new Image(322,322)
				roller[2].src ='http://www.uninvitedcritic.com/ratings/wp-content/themes/MinimalistBlack/images/thumbsdown_black.gif'
				links[1]='page1.htm';
				links[2]='page2.htm';
				
				showthis=0 				//prepares the repeat-preventing variable
				
				function RandomSwapOut() {		
				
															//the next line chooses the number to use in selecting the image
						
						showthis = parseInt((Math.random()*(roller.length-1))+1);	
										//the next line replaces the image with the new, random image
						var img=document.getElementById('uninvitedcritic');
						//alert(roller[showthis].src);
						img.src = roller[showthis].src; 
						img.parentNode.href=links[showthis];
						return true;	
				}


				function SwapBack() {	
					var img=document.getElementById('uninvitedcritic');
					img.src = "http://www.uninvitedcritic.com/uninvited.gif"; return true;	
				}
// -->
		</script>

<a href="http://www.uninvitedcritic.com/ratings/?page_id=15"><img 
id="uninvitedcritic" src="critic_files/uninvited.gif" 
onmouseover="RandomSwapOut()" onmouseout="SwapBack()" border="0" 
height="322" width="322"></a>

[Alliesev]

Wow, thanks for the super-fast response!

I gave it a go - it is very close but not quite right.

I am hoping that when a user clicks on the 'thumbs up' image it will always take them to 'http://www.uninvitedcritic.com/ratings/?page_id=15.htm', and when someone clicks on the 'thumbs down' image it will always take them to 'http://www.uninvitedcritic.com/ratings/?page_id=17.htm'. But which image appears on mouseover should still be random.

Hopefully that makes sense. Thanks again for your help!

[octhrope]

man... ive been trying to make this code work for two hours now and i cant get it. either it dosent swap for me or it wont display the image. all im trying to do is have a random image on mouse hover. then the link goes to a static page. thanks for any help. ie9, windows 7x64, expression web 4.