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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image Maps in a Javascript Slide Show

    I used code from javascriptkit to create my slide show, but now I need to have hotspots on each image that will link to different pages of the website. BAsically, there are 4 images and each image has a row of 4 menu options (depending on the image shown, a different menu option is highlighted on the graphic) on the bottom that need to be working links from the slide show.

    I thought I could just create an image map and associate it with each image as it rotated through the slide show, and I started to do so in the code below, but then I realized I'm not sure how to code it. The code so far is below:

    Code:
    <tr><!--graphic slide show -->
    								<td>	
    								<!--this is where the slide show graphic will go.  -->
    									<a href="javascript:gotoshow()">
    									<img src="../plumbing/images/DiveRightInWithMenu.jpg" name="slide" border=0 width="632" height="332"
    										alt="GraphicMenu"usemap="#GraphicMenu" 
    									/></a>
    									
    									<!--this is where I thought I could use an image map, but it doesn't apply to each slide in the slide show....-->
    									<map name="GraphicMenu" id="GraphicMenu">
    										<area  shape="rect"
    										       coords="0,0,632,296"
    										         href="http:/www.fwu.org/Flashcards/BrowseFlashcardCategory.aspx?BrowseSchools=true"
    								        />
    									</map>
    									
    									
    									<script>									<!--
    									//configure the paths of the images, plus corresponding target links		
    							slideshowimages("../plumbing/images/DiveRightIn.jpg",
    									"../plumbing/images/HowItStarted.jpg", 
    									"../plumbing/images/NewToSite.jpg", 
    									"../plumbing/images/Diplomas.jpg")
    									slideshowlinks("http:/www.fwu.org/Flashcards/BrowseFlashcardCategory.aspx?BrowseSchools=true", 
    									"../static/videos.aspx", 
    									"../static/Students.aspx", 
    									"../static/Diplomas.aspx")
    									//configure the speed of the slideshow, in miliseconds	
    								var slideshowspeed=8000
    									var whichlink=0
    									var whichimage=0
    									function slideit(){
    									if (!document.images)
    									return
    									document.images.slide.src=slideimages[whichimage].src
    									whichlink=whichimage
    									if (whichimage<slideimages.length-1)
    									whichimage++
    										else
    										whichimage=0
    										setTimeout("slideit()",slideshowspeed)
    									}
    									slideit()
    
    									//-->
    									</script>
    I tried to format this message to make it easier to read, but am unaccustomed to posting in forums, so if I apologize if I made it more confusing....
    Last edited by AlwaysLearning; 01-29-2009 at 04:40 AM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    untested but if there is only one hot spot per image

    Code:
    <script type="text/javascript">
    <!--
    //configure the paths of the images, plus corresponding target links
    
    var slideshowimages=[];
    slideshowimages[0]="../plumbing/images/DiveRightIn.jpg";
    slideshowimages[1]="../plumbing/images/HowItStarted.jpg";
    slideshowimages[2]="../plumbing/images/NewToSite.jpg";
    slideshowimages[3]="../plumbing/images/Diplomas.jpg";
    
    var	slideshowlinks=[];
    slideshowlinks[0]="http:/www.fwu.org/Flashcards/BrowseFlashcardCategory.aspx?BrowseSchools=true";
    slideshowlinks[1]="../static/videos.aspx";
    slideshowlinks[2]="../static/Students.aspx";
    slideshowlinks[3]="../static/Diplomas.aspx";
    
    var	slideshowcoords=[];
    slideshowcoords[0]="0,0,632,296";
    slideshowcoords[1]="0,0,632,296";
    slideshowcoords[2]="0,0,632,296";
    slideshowcoords[3]="0,0,632,296";
    
    
    		//configure the speed of the slideshow, in miliseconds
    var slideshowspeed=8000
    var whichlink=0
    var whichimage=0
    
    function slideit(){
     if (!document.images) return;
     document.images.slide.src=slideshowimages[whichimage].src;
     var area=document.getElementById('GraphicMenu').getElementsByTagName('AREA')[0];
     area.coords=slideshowcoords[whichimage];
     area.href=slideshowlinks[whichimage];
     if (whichimage<slideshowimages.length-1) whichimage++;
     else whichimage=0;
     setTimeout(function(){ slideit(); },slideshowspeed);
    }
    
    slideit()
    
    //-->
    </script>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •