954,180 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

Javascript unable to create href in div and unable to apply second mouseover function

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

dennishall
Junior Poster in Training
71 posts since Nov 2009
Reputation Points: 10
Solved Threads: 1
 

UPDATE: I removed teh onmouseover() and onmouseout() functions in the buttons and get it from my css (my bad on that basic oversight).

My issue is only as follows:

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.

dennishall
Junior Poster in Training
71 posts since Nov 2009
Reputation Points: 10
Solved Threads: 1
 

This question has already been solved

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: