Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Random mouseover image with link

    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!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I'd do something like
    Code:
    <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>
    Code:
    <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>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #4
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    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
    •