Two Modifications to the Book Flip Slideshow Script

[Markxxx]

1) Script Title:
Book Flip Slideshow

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex14/bookflip.htm

3) Describe problem:

This isn't a problem because the script rocks, here's a question I had. Really two questions regarding modifications.

First of all, is it possible to add an "alt" tag to the pictures, so when you hover over them you get the image alt name, like you do on a regular image?

If this is possible how?

Second of all, instead of having the script flip automatically and stop when you mouseover, would it be possible to make it so you have a click button like on other slide shows. So you click the button marked << or >> and it moves back and forth on user clicks. Just wondering on that, I reckon that might be a major rewrite, but it'd be nice


As always thanks.

[jscheuer1]

The author has made a version of this script that supports buttons:

http://www.burmees.nl/menu/bookextended.html

There are other differences, particularly in the syntax for the array of images. So, be sure to follow the installation for this 'extended' version from scratch. Don' try to paste parts of your code from the old one into it.

Now, when you say:

"alt" tag to the pictures, so when you hover over them you get the image alt name

This is not what the alt attribute is for. And, only IE will treat it that way. All images should have an alt attribute but, it is only meant to be used if the image is unavailable. There is another attribute, the title attribute. That attribute gives these mouseover tips in IE and in all other browsers as well.

All that said, there is no simple way to add title or alt attributes to this script but, it can be done. I will play with it a bit to see what might be the best way.

[jscheuer1]

OK, working from the extended script, additions red:

	Book_Image_Sources=new Array(
		"photo1.jpg","","",
		"photo2.jpg","","",
		"photo3.jpg","","",
		"photo4.jpg","","",
		"photo5.jpg","","",
		"photo6.jpg","","",
		"photo7.jpg","","",
		"photo8.jpg","",""	// NOTE No comma after last line
		);

	Book_Titles=new Array(
		"Kissing Fools",
		"Seated Woman",
		"The Dog Lovers",
		"Standing Woman",
		"Jesus, Mary and John",
		"Crucifix",
		"Alter Boys",
		"Young Pan"	// NOTE No comma after last line
		);

/********************************** DO NOT EDIT BELOW *******************************************************/

	var B_LI,B_MI,B_RI,B_TI;
	var B_Angle=0,B_CrMImg,B_CrSImg,B_MaxW,B_Drctn=true,B_DirChngd=false;
	var B_Srcs=Book_Image_Sources,B_SrcL=B_Srcs.length,B_ChngDirFlg=false;
	var B_MSz,B_Stppd=Book_Auto?false:true;B_Pre_Img=new Array(B_SrcL);

	function findTitle(e){
	var im=window.event? window.event.srcElement : e.target;
	for (var i_tem = 0; i_tem < B_Srcs.length; i_tem+=3)
		if(im&&im.src&&im.src.indexOf(B_Srcs[i_tem])>-1){
		im.title=Book_Titles[i_tem/3];
		im.alt='Slide Show Image #'+i_tem/3;
		}
	}

	function ImageBook(){
		if(document.getElementById){
			for(var i=0;i<B_SrcL;i+=3){B_Pre_Img[i]=new Image();B_Pre_Img[i].src=B_Srcs[i]}
			Book_Div=document.getElementById("Book");
			B_LI=document.createElement("img");Book_Div.appendChild(B_LI);	
			B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
			B_MI=document.createElement("img");Book_Div.appendChild(B_MI);
			var B_IMS=[B_LI,B_RI,B_MI];
			for (var i_tem = 0; i_tem < B_IMS.length; i_tem++)
			if ( typeof window.addEventListener != "undefined" )
			    B_IMS[i_tem].addEventListener( "mouseover", findTitle, false );
			else if ( typeof window.attachEvent != "undefined" )
			    B_IMS[i_tem].attachEvent( "onmouseover", findTitle );
			B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
			B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
			B_LI.style.top=B_LI.style.left=B_MI.style.top=B . . .