|
JavaScript - Javascript Help Images
Hi
i have created a scrolling gallery using javascript but i am having trouble aligning my images. right now they are in the center of the page but at the bottom, but i want them on top of the page. here is my code. <html> <head> <title>Gallery</title> <link href="website.css" rel="stylesheet" type="text/css"> <left> <table border="0" width="50" height="200"> <tr><td><a href="unique sports.html"><img width="400" height="230" align="center" src="unique sports logo.gif" border="0"></td></tr> <tr><td><a href="unique sports.html"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/home button.gif" border="0"><a/></td></tr> <tr><td><a href="about us.html"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/about us.gif" border="0"></a> </td></tr> <tr><td><a href="http://youtube.com"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/reviews.gif" border="0"></a> </td></tr> <tr><td><a href="Contact us.html"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/contact us button.gif" border="0"></a></td></tr> </td></tr> <tr><td><a href="shop section.html"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/shop section .gif" border="0"></td></tr> <tr><td><a/><a href="http://google.com"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/latest news .gif" border="0"></a></td></tr> <tr><td><a href="http://youtube.com"><img src="/home/yatkin/Desktop/Uni work/Muti apps design/photo gallery .gif" border="0"></a></td></tr> </table> <center> <table> <td> <script language="JavaScript1.2"> var scrollerwidth='500px' var scrollerheight='500px' var pausebetweenimages=3000 var slideimages=new Array() slideimages[0]='<img src="72757631_9c35b8eff2_o.jpg">' slideimages[1]='<img src="363507907_FEDxk-L.jpg">' slideimages[2]='<img src="2542265127_6108971aa4.jpg">' slideimages[3]='<img src="2795508357_66b1cea812.jpg">' var ie=document.all var dom=document.getElementById if (slideimages.length>2) i=2 else i=0 function move1(whichlayer){ tlayer=eval(whichlayer) if (tlayer.top>0&&tlayer.top<=5){ tlayer.top=0 setTimeout("move1(tlayer)",pausebetweenimages) setTimeout("move2(document.main.document.second)",pausebetweenimages) return } if (tlayer.top>=tlayer.document.height*-1){ tlayer.top-=5 setTimeout("move1(tlayer)",50) } else{ tlayer.top=parseInt(scrollerheight) tlayer.document.write(slideimages[i]) tlayer.document.close() if (i==slideimages.length-1) i=0 else i++ } } function move2(whichlayer){ tlayer2=eval(whichlayer) if (tlayer2.top>0&&tlayer2.top<=5){ tlayer2.top=0 setTimeout("move2(tlayer2)",pausebetweenimages) setTimeout("move1(document.main.document.first)",pausebetweenimages) return } if (tlayer2.top>=tlayer2.document.height*-1){ tlayer2.top-=5 setTimeout("move2(tlayer2)",50) } else{ tlayer2.top=parseInt(scrollerheight) tlayer2.document.write(slideimages[i]) tlayer2.document.close() if (i==slideimages.length-1) i=0 else i++ } } function move3(whichdiv){ tdiv=eval(whichdiv) if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){ tdiv.style.top=0+"px" setTimeout("move3(tdiv)",pausebetweenimages) setTimeout("move4(second2_obj)",pausebetweenimages) return } if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){ tdiv.style.top=parseInt(tdiv.style.top)-5+"px" setTimeout("move3(tdiv)",50) } else{ tdiv.style.top=scrollerheight tdiv.innerHTML=slideimages[i] if (i==slideimages.length-1) i=0 else i++ } } function move4(whichdiv){ tdiv2=eval(whichdiv) if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){ tdiv2.style.top=0+"px" setTimeout("move4(tdiv2)",pausebetweenimages) setTimeout("move3(first2_obj)",pausebetweenimages) return } if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){ tdiv2.style.top=parseInt(tdiv2.style.top)-5+"px" setTimeout("move4(second2_obj)",50) } else{ tdiv2.style.top=scrollerheight tdiv2.innerHTML=slideimages[i] if (i==slideimages.length-1) i=0 else i++ } } function startscroll(){ if (ie||dom){ first2_obj=ie? first2 : document.getElementById("first2") second2_obj=ie? second2 : document.getElementById("second2") move3(first2_obj) second2_obj.style.top=scrollerheight second2_obj.style.visibility='visible' } else if (document.layers){ document.main.visibility='show' move1(document.main.document.first) document.main.document.second.top=parseInt(scrollerheight)+5 document.main.document.second.visibility='show' } } window.onload=startscroll </script> <ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; visibility=hide> <layer id="first" left=0 top=1 width=&{scrollerwidth};> <script language="JavaScript1.2"> if (document.layers) document.write(slideimages[0]) </script> </layer> <layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide> <script language="JavaScript1.2"> if (document.layers) document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1]) </script> </layer> </ilayer> <script language="JavaScript1.2"> if (ie||dom){ document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;">') document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">') document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:1px;">') document.write(slideimages[0]) document.writeln('</div>') document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px;visibility:hidden">') document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1]) document.writeln('</div>') document.writeln('</div>') document.writeln('</div>') } </script> </td> </tr> </table> </head> <body> </body> </html> Thank you Similar TutorialsHi to all, Plaese any body help me out. I have a problem with the flash. The flash file has been written in the javascript. just am calling the javascript file to my main page. Now i have a prob. When page loads, the flash image has jump to 2nd or 3rd image depending on the internet speed. if the net is fast, it is working well and starts from image 1 to till the end image. Now i have my query... if Is it possible to put the static image for the every time the page loads depending on the net speed and after complete the loading the flash has to start. Please egarly waiting for the answer. www.fabulant.com features a JavaScript that is capable to create a mirrored image out of any image. The script requires a lot of clipping and repositioning of those clipping. My question: is there al less cumbersome way to create mirrored images with JavaScript?
Hi, Ok i want to do the following... I am using blogger and I have thousands of posts and each post topic has a specific image assigned to it but every now and then I like to change the image that is being displayed but then I have to go through thousands of posts to change the image URL and this takes super long to complete. I thought of an idea of using Javascript to control this so I need your help please.. I want to be able to have a JS that I can insert the URL's of each image required for the posts and assign an ID like a number or a name to them, then have a seperate JS script that I can insert in ALL my posts and assign the same number to each related post relating to the image ID... So if I need to change images then all I need to do is change the URL in the Javascript and it affects all the posts that contain this image... hope this makes sense.. Please help Thank you. I have seen code like this but it only randomizes the images but is the same concept, perhaps someone can just alter this code for me please... [CODE] <head> <script language="JavaScript"> <!-- var theImages = new Array() theImages[0] = 'http://lh5.ggpht.com/_MAclvGBXzj4/TEtvnlxvvrI/AAAAAAAABQw/N7UVoBvtjxU/s320/video34.png' theImages[1] = 'http://lh6.ggpht.com/_MAclvGBXzj4/TEIZlr5FE6I/AAAAAAAABKU/LoBdw7Kqf3w/s200/Inside-blogger-256.png' theImages[2] = 'http://3.bp.blogspot.com/_MAclvGBXzj4/TCHDY788QaI/AAAAAAAAAAU/SnWr-NP0dqE/s200/news.png' theImages[3] = 'http://3.bp.blogspot.com/_MAclvGBXzj4/TEwgs_hhcXI/AAAAAAAABQ4/JTX1mzmdQLU/s200/croatia-flag.GIF' theImages[4] = 'http://lh6.ggpht.com/_MAclvGBXzj4/TEtzAvpIEQI/AAAAAAAABQ0/RiLAfiUsCiA/s320/warning23.png' var j = 0 var p = theImages.length; var preBuffer = new Array() for (i = 0; i < p; i++){ preBuffer[i] = new Image() preBuffer[i].src = theImages[i] } var whichImage = Math.round(Math.random()*(p-1)); function showImage(){ document.write('<img src="'+theImages[whichImage]+'">'); } //--> </script> </head> <body> <script language="JavaScript"> <!-- showImage(); </script> </body> [CODE] I'm writing a matching game. I have uploaded an example. I want to be able to read the current image rather than the default image as a variable to compare in an IF statement. http://www.mediafire.com/file/8nq4s5...a/matching.zip Hi, I've got a game 99% finished, basically when the game start and the player clicks through to the game panel, there are 30 tiles (80x80px) each, and the object of the game is for the player to press the tile with the letter "X" on, the X can be on any 1 of 5 different coloured tiles at anyone time and of course there can be more than 1 tile having an X on it. The tiles currently are built via .css, and this works 100% perfectly. However now I want to use images, pulled in from my local website instead of tiles built via .css. A demo of what I'm kinda of after is here > Edit fiddle - JSFiddle - if you press "run" the images will keep changing their order. The code I currently have for the game is here.. //CODE// var TheColorArray = ['red', 'yellow', 'green', 'blue', 'orange'], TheScore = 0, TimerLength = 2500, GameTimer, ScoreMap = { 'red': 500, 'yellow': 50, 'green': 30, 'blue': 20, 'orange': 5 }; function DrawRow() { TheColorArray.sort(function () { return .5 - Math.random(); }); var TheHTML = '<div class="row">'; var MagicColumn = Math.floor(Math.random() * 6); for (var i = 0; i < 5; i++) { if (i === MagicColumn) { TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">x</div>'; } else { TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">' + String.fromCharCode(97 + Math.floor(Math.random() * 26)) + '</div>'; } } TheHTML = TheHTML + '</div>'; return TheHTML; } You'll also see that "TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">x</div>';" and "TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">' + String.fromCharCode(97 + Math.floor(Math.random() * 26)) + '</div>';" both state that if X is pressed the game basically carries on. I need this to use a chosen image from my server, i.e. URL/apple.png .... i have also managed to get to this point (with apples) but its just not working.. Edit fiddle - JSFiddle Any help would be great.. Many thanks in advance!!! Hi All. I am new to all this and I am posting a problem up here that I think is quite rare or has not been looked into for a long time now. I am basically looking to create a background for my website and when you refresh the page the image changes to another picture for the background. I have asked one of my good friends to have a look at it and he gave me some code to work with and so I have changed bits here and there and it worked in firefox and safari but will not work in IE. When I asked him he had no clue what to do. So here I am now! I am hoping it is simple but I also know it wont be to an extent! Any help would be much appreciated here. I have attached the code here for you and also the html file. Code: <!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">
</head>
<style type="text/css">
<!--
#myFlash {
position:absolute;
width:100%;
height:100%;
margin:0;
padding:0;
left:0;
right:0;
z-index:20;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Experts Connect</title>
<meta name="keywords" content="Experts connect Preston, Experts connect Lancashire, Medical reports, Preston medical and legal agency, Lancashire medical and legal agency, specialist providers of independent medical evidence, diagnostic and rehabilitation services to the personal injury market, Medico Legal, personal injury claims, refferers." />
<meta name="description" content="Experts Connect are an established legal and medical agency providing reports for persobal injury claims. We work to get the best possible examination we can to ensure your claim goes through with no fuss. We are based nationally and work all over the United Kingdom." />
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="revisit-after" content="10 days" />
<link rel="stylesheet" type="text/css" href="/common/basic.css" />
<script type="text/javascript" src="crossfade.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myFlashContent", "9.0.0", "expressInstall.swf");
</script>
<style type="text/css">
body { width:auto; height:auto; background-color:#CCCCCC;}
#bgimage {
filter:alpha(opacity=40);
-moz-opacity:0.40;
-khtml-opacity:0.40;
opacity:0.40;
width:100%;
height:100%;
position:absolute;
margin:0;
padding:0;
left:0;
right:0;
}
</style>
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript">
<SCRIPT/>
<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0] = 'back4.jpg'
theImages[1] = 'back2.jpg'
theImages[2] = 'back5.jpg'
theImages[3] = 'back6.jpg'
theImages[4] = 'back8.jpg'
// do not edit anything below this line
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img id="bgimage" src="'+theImages[whichImage]+'">');
// End -->
</script>
</head>
<div id="myFlash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="myFlashContent" name="expertsconnect" align="middle">
<param name="movie" value="experts-connectwebsite.swf" />
<param name="quality" value="high" />
<param name="scale" value="exactfit" />
<param name="wmode" value="transparent" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="experts-connectwebsite.swf" width="100%" height="100%" align="middle">
<param name="quality" value="high" />
<param name="scale" value="exactfit" />
<param name="wmode" value="transparent" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
showImage();
// End -->
</script>
<!-- Script Size: 1.49 KB -->
</body>
</html>
There is also a flash file embedded into this document! Any help would be great with this. Thank you, Mark Hello! I am trying to set up a javascript to code radio buttons as images a la this site: http://www.shopbop.com/swan-ruffle-n...her-shopbysize I have been playing around w/ a couple scripts I found online, but haven't been able to find one that works very well. Some of them are too broad & just change all the buttons to a general selected/unselected image. I would want it to apply to different sizes & colours. If anyone could help me or point me in the right direction that would be great! Oh, & if it makes any difference I am working w/ 3d cart. Hello everyone! This is my first post. I know some html and css, but not much about javascript, and I have an existential problem with a portfolio i'm helping to design: The portfolio itself is for a night photographer that covers different events. For each event there is a page where the photos from that event are displayed. The thing is i don't want to write html code for each and every event, so i've been investigating how to automate this process and i've been answered: javascript. I want a horizontal layout page for each event, where all the images from its folder are displayed, with a horizontal scrollbar and no vertical scrollbar. I've managed to cover this with a combination between css and javascript code. The javascript code i'm using: <script src="../../docs/js/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function(){ $("#page-wrap").wrapInner("<table cellspacing='30'><tr>"); $(".post").wrap("<td>"); }); </script> Then i call for each image in the body of the html page: <div id="page-wrap"> <div class="post"> <img src="../../images/baobab04.02.11/1.jpg" width="720" height="480" border="0" /> </div> <div class="post"> <img src="../../images/baobab04.02.11/2.jpg" width="720" height="480" border="0" /> </div> </div> I've read about this function to loop for each image in a directory: foreach(string fileName f in Directory.GetFiles("SomeDirectory")) { ... } But i'm lost as to how to implement it and make a new <div class="post"> for each file in the directory. Thank you all in advance Hi All, I have a javascript scrollbar in the middle of the webpage, with two images as arrow at both end. Onclick of up and down arrow images the inside content moves up and down respectively. All works fine. What I need is, when I scroll down the down arrow should be disabled or invisible (as there is nothing to scrolldown) and same way when the content is at the top, the up arrow should be disabled or invisible. Please help... Sharing the code : <body> <script src="http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/dw_event.js" type="text/javascript"></script> <script src="http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/dw_scroll.js" type="text/javascript"></script> <script src="http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/scroll_controls.js" type="text/javascript"></script> <script type="text/javascript"> function init_dw_Scroll() { var wndo = new dw_scrollObj('wn1', 'lyr1'); wndo.setUpScrollControls('scroll_links'); wndo.setUpScrollControls('wn1'); var wndo2 = new dw_scrollObj('wn2', 'lyr2'); var wndo3 = new dw_scrollObj('wn3', 'lyr3'); wndo3.setUpScrollbar("dragBar", "track", "v", 1, 1); wndo3.setUpScrollControls('scrollbar'); wndo3.setUpScrollControls('extra_controls'); wndo3.setUpScrollControls('wn3'); } if ( dw_scrollObj.isSupported() ) { dw_writeStyleSheet('http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/vert.css'); dw_Event.add( window, 'load', init_dw_Scroll); } </script> <link rel="stylesheet" href="http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/vert.css" media="screen"> <h2>Demonstration</h2> <div class="holder1"> <div class="hasImage scroll_controls" id="scroll_links"> <a class="mouseover_up up" href=""><img src="http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/tri-up.gif" alt="" width="12" height="12"></a> <a class="mouseover_down dn" href=""><img src="http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/tri-dn.gif" alt="" width="12" height="12"></a> </div> <div id="wn1"> <div style="left: 0px; top: 0px; visibility: visible;" id="lyr1"> <h3>Mouseover Scrolling </h3> <p>This example demonstrates vertical scrolling using mouseover links. Scroll speed is adjustable.</p> <p>Mouse down on the arrows to see the speed double. Original speed resumes on mouseup.</p> <p>The documentation provides information for setup. The download file contains examples in individual files for your convenience and ease of implementation.</p> <p>The code supports the capability to hide or swap images when the end is reached. Further information is provided upon request to licensed users of the code.</p> <p>Content repeated for your scrolling pleasure </p> <p>This example demonstrates vertical scrolling using mouseover links. Scroll speed is adjustable.</p> <p>Mouse down on the arrows to see the speed double. Original speed resumes on mouseup.</p> <p>The documentation provides information for setup. The download file contains examples in individual files for your convenience and ease of implementation.</p> <p>The code supports the capability to hide or swap images when the end is reached. Further information is provided upon request to licensed users of the code.</p> <p>Back to the <a href="#" class="click_up_to_0_0">top</a></p> </div> </div> </div> Hey Im trying to add links in the images for EasySlide but I cant see to see where to put it..... Here is the .js code: Code: /**
* @author Bruno Bornsztein <bruno@missingmethod.com>
* @copyright 2007 Curbly LLC
* @package Glider
* @license MIT
* @url http://www.missingmethod.com/projects/glider/
* @version 0.0.3
* @dependencies prototype.js 1.5.1+, effects.js
*/
/* Thanks to Andrew Dupont for refactoring help and code cleanup - http://andrewdupont.net/ */
Glider = Class.create();
Object.extend(Object.extend(Glider.prototype, Abstract.prototype), {
initialize: function(wrapper, options){
this.handStopped = false;
this.animating = false;
this.wrapper = $(wrapper);
this.scroller = this.wrapper.down('div.scroller');
this.contentDiv = this.scroller.down('div');
this.current = $(this.contentDiv.children[0].id);
this.sectionWidth = this.contentDiv.children[0].getWidth();
this.slideRelations = {};
this.options = Object.extend({
effectType: 'mosaic',
duration: 3.0,
frequency: 3,
eRows: Prototype.Browser.IE ? 3 : 6,
eCols: Prototype.Browser.IE ? 6 : 12,
eColor: '#FFFFFF'
}, options || {});
this.effects = {
'scroll' : this.scroll,
'speedscroll' : this.speedscroll,
'fade' : this.fade,
'blend' : this.blend,
'mosaic' : this.mosaic
};
this.sections = this.wrapper.getElementsBySelector('div.section');
for (var i = 0; i < this.sections.length; i++) {
var nextSibling = this.sections[i].nextSiblings()[0];
if (nextSibling){
this.slideRelations[this.sections[i].id] = nextSibling.id;
} else {
this.slideRelations[this.sections[i].id] = this.sections[0].id;
}
this.effects[this.options.effectType].bind(this)().prepare(this.sections[i], i);
}
this.events = {
mouseover: this.pause.bind(this),
mouseout: this.resume.bind(this)
};
this.addObservers();
if (this.options.autoGlide) {
this.start();
} else {
this.handStopped = true;
}
},
scroll: function() {
var glider = this;
return {
prepa function(el, i) {
if (i > 0) {
$(el).setStyle('left: ' + glider.sectionWidth + 'px;');
} else {
glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
}
},
animate: function(elementIdToShow, direction) {
$(elementIdToShow).setStyle('left: ' + (direction === 'normal' ? glider.sectionWidth : -glider.sectionWidth) + 'px;');
new Effect.Parallel([
new Effect.Move(elementIdToShow, {
sync: true,
x: 0,
y: 0,
mode: 'absolute'
}),
new Effect.Move(glider.current.id, {
sync: true,
x: direction === 'normal' ? -glider.sectionWidth : glider.sectionWidth,
y: 0,
mode: 'absolute'
})
], {
duration: glider.options.duration,
afterFinish: function() {
glider.setAnimating(false);
}.bind(glider)
});
}
}
},
speedscroll: function() {
var glider = this;
return {
prepa function(el, i) {
if (i > 0) {
$(el).setStyle('left: ' + glider.sectionWidth + 'px;');
} else {
glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
}
},
animate: function(elementIdToShow, direction) {
$(elementIdToShow).setStyle('left: ' + (direction === 'normal' ? glider.sectionWidth : -glider.sectionWidth) + 'px;');
$(elementIdToShow).setStyle({zIndex: 5});
$(glider.current.id).setStyle({zIndex: 1});
var currentId = glider.current.id;
new Effect.Move(elementIdToShow, {
x: 0,
y: 0,
mode: 'absolute',
transition: Effect.Transitions.linear,
duration: glider.options.duration / 2,
afterFinish: function() {
moveCurrent.cancel();
$(currentId).setStyle('left: ' + (direction === 'normal' ? -glider.sectionWidth : glider.sectionWidth) + 'px;');
glider.setAnimating(false);
}
});
var moveCurrent = new Effect.Move(glider.current.id, {
x: direction === 'normal' ? -glider.sectionWidth : glider.sectionWidth,
y: 0,
mode: 'absolute',
transition: Effect.Transitions.linear,
duration: glider.options.duration
});
}
}
},
fade: function() {
var glider = this;
return {
prepa function(el, i) {
if (i > 0) {
el.setOpacity(0);
$(el).setStyle({ zIndex : '0' });
} else {
glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
$(el).setStyle({ zIndex : '998' });
$$('.easyslidecontrolwr')[0].setStyle({ zIndex : '999' });
}
},
animate: function(elementIdToShow, direction) {
$(elementIdToShow).setStyle({ zIndex : '998' });
$(glider.current.id).setStyle({ zIndex : '0' });
new Effect.Opacity(glider.current.id, {
duration: glider.options.duration,
from: 1.0,
to: 0.0,
afterFinish: function() {
new Effect.Opacity(elementIdToShow, {
duration: glider.options.duration,
from: 0.0,
to: 1.0,
afterFinish: function() {
glider.setAnimating(false);
}.bind(glider)
});
}.bind(glider)
});
}
}
},
blend: function() {
var glider = this;
return {
prepa function(el, i) {
if (i > 0) {
el.setOpacity(0);
$(el).setStyle({ zIndex : '0' });
} else {
glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
$(el).setStyle({ zIndex : '998' });
$$('.easyslidecontrolwr')[0].setStyle({ zIndex : '999' });
}
},
animate: function(elementIdToShow, direction) {
$(elementIdToShow).setStyle({ zIndex : '998' });
$(glider.current.id).setStyle({ zIndex : '0' });
new Effect.Parallel([
new Effect.Opacity(glider.current.id, {
sync: true,
duration: glider.options.duration,
from: 1.0,
to: 0.0
}),
new Effect.Opacity(elementIdToShow, {
sync: true,
duration: glider.options.duration,
from: 0.0,
to: 1.0
})
], {
duration: glider.options.duration,
afterFinish: function() {
glider.setAnimating(false);
}.bind(glider)
});
}
}
},
mosaic: function() {
var glider = this;
var delayedAppear = function(eSquare) {
var opacity = Math.random();
new Effect.Parallel([
new Effect.Appear ( eSquare, {from: 0, to: opacity, duration: this.options.duration} ),
new Effect.Appear ( eSquare, {from: opacity, to: 0, duration: this.options.duration/1.25} )
], {sync: false});
};
return {
prepa function(el, i) {
if (i > 0) {
el.setStyle({ zIndex : 0 });
el.hide();
} else {
el.setStyle({ zIndex : 999 });
glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
}
if (i == (glider.sections.length - 1)) {
glider.eSquares = [];
var elDimension = el.getDimensions();
var elWidth = elDimension.width;
var elHeight = elDimension.height;
var sqWidth = elWidth / glider.options.eCols;
var sqHeight = elHeight / glider.options.eRows;
$R(0, glider.options.eCols-1).each(function(col) {
glider.eSquares[col] = [];
$R(0, glider.options.eRows-1).each(function(row) {
var sqLeft = col * sqWidth;
var sqTop = row * sqHeight;
glider.eSquares[col][row] = new Element('div').setStyle({
opacity : 0,
backgroundColor : glider.options.eColor,
position : 'absolute',
zIndex : 5,
left : sqLeft + 'px',
top : sqTop + 'px',
width : sqWidth + 'px',
height : sqHeight + 'px'
});
el.up('div').insert(glider.eSquares[col][row]);
}.bind(glider))
}.bind(glider));
}
},
animate: function(elementIdToShow, direction) {
$(elementIdToShow).setStyle({ zIndex : 999 });
$(glider.current.id).setStyle({ zIndex : 0 });
new Effect.Parallel([
new Effect.Fade(glider.current.id, {sync: true}),
new Effect.Appear(elementIdToShow, {sync: true})
], {
duration: glider.options.duration,
afterFinish: function() {
glider.setAnimating(false);
}.bind(glider)
});
$R(0, glider.options.eCols-1).each(function(col) {
$R(0, glider.options.eRows-1).each(function(row) {
var eSquare = glider.eSquares[col][row];
var delay = Math.random() * (glider.options.duration / 3) * 1000;
setTimeout(delayedAppear.bind(glider, eSquare), delay);
}.bind(this))
}.bind(this));
}
}
},
setAnimating: function(flag) {
this.animating = flag;
if (flag) {
$$('.easyslidecontrolwr')[0].addClassName('disabled');
} else {
$$('.easyslidecontrolwr')[0].removeClassName('disabled');
}
},
addObservers: function(){
this.wrapper.observe('mouseover', this.events.mouseover);
this.wrapper.observe('mouseout', this.events.mouseout);
var descriptions = this.wrapper.getElementsBySelector('div.sliderdescription');
descriptions.invoke('observe', 'mouseover', this.makeActive);
descriptions.invoke('observe', 'mouseout', this.makeInactive);
//Nubmbers
var controls = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslidedirect');
controls.invoke('observe', 'click', this.numClick.bind(this));
//Arrows
var stop = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslidestop');
stop.invoke('observe', 'click', this.stop.bind(this));
var play = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslideplay');
play.invoke('observe', 'click', this.start.bind(this));
var prev = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslideprev');
prev.invoke('observe', 'click', this.previous.bind(this));
var next = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslidenext');
next.invoke('observe', 'click', this.next.bind(this));
},
numClick: function(event){
var element = Event.findElement(event, 'a'); /*clicked link*/
var nextElementId = element.href.split('#')[1];
var direction = 'normal';
for (var i in this.slideRelations) {
if (i === this.current.id) {
direction = 'normal';
break;
}
if (i === nextElementId) {
direction = 'reverse';
break;
}
}
this.animate(nextElementId, direction);
Event.stop(event);
},
animate: function(elementIdToShow, direction){
if (this.animating || this.current.id == elementIdToShow) {
return;
}
this.setAnimating(true);
this.toggleControl($$('a[href="#' + elementIdToShow + '"]')[0]);
this.effects[this.options.effectType].bind(this)().animate(elementIdToShow, direction);
this.current = $(elementIdToShow);
},
next: function(event){
var nextMove = '';
nextMove = this.slideRelations[this.current.id];
this.animate(nextMove, 'normal');
if (event) {
Event.stop(event);
}
},
previous: function(event){
var prevMove = '';
for (var i in this.slideRelations) {
if (this.slideRelations[i] == this.current.id) {
prevMove = i;
break;
}
}
this.animate(prevMove, 'reverse');
if (event) {
Event.stop(event);
}
},
makeActive: function(event){
var element = Event.findElement(event, 'div');
element.addClassName('active');
},
makeInactive: function(event){
var element = Event.findElement(event, 'div');
element.removeClassName('active');
},
toggleControl: function(el){
if (!el) return false;
$$('.easyslidercontrol a').invoke('removeClassName', 'active');
el.addClassName('active');
},
stop: function(event){
this.handStopped = true;
clearTimeout(this.timer);
Event.stop(event);
},
start: function(event){
this.handStopped = false;
this.periodicallyUpdate();
if (event) {
Event.stop(event);
}
},
pause: function(event){
if (!this.handStopped) {
clearTimeout(this.timer);
this.timer = null;
}
Event.stop(event);
},
resume: function(event){
if (!this.handStopped) {
this.periodicallyUpdate();
}
},
periodicallyUpdate: function(){
if (this.timer != null) {
clearTimeout(this.timer);
this.next();
}
this.timer = setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency * 1000);
}
});
Somewhere there each time a image appears I want it to go to a certain link (for example purposes: google.com). How can I do this? I imagine there is a onClick event somewhere in there but I just cannot find it. Thanks! I am confuseif i use JS.. its should be in <head> but table should be in <body>.. how am i going to use that.. and put images in that table cell using JS??
I'm trying to do some rollover images for a webpage I need to design, for class. I have them set up, and they work.. but the issue is that I set it up in such a way that the .js file is dynamic, and works for each page. You know, so that I don't actually have to specify the images within the .js file. The problem with THAT is that it doesn't automatically load the rollover version of each image, when the page loads.. so it's a bit sluggish. Here's my .js file Code: function swap_image(name,source) {
document.images[name].src=source;
var argv=swap_image.arguments;
if(argv[2] && argv[3] && document.getElementById) {
element=document.getElementById(argv[2]);
element.innerHTML=argv[3];
}
}
Here's how I have it in the HTML Code: <a href="gallery" onmouseover="swap_image('gallery','/images/galleryro.jpg')" onmouseout="swap_image('gallery','/images/gallery.jpg')">
<img style = "top:150px; left:100px;" border="0" id="gallery" src="/images/gallery.jpg"/> </a>
Is there anything I can do to force it to load the rollover image, without sacrificing my dynamic .js code? Greetings, I am looking for either a JavaScript or Coldfusion solution to the following problem. First, there are over 60 million product photos so downloading and resizing the photos using Coldfusion would be very tedious. I would like the display an image within a 100 x 100 pixel container. If the height or width of the image is great than 100 pixels, the image should reduce in size to fit within the 100 x 100 pixel container. I want to avoid pixelation of the images as much as possible. All images are external and not on the local server so I only have an image URL. I would like to hide all images until they are resized appropriately. Does anybody know of a piece of javascript code that can do something similar to this? Sincerely, Travis Walters Hello I have a working code which generates barcode 39 using javascript and CSS(to display the bars). The thing is... the program generates it bar by bar making it very difficult to manage. I would love to have the entire barcode an an image instead. For example: If somebody's id= 12340, the program takes each number and creates an equivalent black or white bar one after the other, and then displays it. I want to have it as an image(jpeg,gif etc) but don't know how to If anyone have something to say, you are most welcome. Anxiously waiting Hello, I have develop a piece of code that when the user loads the html page it will load a local image but if the image doesn't exist it will load from a remote server. The question that remains is if it's possible to make an event in case the image is load locally? 1) HTML Page is load 2) If image doesn't exist locally reload from the server 3) If the image is load locally report back to the site Is the 3) possible? Hi We've been trying to work out the solution to this problem all day now, and no luck. So I'm hoping someone here maybe able to help. We're using a fade image slideshow from : http://www.javascriptkit.com/script/...tionshow.shtml On our webpage: http://lovelyhotels.co.uk/lvm/contact.htm It works perfectly in Firefox, Chrome and Safari. However in I.E. ( were using v.9) it shows no images at all, just a blank space The code is exactly the same as the page on javascriptkit yet his images fade as they should in IE and ours do not show at all. Anyone got any ideas at all what maybe wrong Many thanks! As a homework assignment, we are being asked to generate a table of images with at least 2 rows and 3 columns from an external javascript function. I've been trying to find some kind of javascript reference for this and I can't. I don't want someone to do it for me, but if I could get a basic example that would be great.
I have a site that works just fine in fire fox but surprise surprise, there is a lot of problems in IE8 that dont make sense at all. Here is my link: http://paperlesswasp.com/royalvillicus/recompare.php Code: <span class="menu1" id="menu1"> <map name="menu1" id="menu1"> <area alt="memberships" shape="rect" coords="134, 143, 176, 166" href="http://realtor.com"/> <area alt="memberships" shape="rect" coords="188, 143, 231, 166" href="http://realestate.yahoo.com/"/> <area alt="memberships" shape="rect" coords="243, 143, 285, 166" href="http://realestate.com"/> <area alt="memberships" shape="rect" coords="297, 143, 340, 166" href="http://frontdoor.com"/> <area alt="memberships" shape="rect" coords="351, 143, 394, 166" href="http://homes.com"/> </map> <img src="image/rsummary.png" alt="site comparison" usemap="#menu1" width="" height="" vspace="5" hspace="1"/><br><br> </span> <span id="ex_10" style="display:none;"> <img src="image/rranking.png" name="ex_4" id="ex_4" alt="ranking" width="" height="" vspace="5" hspace="1"/><br> </span> <span id="ex_9" style="display:none;"> <img src="image/relistings.png" name="ex_5" id="ex_5" alt="listings" width="" height="" vspace="5" hspace="1"/><br> </span> <span id="ex_6" style="display:none;"> <img src="image/relistingsearches.png" name="ex_6" id="ex_6" alt="listings searches" width="" height="" vspace="5" hspace="1"/><br> </span> <span id="ex_7" style="display:none;"> <img src="image/recalculators.png" name="ex_7" id="ex_7" alt="calculators" width="" height="" vspace="5" hspace="1"/><br> </span> <span id="ex_8" style="display:none;"> <img src="image/reresources.png" name="ex_8" id="ex_8" alt="resources" width="" height="" vspace="5" hspace="1"/><br> </span> <span id="ex_11" style="display:none;"> <img src="image/remarketdata.png" name="ex_8" id="ex_8" alt="resources" width="" height="" vspace="5" hspace="1"/><br> </span> if you look under: http://paperlesswasp.com/royalvillicus/calculator.php IE8 will only show 2 out of the 7 drop down menu bars that are suppose to be there. works in IE8 and firefox Code: <img src="image/wroi.png" onmouseover="rollOn(this)" onmouseout="rollOff(this)" onclick="showMe(12)" vspace="1" hspace="1" class="position"><br><br> works only in firefox Code: <img src="image/wtax.png" onmouseover="rollOn(this)" onmouseout="rollOff(this)" onclick="showMe(11)" vspace="1" hspace="1" class="position"><br><br> Fire fox handles these just fine, but IE8 doesnt. I appreciate any siggestions Hi i have two images which are part of a rollover button that i want to have paused until the intro animation finishes. I have the javascript code but the rollover images are specified in the css. I just have the id to them in the html. I was wondering if anyone knew how to include the rollover files with the pausing javascript code. the files are profile.gif and profileover.gif. I tried to add the files to the preload part of the javascript but that didn't work. The website is www.creationindex.com/indextest.html thank you
|
|||||||