...

View Full Version : Image Maps in a Javascript Slide Show



AlwaysLearning
01-29-2009, 04:37 AM
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:




<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....

vwphillips
01-29-2009, 10:53 AM
untested but if there is only one hot spot per image


<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum