|
JavaScript - Javascript Help With Image Crossfade
I am working on a simple image crossfade for my website, and i downloaded a good file folder with a javascript code that works well. it's exactly what i'm trying to achieve. yet, when i put in the code into my webpage index it doesn't fade like it should. the images fade out but don't cross-fade into each other.
I tried testing the original file/script with alternate images/jpgs to see if my images were messing things up but it was fine, yet when i use MY webpage in MY root folder it doesn't work. so is there something wrong with my rootfolder that is messing up the javascript? i'm pulling my hair out because the code looks fine to me. please help! thanks!! jason Similar TutorialsThis is a image background slideshow im trying to incorp into a DIV instead of the <body>. Ive tried getElementById. But im still having trouble getting it to work. Also the crossfade only works in Internet explorer, i looked up the code to try and fix it for Firefox but i think it only works with CSS3. Any input would be great, i dont know a lot about Javascript most of this is self taut with a little experience using C++. Code: <script language="JavaScript">
<!----------------------------------------------------------------------------
var speed = 3000;
var crossFadeDuration = 3;
var Pic = new Array();
Pic[0] = 'drawing1.jpg';
Pic[1] = 'drawing2.jpg';
Pic[2] = 'drawing1.jpg';
Pic[3] = 'drawing2.jpg';
Pic[4] = 'drawing1.jpg';
Pic[5] = 'drawing2.jpg';
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++)
{
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow()
{
if (document.MozOpacity!=null)
{
/*trying to fix crossfade for Firefox*/
obj.style.MozOpacity = (opacity/100) - .001;
}
else if (document.all)
{
document.body.style.filter="blendTrans(duration=crossFadeDuration)";
document.body.filters.blendTrans.Apply();
document.body.filters.blendTrans.Play();
}
if (document.body)
{
document.body.background = Pic[j];
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', speed)
}
}
//--------------------------------------------------------------------------------
</script>
</head>
<body onload="runSlideShow()" bgcolor="#000000">
Code: I am trying to get the following image fade code to work but can't seem to figure out what the problem is. The images appear quickly (don't fade one to the other) in Firefox and Google and in IE8 when the image fades, even though the images are the same size, the new image starts out smaller and grows to the final size. Any suggestions are greatly appreciated.
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 2500;
// Specify the image files
var Pic = new Array();
Pic[0] = 'images/Monsanto.gif'
Pic[1] = 'images/Test2.jpg'
Pic[2] = 'images/Test3.jpg'
Pic[3] = 'images/Test4.jpg'
Pic[4] = 'images/Test5.jpg'
Pic[5] = 'images/Test1.jpg'
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
preLoad.sort(function() {return 0.5 - Math.random()});
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->
</script>
I am trying to persuade the javascript to fade from one image into the next, but I'm only succeeding at fading into nothing, and then making the next image appear. The effect can be seen he http://userpages.bright.net/~toddw/orbit/aheader0.html The effect that I am trying to achieve is he http://userpages.bright.net/~toddw/orbit/aheader9.html the problem with the second example is that I can't figure out how to add the navigation controls,… so I thought it would be easier to address the crossfade with the first example. Code: var openBtn2 = "images/Button_open.gif";
var solidBtn2 = "images/Button_solid.gif";
var intervalID2;
var showing2 = 1;
var truckArray = new Array("","truck1","truck2","truck3","truck4");
var truckbtnArray = new Array("","truckBtn1","truckBtn2","truckBtn3","truckBtn4");
var inProgress2 = false;
function swapTruck(next) {
if (inProgress2) return;
inProgress2 = true;
if (next == 0) { next = showing2 + 1; } //if swapTruck is not called from a button
if (next == 5) { next = 1; } ***//if its the last news item
new Effect.Fade(truckArray[showing2], { duration: 0.3});
setTimeout(function() {
$(truckbtnArray[showing2]).src = openBtn2
$(truckbtnArray[showing2]).style.cursor = "pointer"
$(truckbtnArray[next]).src = solidBtn2
$(truckbtnArray[next]).style.cursor = "default"
new Effect.Appear(truckArray[next], { duration: 0.3})
showing2 = next
inProgress2 = false
}, 300);
clearInterval(intervalID2);
intervalID2 = setInterval("swapTruck(0)", 25000);
}
Event.observe(window, 'load', function() { //this binds the function() to the event window.onload
intervalID2 = setInterval("swapTruck(0)", 25000);
$("truckBtn1").src = solidBtn2;
$("truckBtn2").src = openBtn2;
$("truckBtn2").style.cursor = "pointer";
$("truckBtn3").src = openBtn2;
$("truckBtn3").style.cursor = "pointer";
$("truckBtn4").src = openBtn2;
$("truckBtn4").style.cursor = "pointer";
});
My html looks like this: <!-- define images for fading into each other --> <div id="slider"> <div id="truck1"><img src="c5_app_2.jpg" title="" /></div> <div id="truck2" style="display:none;"><img src="infolink_main.jpg" title="" /></div> <div id="truck3" style="display:none;"><img src="rr5700_app_2.jpg" title="" /></div> <div id="truck4" style="display:none;"><img src="c5_app_1.jpg" title="" /></div> </div> <!-- navigational buttons for image fade --> <div class="truck_buttons"> <img src="(EmptyReference!)" onClick="swapTruck(1)" id="truckBtn1"> <img src="(EmptyReference!)" onClick="swapTruck(2)" id="truckBtn2"> <img src="(EmptyReference!)" onClick="swapTruck(3)" id="truckBtn3"> <img src="(EmptyReference!)" onClick="swapTruck(4)" id="truckBtn4"> </div> Hi there, for a site I'm working on I needed an interactive crossfading slideshow (one that doesn't just run automatically, but with 'previous' and 'next' links) and noticed that all the solutions I stumbled upon fall into one of two categories: 1.) the ones that in some way or other break if the user clicks too fast through the images (i.e. fast enough that the previous crossfade is not completely finished when triggering the next one) 2.) the ones that block any user interactions until the last crossfade is finished Obviously neither is very useful, so I wrote my own. I'm just wondering now, does anyone of you know of any good reusable crossfading slideshow that not only works as it should, but does so without blocking user interaction while fading? As a user, I don't have the patience for those time wasters any more. If there's nothing good out there, I'm tempted to make it a jQuery plugin, but I wouldn't much like to find out later that there has been a perfectly good plugin out there all along. So, if you know of one or have any other helpful suggestions, please tell me. 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. 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"> <!-- #$-:Image map file created by GIMP Image Map plug-in --> <!-- #$-:GIMP Image Map plug-in by Maurits Rijk --> <!-- #$-:Please do not edit lines starting with "#$" --> <!-- #$VERSION:2.3 --> <!-- #$AUTHOR:markp --> <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> Hello. I am having trouble with a simple image gallery with navigational buttons including "first", "next", "previous", and "last"; and making a drop-down archive menu. 1. For the most part, the image gallery works. The problem is that when a user clicks on "next", and then "prev", the last image is not displayed. On the other hand, if a user clicks "prev", and then "next" the last image is displayed(works normally). 2. The way I am displaying the last image, the function last(), is not efficient. It simply refreshes the page in order to display the last image. Basic overview: The images follow a simple standard: page1, page2, page3,...page64; they are in a subfolder "img". The function changeImage() changes the image from the prev, to the next. The image gallery displays the last image in the gallery; when a user clicks on 'prev' it goes to the previous image, and go to the next image when clicked on 'next'. If the current image is the last image, and the user clicks on 'next', it goes to the very first image. Here is the code (in the <HEAD> tags): Code: <script language="JavaScript"><!--
which_image_loaded = -1;
NUMBER_OF_IMAGES = 64;
current_comic = 0;
ImageNames = new Array;
ImageNames.length = NUMBER_OF_IMAGES - 1;
for (counter = 0; counter < NUMBER_OF_IMAGES; counter++){
file_number = counter + 1;
filename = ("../img/page" + file_number + ".png");
ImageNames[counter] = filename;
}
function changeImage(direction) {
which_image_loaded += direction;
current_comic = which_image_loaded + 1;
if (which_image_loaded < 0)
which_image_loaded = NUMBER_OF_IMAGES - 1;
if (which_image_loaded == NUMBER_OF_IMAGES)
which_image_loaded = 0;
if(current_comic <= 0){
which_image_loaded--;
}
document.myimage.src = ImageNames[which_image_loaded];
}
function first(){
which_image_loaded = 0;
current_comic = 1;
document.myimage.src = ImageNames[0];
}
function last(){
window.location='http://www.bearoncampus.com';
}
and in the <BODY> tags Code: <img src="img/page64.png" alt="New comic not available." name="myimage" width="725" height="275"> <form> <input type="button" value="FIRST" onClick="first()"/> <input type="button" value="PREV" onClick='changeImage(-1);' /> <input type="button" value="NEXT" onClick='changeImage(1);' /> <input type="button" value="LAST" onclick="last()" /> </form> My guess is the code is not working properly due to the initial values of the counter. Last, is there a way to display the current image "myimage.src" using a dropdown menu with each option value as each image? I have done this with window.location, but this only redirects to the image location. Much thanks. Any help is greatly appreciated. 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. 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?
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~ I am using the JavaScript Image Scroll found on http://net.tutsplus.com/tutorials/ja...mage-scroller/. I would like to make it so that the images loop with no gap, it has a view demo on the site which you can see here; http://net.tutsplus.com/tutorials/ja...mage-scroller/ Many Thanks, Tim 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 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>
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 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! 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 Can someone point me in the right direction to making custom javascript image slideshow transitions?
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.
http://www.muffettandsons.com/specproductstest.html Follow the link above and click on the pic to the right to open the pop up image gallery. For some reason the thumbs do not appear in the left preview pane until a rollover of the preview pane slide bar. This only occurs in IE. Firefox and Chrome both show the thumbs when opened and work just fine. Any help would be greatly appreciated... Thanks Hello, I'm a complete javascript beginner so sorry if I'm just being stupid I wanted to know if it's possible for me to add a picture (as in a .png file) to a page by clicking on something which would then make an image appear on the screen (which I would then want to be able to drag and move but I made a different thread for that question) I hope this explanation made sense Thank you for your time |
|||||||