Hi there:
The code below lays out 3 divs, the 1st. div contains a slideshow, the 2nd. div is a container for the 3rd div which contains buttons to override the slideshow and replace it with a new image in the slidshow div.
All the above scenario works perfectly.
Where I run into trouble is as follows:
1. When a button is hover, the image needs to change but I already have a onmouseover() function for each button
2. When the image changes, it need to have a href to example: file8.php to open in _self - I have 2 commented lines in my changeIt function to show the last things I tried.
The currently functioning site is:
http://mbtech.products-and-services.ca
// div containing the slideshow
<div id="photoSlider" align="center">
// initial image displayed
<a href="javascript:gotoshow()"><img src="../cms/fckeditor/uploadfiles/common/people.png" name="slide" border=0 width=765 height=150/></a>
// javascript to load slideshow
<script>
//configure the paths of the images, plus corresponding target links if you want
slideshowimages"image1.jpg","image2.jpg","image3.jpg","image4.jpg")
slideshowlinks("file1.php","file2.php","file3.php","file4.php")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000
var whichlink=0
var whichimage=1
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)
}
// run the slideshow
slideIt()
// javascript to override slideshow from a image button in another div - replaces slideshow image with another image and allows that image to be clicked on to load a new page
function changeIt(imageName,objName,objLink){
var obj = document.getElementById(objName);
var imgTag = "<img src='"+imageName+"' border='0' height='150px' width='765px' />";
whichlink=whichimage
obj.innerHTML = imgTag;
// my problem lies after this point. I cannot seem to get teh 2 comments lines to work when uncommented
//var link = "<a href='"objLink"' />";
whichlink = whichimage
obj.innerHTML = imgTag;
//document.write = link;
return;
}
</script>
</div>
<div class="leftColumn_home">
<div class="upper_leftColumn">
<div> //div containing 4 buttons that replace photoSlider images with a new image and
<img border="0" hspace="20" alt="" vspace="2" width="181" height="43" src="button1.jpg" onclick="changeIt('image5.jpg','photoSlider','file5.php')" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</div>
<div>
<img border="0" hspace="20" alt="" vspace="2" width="181" height="43" src="button2.jpg" onclick="changeIt('image6.jpg','photoSlider','file6.php)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</div>
<div>
<img border="0" hspace="20" alt="" vspace="2" width="181" height="43" src="button3.jpg" onclick="changeIt('image7.jpg','photoSlider','file7.php)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</div>
<div>
<img border="0" hspace="20" alt="" vspace="2" width="181" height="43" src="button4.jpg" onclick="changeIt('image8.jpg','photoSlider','file8.php)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</div>
</div>
</div>I will greatly appreciate help with this as I have hashed trough all obj related javasctipt functions and searched tirelessly on the internet for this solution.
Best Regards,
dennishall