Learn VBA & Macros in 1 Week!

JavaScript - Javascript Flip Image Help

Full Excel VBA Course - Beginner to Expert

Javascript Flip Image Help	View Content

I am trying to make a webpage displaying a card trick. What I want to do is have the user click on the card and then it flips the image. However I am having trouble doing this. Right now I have it set to flip when the user hovers over the card. I thought I could change it but I guess not.

This is what I have so far.
Code:

//These are the first button graphics
thumb1= new Image();
thumb1.src = "75/back-blue-75-3.png";
hover1 = new Image();
hover1.src = "75/clubs-2-75.png";

function imageflip(thumbnailID,imageName)
{
document.images[thumbnailID].src = eval(imageName + ".src");
}

<a href="#" onMouseClick="imageflip('icon1','hover1')">
<img src="75/back-blue-75-3.png" border="0" name="icon1"/></a>

Also I am new to javascript and I was wondering if anyone could steer me in the right direction. What I want to do is have the user pick 4 cards and then the next four cards will be based on the previous four cards. For example if the user picks 4 red cards then I would want the user to only have the option of picking four black cards. Can someone help me with this.

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Javascript Flip Image Help

Imagemap Image Flip Works In Chrome Only On Css/html Valid Page.

Text On Flip Box

Please Help With Js On Page Flip

Javascript Full-browser Bg Image And Image Gallery Interference

Using Javascript With Image Map

Image Cropping Through Javascript

Javascript Image Swap Help

Javascript Image Slider Help...

Javascript Image Transitions

Javascript Image Question

3 Way Javascript Image Slideshow

Javascript Image Scroll-need Help Please

Help With Displaying An Image Using Javascript Via Xml

Zoom Image Javascript

Javascript Popup Image

How Can I Change An Image Using Javascript?

Display An Image Using Javascript And Xml

Javascript Image Maps

Learn VBA & Macros for Excel in 1 Week!

Javascript Flip Image Help

Similar Tutorials

Right now I have the code set up so that cards are displayed in on the screen and then when the card is clicked it flips. My question is how do I organize the cards into rows of 7? So I would like for each row to have 7 cards. Then after the card is flipped how do I make it move to the last row?

Currently this is the code that I have:
Code:

<html>
<head>
<script language="JavaScript">
{
//These are the first button graphics
thumb1= new Image();
thumb1.src = "75/back-blue-75-3.png";
hover1 = new Image();
hover1.src = "75/clubs-2-75.png";

//These are the second button graphics
thumb2= new Image();
thumb2.src = "75/back-blue-75-3.png";
hover2 = new Image();
hover2.src = "75/clubs-q-75.png";

//These are the third button graphics
thumb3= new Image();
thumb3.src = "75/back-blue-75-3.png";
hover3 = new Image();
hover3.src = "75/clubs-a-75.png";

thumb4= new Image();
thumb4.src = "75/back-blue-75-3.png";
hover4 = new Image();
hover4.src = "75/diamonds-2-75.png";

thumb5= new Image();
thumb5.src = "75/back-blue-75-3.png";
hover5 = new Image();
hover5.src = "75/joker-b-75.png";

thumb6= new Image();
thumb6.src = "75/back-blue-75-3.png";
hover6 = new Image();
hover6.src = "75/spades-a-75.png";

thumb7= new Image();
thumb7.src = "75/back-blue-75-3.png";
hover7 = new Image();
hover7.src = "75/clubs-3-75.png";

thumb8= new Image();
thumb8.src = "75/back-blue-75-3.png";
hover8 = new Image();
hover8.src = "75/hearts-a-75.png";

thumb9= new Image();
thumb9.src = "75/back-blue-75-3.png";
hover9 = new Image();
hover9.src = "75/hearts-k-75.png";

thumb10= new Image();
thumb10.src = "75/back-blue-75-3.png";
hover10 = new Image();
hover10.src = "75/diamonds-6-75.png";

thumb11= new Image();
thumb11.src = "75/back-blue-75-3.png";
hover11 = new Image();
hover11.src = "75/diamonds-10-75.png";

thumb12= new Image();
thumb12.src = "75/back-blue-75-3.png";
hover12 = new Image();
hover12.src = "75/spades-5-75.png";

thumb13= new Image();
thumb13.src = "75/back-blue-75-3.png";
hover13 = new Image();
hover13.src = "75/joker-r-75.png";

thumb14= new Image();
thumb14.src = "75/back-blue-75-3.png";
hover14 = new Image();
hover14.src = "75/clubs-j-75.png";

thumb15= new Image();
thumb15.src = "75/back-blue-75-3.png";
hover15 = new Image();
hover15.src = "75/clubs-6-75.png";

thumb16= new Image();
thumb16.src = "75/back-blue-75-3.png";
hover16 = new Image();
hover16.src = "75/hearts-5-75.png";

thumb17= new Image();
thumb17.src = "75/back-blue-75-3.png";
hover17 = new Image();
hover17.src = "75/diamonds-k-75.png";

thumb18= new Image();
thumb18.src = "75/back-blue-75-3.png";
hover18 = new Image();
hover18.src = "75/diamonds-8-75.png";

thumb19= new Image();
thumb19.src = "75/back-blue-75-3.png";
hover19 = new Image();
hover19.src = "75/hearts-9-75.png";

thumb20= new Image();
thumb20.src = "75/back-blue-75-3.png";
hover20 = new Image();
hover20.src = "75/spades-j-75.png";

thumb21= new Image();
thumb21.src = "75/back-blue-75-3.png";
hover21 = new Image();
hover21.src = "75/hearts-2-75.png";

thumb22= new Image();
thumb22.src = "75/back-blue-75-3.png";
hover22 = new Image();
hover22.src = "75/hearts-q-75.png";

thumb23= new Image();
thumb23.src = "75/back-blue-75-3.png";
hover23 = new Image();
hover23.src = "75/clubs-8-75.png";

thumb24= new Image();
thumb24.src = "75/back-blue-75-3.png";
hover24 = new Image();
hover24.src = "75/clubs-k-75.png";

thumb25= new Image();
thumb25.src = "75/back-blue-75-3.png";
hover25 = new Image();
hover25.src = "75/diamonds-a-75.png";

thumb26= new Image();
thumb26.src = "75/back-blue-75-3.png";
hover26 = new Image();
hover26.src = "75/spades-2-75.png";

thumb27= new Image();
thumb27.src = "75/back-blue-75-3.png";
hover27 = new Image();
hover27.src = "75/spades-q-75.png";

thumb28= new Image();
thumb28.src = "75/back-blue-75-3.png";
hover28 = new Image();
hover28.src = "75/clubs-7-75.png";

thumb28= new Image();
thumb28.src = "75/back-blue-75-3.png";
hover28 = new Image();
hover28.src = "75/diamonds-j-75.png";

thumb28= new Image();
thumb28.src = "75/back-blue-75-3.png";
hover28 = new Image();
hover28.src = "75/diamonds-3-75.png";

thumb29= new Image();
thumb29.src = "75/back-blue-75-3.png";
hover29 = new Image();
hover29.src = "75/hearts-j-75.png";

thumb30= new Image();
thumb30.src = "75/back-blue-75-3.png";
hover30 = new Image();
hover30.src = "75/clubs-4-75.png";

thumb31= new Image();
thumb31.src = "75/back-blue-75-3.png";
hover31 = new Image();
hover31.src = "75/spades-3-75.png";

thumb32= new Image();
thumb32.src = "75/back-blue-75-3.png";
hover32 = new Image();
hover32.src = "75/spades-k-75.png";

thumb33= new Image();
thumb33.src = "75/back-blue-75-3.png";
hover33 = new Image();
hover33.src = "75/diamonds-4-75.png";

thumb34= new Image();
thumb34.src = "75/back-blue-75-3.png";
hover34 = new Image();
hover34.src = "75/spades-10-75.png";

thumb35= new Image();
thumb35.src = "75/back-blue-75-3.png";
hover35 = new Image();
hover35.src = "75/clubs-5-75.png";

thumb36= new Image();
thumb36.src = "75/back-blue-75-3.png";
hover36 = new Image();
hover36.src = "75/clubs-9-75.png";

thumb37= new Image();
thumb37.src = "75/back-blue-75-3.png";
hover37 = new Image();
hover37.src = "75/diamonds-7-75.png";

thumb38= new Image();
thumb38.src = "75/back-blue-75-3.png";
hover38 = new Image();
hover38.src = "75/diamonds-q-75.png";

thumb39= new Image();
thumb39.src = "75/back-blue-75-3.png";
hover39 = new Image();
hover39.src = "75/spades-6-75.png";

thumb40= new Image();
thumb40.src = "75/back-blue-75-3.png";
hover40 = new Image();
hover40.src = "75/spades-9-75.png";

thumb41= new Image();
thumb41.src = "75/back-blue-75-3.png";
hover41 = new Image();
hover41.src = "75/diamonds-9-75.png";

thumb42= new Image();
thumb42.src = "75/back-blue-75-3.png";
hover42 = new Image();
hover42.src = "75/hearts-3-75.png";

thumb43= new Image();
thumb43.src = "75/back-blue-75-3.png";
hover43 = new Image();
hover43.src = "75/hearts-10-75.png";

thumb44= new Image();
thumb44.src = "75/back-blue-75-3.png";
hover44 = new Image();
hover44.src = "75/diamonds-5-75.png";

thumb45= new Image();
thumb45.src = "75/back-blue-75-3.png";
hover45 = new Image();
hover45.src = "75/spades-7-75.png";

thumb46= new Image();
thumb46.src = "75/back-blue-75-3.png";
hover46 = new Image();
hover46.src = "75/spades-4-75.png";

thumb47= new Image();
thumb47.src = "75/back-blue-75-3.png";
hover47 = new Image();
hover47.src = "75/hearts-8-75.png";

thumb48= new Image();
thumb48.src = "75/back-blue-75-3.png";
hover48 = new Image();
hover48.src = "75/hearts-4-75.png";

thumb49= new Image();
thumb49.src = "75/back-blue-75-3.png";
hover49 = new Image();
hover49.src = "75/hearts-7-75.png";

thumb50= new Image();
thumb50.src = "75/back-blue-75-3.png";
hover50 = new Image();
hover50.src = "75/spades-8-75.png";

thumb51= new Image();
thumb51.src = "75/back-blue-75-3.png";
hover51 = new Image();
hover51.src = "75/hearts-6-75.png";

}


//This is the function that calls for change in buttons 

function imageflip(thumbnailID,imageName)
{
document.images[thumbnailID].src = eval(imageName + ".src");
}
</script>
<title>Hey there! Welcome to my world!</title>
</head>
<body>
<font face="arial" size="7">
Pick 4 cards!</font><br><br>
<a href="#" onClick="imageflip('icon1','hover1')">
<img src="75/back-blue-75-3.png" border="0" name="icon1"/></a>

<a href="#" onClick="imageflip('icon2','hover2')">
<img src="75/back-blue-75-3.png" border="0" name="icon2"/></a>

<a href="#" onClick="imageflip('icon3','hover3')">
<img src="75/back-blue-75-3.png" border="0" name="icon3"/></a>

<a href="#" onClick="imageflip('icon4','hover4')">
<img src="75/back-blue-75-3.png" border="0" name="icon4"/></a>

<a href="#" onClick="imageflip('icon5','hover5')">
<img src="75/back-blue-75-3.png" border="0" name="icon5"/></a>

<a href="#" onClick="imageflip('icon6','hover6')">
<img src="75/back-blue-75-3.png" border="0" name="icon6"/></a>

<a href="#" onClick="imageflip('icon7','hover7')">
<img src="75/back-blue-75-3.png" border="0" name="icon7"/></a>

<a href="#" onClick="imageflip('icon8','hover8')">
<img src="75/back-blue-75-3.png" border="0" name="icon8"/></a>

<a href="#" onClick="imageflip('icon9','hover9')">
<img src="75/back-blue-75-3.png" border="0" name="icon9"/></a>

<a href="#" onClick="imageflip('icon10','hover10')">
<img src="75/back-blue-75-3.png" border="0" name="icon10"/></a>

<a href="#" onClick="imageflip('icon11','hover11')">
<img src="75/back-blue-75-3.png" border="0" name="icon11"/></a>

<a href="#" onClick="imageflip('icon12','hover12')">
<img src="75/back-blue-75-3.png" border="0" name="icon12"/></a>

<a href="#" onClick="imageflip('icon13','hover13')">
<img src="75/back-blue-75-3.png" border="0" name="icon13"/></a>

<a href="#" onClick="imageflip('icon14','hover14')">
<img src="75/back-blue-75-3.png" border="0" name="icon14"/></a>

<a href="#" onClick="imageflip('icon15','hover15')">
<img src="75/back-blue-75-3.png" border="0" name="icon15"/></a>

<a href="#" onClick="imageflip('icon16','hover16')">
<img src="75/back-blue-75-3.png" border="0" name="icon16"/></a>

<a href="#" onClick="imageflip('icon17','hover17')">
<img src="75/back-blue-75-3.png" border="0" name="icon17"/></a>

<a href="#" onClick="imageflip('icon18','hover18')">
<img src="75/back-blue-75-3.png" border="0" name="icon18"/></a>

<a href="#" onClick="imageflip('icon19','hover19')">
<img src="75/back-blue-75-3.png" border="0" name="icon19"/></a>

<a href="#" onClick="imageflip('icon20','hover20')">
<img src="75/back-blue-75-3.png" border="0" name="icon20"/></a>

<a href="#" onClick="imageflip('icon21','hover21')">
<img src="75/back-blue-75-3.png" border="0" name="icon21"/></a>

<a href="#" onClick="imageflip('icon22','hover22')">
<img src="75/back-blue-75-3.png" border="0" name="icon22"/></a>

<a href="#" onClick="imageflip('icon23','hover23')">
<img src="75/back-blue-75-3.png" border="0" name="icon23"/></a>

<a href="#" onClick="imageflip('icon24','hover24')">
<img src="75/back-blue-75-3.png" border="0" name="icon24"/></a>

<a href="#" onClick="imageflip('icon25','hover25')">
<img src="75/back-blue-75-3.png" border="0" name="icon25"/></a>

<a href="#" onClick="imageflip('icon26','hover26')">
<img src="75/back-blue-75-3.png" border="0" name="icon26"/></a>

<a href="#" onClick="imageflip('icon27','hover27')">
<img src="75/back-blue-75-3.png" border="0" name="icon27"/></a>

<a href="#" onClick="imageflip('icon28','hover28')">
<img src="75/back-blue-75-3.png" border="0" name="icon28"/></a>

<a href="#" onClick="imageflip('icon29','hover29')">
<img src="75/back-blue-75-3.png" border="0" name="icon29"/></a>

<a href="#" onClick="imageflip('icon30','hover30')">
<img src="75/back-blue-75-3.png" border="0" name="icon30"/></a>

<a href="#" onClick="imageflip('icon31','hover31')">
<img src="75/back-blue-75-3.png" border="0" name="icon31"/></a>

<a href="#" onClick="imageflip('icon32','hover32')">
<img src="75/back-blue-75-3.png" border="0" name="icon32"/></a>

<a href="#" onClick="imageflip('icon33','hover33')">
<img src="75/back-blue-75-3.png" border="0" name="icon33"/></a>

<a href="#" onClick="imageflip('icon34','hover34')">
<img src="75/back-blue-75-3.png" border="0" name="icon34"/></a>

<a href="#" onClick="imageflip('icon35','hover35')">
<img src="75/back-blue-75-3.png" border="0" name="icon35"/></a>

<a href="#" onClick="imageflip('icon36','hover36')">
<img src="75/back-blue-75-3.png" border="0" name="icon36"/></a>

<a href="#" onClick="imageflip('icon37','hover37')">
<img src="75/back-blue-75-3.png" border="0" name="icon37"/></a>

<a href="#" onClick="imageflip('icon38','hover38')">
<img src="75/back-blue-75-3.png" border="0" name="icon38"/></a>

<a href="#" onClick="imageflip('icon39','hover39')">
<img src="75/back-blue-75-3.png" border="0" name="icon39"/></a>

<a href="#" onClick="imageflip('icon40','hover40')">
<img src="75/back-blue-75-3.png" border="0" name="icon40"/></a>

<a href="#" onClick="imageflip('icon41','hover41')">
<img src="75/back-blue-75-3.png" border="0" name="icon41"/></a>

<a href="#" onClick="imageflip('icon42','hover42')">
<img src="75/back-blue-75-3.png" border="0" name="icon42"/></a>

<a href="#" onClick="imageflip('icon43','hover43')">
<img src="75/back-blue-75-3.png" border="0" name="icon43"/></a>

<a href="#" onClick="imageflip('icon44','hover44')">
<img src="75/back-blue-75-3.png" border="0" name="icon44"/></a>

<a href="#" onClick="imageflip('icon45','hover45')">
<img src="75/back-blue-75-3.png" border="0" name="icon45"/></a>

<a href="#" onClick="imageflip('icon46','hover46')">
<img src="75/back-blue-75-3.png" border="0" name="icon46"/></a>

<a href="#" onClick="imageflip('icon47','hover47')">
<img src="75/back-blue-75-3.png" border="0" name="icon47"/></a>

<a href="#" onClick="imageflip('icon48','hover48')">
<img src="75/back-blue-75-3.png" border="0" name="icon48"/></a>

<a href="#" onClick="imageflip('icon49','hover49')">
<img src="75/back-blue-75-3.png" border="0" name="icon49"/></a>

<a href="#" onClick="imageflip('icon50','hover50')">
<img src="75/back-blue-75-3.png" border="0" name="icon50"/></a>

<a href="#" onClick="imageflip('icon51','hover51')">
<img src="75/back-blue-75-3.png" border="0" name="icon51"/></a>



</body>
</html>

Imagemap Image Flip Works In Chrome Only On Css/html Valid Page.

Similar Tutorials

this page will display new images when you mouseover the red and orange arrows on the menu on the right side in chrome, but not ff, ie, opera, and safari. Any ideas as to why these other browsers aren't running the code like chrome? guessing this is javascript related - anyone want to offer any clues?

Text On Flip Box

Similar Tutorials

Hi
Does anyone know how to make the flip box code below so it reverts back to the original text when you click it again. I have 5 flip boxes with a message on each side but currently once you click it you can't click again to see the original text.

Code:

<script language="javascript">
	trueCount = 0;
	falseCount = 0;
	
	for(i=1;i<=15;i++) {
		$("#flipbox" + i).click(function(){
			var $this = $(this);
			$(this).flip({
				direction:'tb',
				color: '#EFEFEF',
				content: $this.attr("title"),
				onBefo  function(){$(".revert").show()}
				
					})
					return false;
				});
		
						$("#revert").bind("click",function(){
					$("#flipbox").revertFlip();
					return false;
				});
	}
	
	function addAnswer(div, answer){
		
		if($("#"+div).hasClass("correct")) {
			trueCount--;
			$("#"+div).removeClass("correct");
		}
		else {
			$("#"+div).addClass("correct");
			answersArray[trueCount] = $("#"+div).parent().html().substr(0, $("#"+div).parent().html().indexOf('<'));
			trueCount++;
			if(trueCount == 2) {
				$(".test").fadeOut(1000, function(){
					$(this).html("<h3>Correct - </h3>" 
				    ).fadeIn(1000);	
				})
			}
		}
	}
	updateBookmark();
</script>



<h1>Communications Skills</h1>
<div id="greenbg"><div id="greenbgcontent"><h4>Listening</h4>
<p>How can you show that you are listening actively?</p>
<p>Click on the boxes below until they show behaviours you feel demonstrate that someone is listening to you</p>
<div class="content">
    <div class="flip" onClick="addAnswer('answer1','c')" id="flipbox1" title="Put down the book">Reading a book<div class="answers" id="answer1"></div></div>
    <div class="flip" onClick="addAnswer('answer2','t')" id="flipbox2" title="Position their body so that they are not facing you">Position their body so that they are facing you <div class="answers" id="answer2"></div></div>
    <div class="flip" onClick="addAnswer('answer3','c')" id="flipbox3" title="Be Quiet">Talk<div class="answers" id="answer3"></div></div>
    <div class="flip" onClick="addAnswer('answer4','t')" id="flipbox4" title="Watch the wall">Make eye contact<div class="answers" id="answer4"></div></div>
    <div class="flip" onClick="addAnswer('answer5','c')" id="flipbox5" title="Be Quiet">Ask questions<div class="answers" id="answer5"></div></div>
</div>
<div class="test"></div>

Flip Boxes

Similar Tutorials

Hi
Can anyone help with this....

I'm trying to create and object that has text on either side of the flip boxes and when the correct answers are showing (some will need to be flipped and some not). The boxes are disapled and a message appears to say this is correct.
I need to work out how to write different text on the other side of each flip box
How to differentiate between when the box is flipped and when it isnt (to assign a value)
How to disable boxes when all are correct or how to add a subit button so that when users think the boxes are correct they click to check answers

So far I have this and now im stuck, its not doing exactly what i want. I'm new to all this and just need a bit of guidance...

Code:

<style>
	.content {
		width: 880px;
		height:180px;
	}
	
	.test {
		width:800
		height:100
		
	}
	.answers{
		position:absolute;
		width:25px;
		height:20px;
		left: 200px;
	    top: 4px;
	}
	
	.correct{
		background-repeat:no-repeat;
		background-image:url(assets/correct-small.png);
		z-index:1;
	}
	
	.incorrect{
		background-repeat:no-repeat;
		background-image:url(assets/incorrect-small.png);
		z-index:1;
	}

	.flip {
		position:relative;
		float:left;
		margin-left:3px;
		margin-right:3px;
		width: 500px;
		height: 22px;
		padding: 3px;
		margin-bottom: 2px;
		border: 1px #CCC solid;
		background-color: #EFEFEF;
		text-align: center;
		}
	
	.flip:hover{
		cursor: pointer;
		background-color: #FFF;
	}
</style>

<script language="javascript">
	trueCount = 0;
	falseCount = 0;
	
	for(i=1;i<=15;i++) {
		$("#flipbox" + i).click(function(){
			$(this).flip({
				direction:'tb',
				color: '#EFEFEF',
				
			});
		});
	}
	
	function addAnswer(div, answer){
		
		if($("#"+div).hasClass("correct")) {
			trueCount--;
			$("#"+div).removeClass("correct");
		}
		else {
			$("#"+div).addClass("correct");
			answersArray[trueCount] = $("#"+div).parent().html().substr(0, $("#"+div).parent().html().indexOf('<'));
			trueCount++;
			if(trueCount == 2) {
				$(".test").fadeOut(1000, function(){
					$(this).html("<h3>Correct - </h3>" 
				    ).fadeIn(1000);	
				})
			}
		}
	}
	updateBookmark();
</script>

<br /><br />
<div class="content">
    <div class="flip" onclick="addAnswer('answer1','c')" id="flipbox1">Reading a book<div class="answers" id="answer1"></div></div>
    <div class="flip" onclick="addAnswer('answer2','t')" id="flipbox2">Position their body so that they are facing you <div class="answers" id="answer2"></div></div>
    <div class="flip" onclick="addAnswer('answer3','c')" id="flipbox3">Talk<div class="answers" id="answer3"></div></div>
    <div class="flip" onclick="addAnswer('answer4','t')" id="flipbox4">Make eye contact<div class="answers" id="answer4"></div></div>
    <div class="flip" onclick="addAnswer('answer5','c')" id="flipbox5">Ask questions<div class="answers" id="answer5"></div></div>
</div>
<div class="test"></div>

Please Help With Js On Page Flip

Similar Tutorials

I followed a tutorial for an HTML5 flip book...
It was pretty good but you couldn't add links or any sort of interactivity on the pages so I tweaked it a bit and figured out how to adjust the z-index so that I could add links to the pages...
Only one problem when you go back a page it's not updating the z-index.
Here is the sample file:
http://www.schrene.web44.net/Books/F...ok/Book-B.html
I couldn't figure out exactly where to adjust the z-index on the back flip...
Here is the code:
Code:

(function () {
	
	// Dimensions of the whole book
	var BOOK_WIDTH = 830;
	var BOOK_HEIGHT = 260;
	
	// Dimensions of one page in the book
	var PAGE_WIDTH = 400;
	var PAGE_HEIGHT = 250;
	var SELECTABLE_WIDTH =60;
	
	// Vertical spacing between the top edge of the book and the papers
	var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2;
	
	// The canvas size equals to the book dimensions + this padding
	var CANVAS_PADDING = 60;
	
	var page = 0;
	
	var canvas = document.getElementById( "pageflip-canvas" );
	var context = canvas.getContext( "2d" );
	
	var mouse = { x: 0, y: 0 };
	
	var flips = [];
	
	var book = document.getElementById( "book" );
	
	// List of all the page elements in the DOM
	var pages = book.getElementsByTagName( "section" );
	
	// Organize the depth of our pages and create the flip definitions
	for( var i = 0, len = pages.length; i < len; i++ ) {
		pages[i].style.zIndex = len - i;
		
		flips.push( {
			// Current progress of the flip (left -1 to right +1)
			progress: 1,
			// The target value towards which progress is always moving
			target: 1,
			// The page DOM element related to this flip
			page: pages[i], 
			// True while the page is being dragged
			dragging: false
		} );
	}
	
	// Resize the canvas to match the book size
	canvas.width = BOOK_WIDTH + ( CANVAS_PADDING * 2 );
	canvas.height = BOOK_HEIGHT + ( CANVAS_PADDING * 2 );
	
	// Offset the canvas so that it's padding is evenly spread around the book
	canvas.style.top = -CANVAS_PADDING + "px";
	canvas.style.left = -CANVAS_PADDING + "px";
	
	// Render the page flip 60 times a second
	setInterval( render, 1000 / 60 );
	
	document.addEventListener( "mousemove", mouseMoveHandler, false );
	document.addEventListener( "mousedown", mouseDownHandler, false );
	document.addEventListener( "mouseup", mouseUpHandler, false );
	
	function mouseMoveHandler( event ) {
		// Offset mouse position so that the top of the spine is 0,0
		mouse.x = event.clientX - book.offsetLeft - ( BOOK_WIDTH /2 );
		mouse.y = event.clientY - book.offsetTop;
		
	}
	
	function mouseDownHandler( event ) {
		if (Math.abs(mouse.x) < PAGE_WIDTH) {
			if (mouse.x < 0 && page - 1 >= 0) {
				flips[page - 1].dragging = true;
				
			}
			else if (mouse.x >(PAGE_WIDTH - SELECTABLE_WIDTH) && page +1 <flips.length)  {
				flips[page].dragging = true;
				canvas.style.zIndex=100;
			}
		}
		
		// Prevents the text selection cursor from appearing when dragging
		event.preventDefault();
	}
	
	function mouseUpHandler( event ) {
		for( var i = 0; i < flips.length; i++ ) {
			// If this flip was being dragged we animate to its destination
			if( flips[i].dragging ) {
				// Figure out which page we should go to next depending on the flip direction
				if( mouse.x < 0 ) {
					flips[i].target = -1;
					page = Math.min( page + 1, flips.length );
				}
				else {
					flips[i].target = 1;
					page = Math.max( page - 1, 0 );
				}
			}
			
			flips[i].dragging = false;
			
		}
		canvas.style.zIndex=0;
	}
	
	function render() {
		
		context.clearRect( 0, 0, canvas.width, canvas.height );
		
		for (var i = 0; i < flips.length; i++) {
			var flip = flips[i];
			
			if( flip.dragging ) {
				flip.target = Math.max( Math.min( mouse.x / PAGE_WIDTH, 1 ), -1 );
			}
			
			flip.progress += ( flip.target - flip.progress ) * 0.2;
			
			// If the flip is being dragged or is somewhere in the middle of the book, render it
			if( flip.dragging || Math.abs( flip.progress ) < 0.997 ) {
				drawFlip( flip );
			}
			
		}
		
	}
	
	function drawFlip( flip ) {
		// Strength of the fold is strongest in the middle of the book
		var strength = 1 - Math.abs( flip.progress );
		
		// Width of the folded paper
		var foldWidth = ( PAGE_WIDTH * 0.5 ) * ( 1 - flip.progress );
		
		// X position of the folded paper
		var foldX = PAGE_WIDTH * flip.progress + foldWidth;
		
		// How far the page should outdent vertically due to perspective
		var verticalOutdent = 20 * strength;
		
		// The maximum width of the left and right side shadows
		var paperShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( 1 - flip.progress, 0.5 ), 0 );
		var rightShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( strength, 0.5 ), 0 );
		var leftShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( strength, 0.5 ), 0 );
		
		
		// Change page element width to match the x position of the fold
		flip.page.style.width = Math.max(foldX, 0) + "px";
		
		context.save();
		context.translate( CANVAS_PADDING + ( BOOK_WIDTH / 2 ), PAGE_Y + CANVAS_PADDING );
		
		
		// Draw a sharp shadow on the left side of the page
		context.strokeStyle = 'rgba(0,0,0,'+(0.05 * strength)+')';
		context.lineWidth = 130 * strength;
		context.beginPath();
		context.moveTo(foldX - foldWidth, -verticalOutdent * 0.5);
		context.lineTo(foldX - foldWidth, PAGE_HEIGHT + (verticalOutdent * 0.5));
		context.stroke();
		
		
		// Right side drop shadow
		var rightShadowGradient = context.createLinearGradient(foldX, 0, foldX + rightShadowWidth, 0);
		rightShadowGradient.addColorStop(0, 'rgba(0,0,0,'+(strength*0.2)+')');
		rightShadowGradient.addColorStop(0.8, 'rgba(0,0,0,0.0)');
		
		context.fillStyle = rightShadowGradient;
		context.beginPath();
		context.moveTo(foldX, 0);
		context.lineTo(foldX + rightShadowWidth, 0);
		context.lineTo(foldX + rightShadowWidth, PAGE_HEIGHT);
		context.lineTo(foldX, PAGE_HEIGHT);
		context.fill();
		
		
		// Left side drop shadow
		var leftShadowGradient = context.createLinearGradient(foldX - foldWidth - leftShadowWidth, 0, foldX - foldWidth, 0);
		leftShadowGradient.addColorStop(0, 'rgba(0,0,0,0.0)');
		leftShadowGradient.addColorStop(1, 'rgba(0,0,0,'+(strength*0.15)+')');
		
		context.fillStyle = leftShadowGradient;
		context.beginPath();
		context.moveTo(foldX - foldWidth - leftShadowWidth, 0);
		context.lineTo(foldX - foldWidth, 0);
		context.lineTo(foldX - foldWidth, PAGE_HEIGHT);
		context.lineTo(foldX - foldWidth - leftShadowWidth, PAGE_HEIGHT);
		context.fill();
		
		
		// Gradient applied to the folded paper (highlights & shadows)
		var foldGradient = context.createLinearGradient(foldX - paperShadowWidth, 0, foldX, 0);
		foldGradient.addColorStop(0.35, '#fafafa');
		foldGradient.addColorStop(0.73, '#eeeeee');
		foldGradient.addColorStop(0.9, '#fafafa');
		foldGradient.addColorStop(1.0, '#e2e2e2');
		
		context.fillStyle = foldGradient;
		context.strokeStyle = 'rgba(0,0,0,0.06)';
		context.lineWidth = 0.5;
		
		// Draw the folded piece of paper
		context.beginPath();
		context.moveTo(foldX, 0);
		context.lineTo(foldX, PAGE_HEIGHT);
		context.quadraticCurveTo(foldX, PAGE_HEIGHT + (verticalOutdent * 2), foldX - foldWidth, PAGE_HEIGHT + verticalOutdent);
		context.lineTo(foldX - foldWidth, -verticalOutdent);
		context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0);
		
		context.fill();
		context.stroke();
		
		
		context.restore();
	}
	
})();

Any help would be greatly appreciated

Javascript Full-browser Bg Image And Image Gallery Interference

Similar Tutorials

Hello,

I am working on a page that has a jQuery full browser BG image and I am trying to also utilize a MooTools gallery. There seems to be some interference between the two JavaScripts as only one works (whichever one is last in order in the header of the HTML document).

Links:

http://www.courtneyhunt.com.au/press_bg.html
http://www.courtneyhunt.com.au/press_gallery.html

I am a complete novice with JavaScript so if anyone could help that would be great.

Thank you in advance.

Using Javascript With Image Map

Similar Tutorials

Hi I've searched this forum and found nothing that fits my problem.

I used Gimp. I have a map that I have split up into about 5 regions that are all linked to Google for now. (links to be changed later on).

I selected the JavaScript tab an then typed into the mouseover box.

Here is part of the code it produces in the .map file:

<area shape="poly" coords="205,32,159,34,150,83,124,122,114,154,133,175,140,199,159,222,176,217,185,214,223,194,224,173 ,231,155,235,130,224,124,215,107,213,82,212,71" alt="google" onmouseover="img src="http://i42.tinypic.com/14oc0lj.jpg"" href="http://www.google.com" />

The " bit looks wrong so I took it out and it still doesn't do anything when I mouseover. I've tried linking it to a file within my website folders as well as hosted on the internet.

Any ideas please? The links work but the mouseover effect doesn't. Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<img src="C:\Documents and Settings\markp\Desktop\demo\images\mapv10.jpg" width="350" height="400" border="0" usemap="#map" />

</head>

<body>
<map name="map">





<area shape="poly" coords="205,32,159,34,150,83,124,122,114,154,133,175,140,199,159,222,176,217,185,214,223,194,224,173 ,231,155,235,130,224,124,215,107,213,82,212,71" alt="google" onmouseover="img src=C:\Documents and Settings\markp\Desktop\demo\images\mapv10b.jpg" href="http://www.google.com" />
<area shape="poly" coords="225,197,174,221,139,251,150,266,199,265,203,270,223,270,223,277,241,273,251,270,252,258,348, 249,309,179,308,178" href="http://www.google.com" />
<area shape="poly" coords="255,271,277,271,287,286,272,312,269,326,316,379,314,399,221,398,223,336,104,340,101,329,108, 319,136,305,156,301,162,303,179,304,191,305,201,299,210,283,220,277,233,277,249,273,261,271" href="http://www.google.com" />
<area shape="poly" coords="247,268,206,268,200,263,152,263,139,272,121,274,94,249,76,241,57,242,38,261,38,289,43,308,61 ,313,89,314,105,308,113,308,144,296,152,296,160,296,168,301,183,300,201,293,208,283,215,276,226,275, 250,275,252,268,224,267,203,267,201,264" href="http://www.google.com" />
<area shape="poly" coords="52,126,17,136,1,174,5,197,56,198,80,198,79,213,88,222,100,230,112,239,117,239,128,233,139,22 6,142,216,142,203,138,195,122,189,118,188" href="http://www.google.com" />
</map>

</body>
</html>

Image Cropping Through Javascript

Similar Tutorials

I need to do image cropping through javascript(without jquery)
my requirement is just to get the coordinates through some callback function whenever user crop the image and click an ok button
please help me with some javascript code here

Javascript Image Swap Help

Similar Tutorials

So what I have to do is have 1 image on my webpage and a button. When the button is clicked the image needs to toggle back and forth between img1 and img2.

After searching I've found ways to do this using the image itself as a button. But I'm having trouble getting it to work with an input button.

Any help would be greatly appreciated.

Javascript Image Slider Help...

Similar Tutorials

I followed this tutorial to create a clickable image slideshow with javascript on a site's homepage.

However, it appears that the javascript:slidelink() is still running beyond the intended area as some of my content below the container is now underlined as if it were a link, when it should not be. I can tell that the script is the issue because when hovering over the content it shows "javascript:slidelink()" but will not go to anything when clicked.

Here is the code I'm using, which is placed in a Wordpress theme container:

Code:

<html>
<head>
<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="image1.png"
var image2=new Image()
image2.src="image2.png"
var image3=new Image()
image3.src="image3.png"
var image4=new Image()
image4.src="image4.png"
var image5=new Image()
image5.src="image5.png"
var image6=new Image()
image6.src="image6.png"
//-->
</script>
</head>
<body>
<a href="javascript:slidelink()">
<img src="image1.png" name="slide" width="100" />
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<3)
step++
else
step=1
setTimeout("slideit()",1800)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="link1.htm"
else if (whichimage==2)
window.location="link2.htm"
else if (whichimage==3)
window.location="link3.htm"
else if (whichimage==4)
window.location="link4.htm"
else if (whichimage==5)
window.location="link5.htm"
else if (whichimage==6)
window.location="link6.htm"
}
//-->
</script>
</body>
</html>

Can anyone spot what might be causing the issue?

Thanks in advance!

Javascript Image Transitions

Similar Tutorials

Can someone point me in the right direction to making custom javascript image slideshow transitions?

Javascript Image Question

Similar Tutorials

I was wondering if it was possible to get java to display images that have the same name but diff numbers like:

Soccer***

Displays;
Soccer001
Soccer002
Soccer003
Soccer004
.... So on and so forth.

Sorry the question isn't worded well lol

3 Way Javascript Image Slideshow

Similar Tutorials

http://www.javascriptkit.com/script/...2/3slide.shtml

Hi i have the above image slideshow script running fine on a webpage

can anybody tell me how i can get it to run a second time to show a second different slideshow on the same page?

Ive tried editing variables but i cant work it out. would be much appreciated

Ta

Javascript Image Scroll-need Help Please

Similar Tutorials

Hello,

I have an image scroll on my site that uses JavaScript. Each individual image/slide can be linked to a url. My problem is that it opens a new window when you click an image, and I want it to simply open the new link in the same window.

Here is what I have in the head section:
Code:

<script language="JavaScript1.1">
<!--

var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}

function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}

//-->
</script>

Here is what I have in the body:
Code:

<script>
<!--

//configure the paths of the images, plus corresponding target links
slideshowimages("images/scroll-logo.jpg","images/scroll-natingredients.jpg","images/scroll-ucoriginal.jpg","images/scroll-organic.jpg","images/scroll-uckick.jpg")
slideshowlinks("healthprogressives.html","faq.html","index.html","faq.html","index.html")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=5000

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>

Thank you~

Help With Displaying An Image Using Javascript Via Xml

Similar Tutorials

Hi guys, I already posted this but it hasn't been approved by a mod or the mods are all at lunch or something lol.

I want to display an image using javascript instead of HTML (or use javascript to change the HTML code dynamically when an update is made). I have created an XML file, which contains text data which is displayed in HTML by using Javascript.

What I am having trouble with is getting Javascript to grab the image URL from the XML file, and then display that image in the correct div. How does one show an image by using javascript? and how do you get javascript to get the url from the XML?

The following is my Javascript code which grabs the text from the XML and displays it in the HTML;

Code:

<script type="text/javascript">

var xmlDoc;
<!--
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  } 
else // Internet Explorer 5/6
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET","SDS.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;

var x=xmlDoc.getElementsByTagName("NEWS");
i=0;

function display()
{
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue.fontsize("5").fontcolor("white").bold());
date=(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue.fontsize("2").fontcolor("white").bold());
stitle=(x[i].getElementsByTagName("STITLE")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white").italics());
story=(x[i].getElementsByTagName("STORY")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white"));
txt= title + "<br />" + date + "<br />" + stitle + "<br />" + story;
document.getElementById("show").innerHTML=txt;
}

//-->
</script>

And this is the XML file;

Code:

<?xml version="1.0" encoding="ISO-8859-1"?>

<BULLETIN>
<NEWS>
<PIC>"newssmall.jpg"</PIC>
<DATE>14/3/2010</DATE>
<TITLE>News Story 1</TITLE>
<STITLE>This is a short sentence to describe the story in brief</STITLE>
<STORY>This is the text of the news story</STORY>
</NEWS>
</BULLETIN>

So what I want to do is create a function that grabs the url (relative) from the PIC tag in the XML ("newssmall.jpg") and then uses this URL to display the image on the HTML page. This way, only the XML needs updating when updating the news section of the site.

Thanks for helping if you can,
Dan

Zoom Image Javascript

Similar Tutorials

Please help. I am using Image Zoom JQuery script for one gift page because it is browser compatible and it works great. But they want me to add this script to the previous thumbnail page. So the thumbnails have to be a zoomable image as well as a clickable link to go to the next page. The JQuery script I can't seem to do both with but MojoZoom script you can except it does not do well in any browsers except Mozilla. It uses a data-zoomsrc to bring in the larger image. I just can't get it to work in anything but mozilla. I have tried messing with the .css and the .js file with no luck in controlling where the zoomed image falls on the page. In IE it shows way up above the thumbnail instead of directly next to the thumbnial. Please any help is appreciated. Or if you have another type of image zoom script that you are familiar with please suggest. I have seen other posts but not to do with the image being clickable and zoomable.

Javascript Popup Image

Similar Tutorials

folks., i need to popup image on image hover?the image should be placed just above mouse pointer? i tried to implement event.x,event.y.. but it is not positoning well in all browsers..?is css need to be used here or please give me javascript code...
this is the code
function Large(obj,id,e)
{
// this is div tag,inside div i am placing imagebutton..

var imgbox=document.getElementById("imgbox");
var imgbtn=document.getElementById('<%=ImageButton3.ClientID%>');
imgbox.style.visibility='visible';
imgbtn.src=obj;
imgbox.style.left=event.x;
imgbox.style.top= event.y;
}
thank you

How Can I Change An Image Using Javascript?

Similar Tutorials

I need a JavaScript image changer like this:
When you mouse over photo1.jpg, it will change to photo2.jpg.
When you mouse over photo2.jpg it will change to photo 3.jpg and so on untill photo5.jpg.
Please keep this in JavaScript form :)

Display An Image Using Javascript And Xml

Similar Tutorials

Hi guys I'm really stumped on this, and I haven't been able to find a tutorial online anywhere.

I'm trying to create an XML news feed for a company's website I am currently building. I have created the XML, and gotten the text to display perfectly in the HTML by using javascript.

Now I want to add a thumbnail image for each news story, to make updating simpler, I wanted the url for the thumbnail to be entered into the XML, from which the javascript could read and then display in the corresponding area in the HTML.

Is this even possible? Every tutorial I get when I use the terms "Image" and "Javascript" gives me a tutorial for a gallery or a slideshow which is not what I want at all.

Below is the javascript code, followed by the XML code;

Code:

<script type="text/javascript">

var xmlDoc;
<!--
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  } 
else // Internet Explorer 5/6
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET","SDS.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;

var x=xmlDoc.getElementsByTagName("NEWS");
i=0;

function display()
{
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue.fontsize("5").fontcolor("white").bold());
date=(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue.fontsize("2").fontcolor("white").bold());
stitle=(x[i].getElementsByTagName("STITLE")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white").italics());
story=(x[i].getElementsByTagName("STORY")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white"));
txt= title + "<br />" + date + "<br />" + stitle + "<br />" + story;
document.getElementById("show").innerHTML=txt;
}

//-->
</script>

XML code
Code:

<?xml version="1.0" encoding="ISO-8859-1"?>

<BULLETIN>
<NEWS>
<PIC>"/newssmall.jpg"</PIC>
<DATE>14/3/2010</DATE>
<TITLE>News Story 1</TITLE>
<STITLE>This is a short sentence to describe the story in brief</STITLE>
<STORY>This is the text of the news story</STORY>
</NEWS>
</BULLETIN>

Thanks to anyone that even reads this, I'm probably making a nooby mistake, I only started using JS and XML on Monday so I'm still learning lol

Javascript Image Maps

Similar Tutorials

So im making a game in javascript and i recently found out about image maps and i dont understand how they work very well. Pritty much when you would click a specific spot it would change the picture to a different image map?