|
JavaScript - Javascript Table Fade In
Hey, I have modified a script that used to fade in a image (and it worked fine) to fade in a table with that image inside it.
The table doesn't fade in The HTML that is produced is exactly this, but the hashes are urls: Code: <table style="float:left; opacity:0; "> <tr <td> <a href="#" rel="lightbox[group]"> <img src="#" width="97" height="97" /> </a> </td> </tr> <tr> <th> </th> </tr> </table> These are my two functions Code: function addImage(src) {
var table = document.createElement("table");
table.style.float = "left";
var tr_1 = document.createElement("tr");
var td_1 = document.createElement("td");
var a_1 = document.createElement("a");
a_1.src = src;
a_1.rel = "lightbox[group]";
var img_1 = document.createElement("img");
img_1.src = src;
img_1.width = 97;
img_1.height = 97;
a_1.appendChild(img_1);
td_1.appendChild(a_1);
tr_1.appendChild(td_1);
var tr_2 = document.createElement("tr");
var th_2 = document.createElement("th");
tr_2.appendChild(th_2);
table.appendChild(tr_1);
table.appendChild(tr_2);
document.getElementById("thumbnails").appendChild(table);
if (table.filters) {
try {
table.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;
} catch (e) {
// If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
table.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')';
}
} else {
table.style.opacity = 0;
}
table.onload = function () {
fadeIn(table, 0);
};
}
function fadeIn(element, opacity) {
var reduceOpacityBy = 5;
var rate = 30; // 15 fps
if (opacity < 100) {
opacity += reduceOpacityBy;
if (opacity > 100) {
opacity = 100;
}
if (element.filters) {
try {
element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity;
} catch (e) {
// If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')';
}
} else {
element.style.opacity = opacity / 100;
}
}
if (opacity < 100) {
setTimeout(function () {
fadeIn(element, opacity);
}, rate);
}
}
this is the previous addImage function: Code: function addImage(src) {
var newImg = document.createElement("img");
newImg.style.margin = "5px";
document.getElementById("thumbnails").appendChild(newImg);
if (newImg.filters) {
try {
newImg.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;
} catch (e) {
// If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
newImg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')';
}
} else {
newImg.style.opacity = 0;
}
newImg.onload = function () {
fadeIn(newImg, 0);
};
newImg.src = src;
}
The opacity of the table stays at 0, and never appears (but I can still click on the link) Can anyone help me make the table fade in like it was supposed to? Similar TutorialsThis is a really awesome script that I'm sure all of you can put to use if you haven't yet heard of it. However, I'm trying to get it to fade a background image on my css styled navigation for my a:hover. Here is the script with a little simple tutorial on how to set it up: http://bavotasan.com/tutorials/creat...r-fade-effect/ My only other knowledge is in PHP, so after about 2 hours of fail in this client-side language, I decided it was about time I should post where some experienced people can help. I really appreciate all time you spend on this, and don't think it will take a moderate Javascript programmer very long. This is the link to my site so far: http://matt.mw/help-request You can see the script working as it is on my little yellow MW logo on the right side of the navigation. So in my scenario, I am looking to fade button.png to button-hover.png (both repeating on the x axis). Any ideas? I'm trying to recreate the fade hover effect shown on the menu at the top here http://www.dragoninteractive.com/. I have found some javascript which looks like it will do the trick. But being a graphic designer and not a web developer or anything it just doesn't work. lol Currently I have a CSS opacity filter on, but please discard that as it should just show what i am trying to achieve. This is my very first attempt at Javascript here is the html: Code: <link href="style.css" rel="stylesheet" type="text/css" /> <script src="javascript.js" type="text/javascript"></script> </head> <body> <div style="margin:20px;" class="modules"> <div class="single_module"><a class="toggleopacity" href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> </div> </body> And the CSS: Code: .modules {
margin:0px -20px 20px;
background-color:#9999CC;
min-height:100%;
width:100%;
}
.single_module {
border:solid 1px #000000;
background-color:#000000;
height:160px;
padding:0;
margin:-1px 0px 0px -1px;
width:240px;
float:left;
}
.toggleopacity img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity:0.5;
}
.toggleopacity:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity:1;
}
And the Javascript: Code: $("#single_module").css({ opacity: "0.0", display: "block" });
$("#single_module").hover(function(){$(this).fadeTo(100, 0.5);}, function(){$(this).fadeTo(300, 0.0);} );
$("#single_module").hide();
});
Hi! I'm wondering if somebody here could help me please. I'm trying to develope the image slideshow using PHP and JavaScript. The idea is that the PHP file gets random images from the folder, i'm using session to prevent repeating the same image and then JavaScript generates the fade slideshow using that PHP file. I've come up with the solution to use two img tags in the HTML page, so JavaScript then swap them around and play with opacity, but unfortunately couldn't make it work. Everything I have tried in JavaScript didn't work properly. I'd be grateful for any help and advice guys. Thank you. My PHP code: PHP Code: <?php class images { var $images = Array(); var $imgDir = 'images/'; function getImages() { $images = Array(); if ($dir = opendir($this->imgDir)) { while(($file = readdir($dir)) !== false) { if(preg_match('#(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)#i', $file)) $images[] = $file; } closedir($dir); } return $images; } function getNextImage() { if (($images = $this->getImages()) !== false) { session_start(); if (!isset($_SESSION['image'], $images[$_SESSION['image']])) { $index = mt_rand(0, count($images)-1); } else { $index = $_SESSION['image'] == count($images)-1 ? 0 : $_SESSION['image']+1; } $_SESSION['image'] = $index; return $images[$index]; } return false; } function outputImage() { if (($file = $this->getNextImage()) !== false) { header('Cache-Control: no-cache, must-revalidate'); // HTTP/1.1 header('Expires: Wed, 9 Dec 1981 07:00:00 GMT'); // Date in the past header('Content-type: image/jpg'); readfile($this->imgDir.$file); exit(); } } } $img = new images(); $img->outputImage(); ?> My HTML page: Code: <html> <head> <title>Images</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="javascript/slideshow2.js" language="javascript"></script> </head> <body onload="startSlideShow();"> <h1>Images</h1> <div id="imageWrap"> <div id="images"> <img id="sampleImgFade" src="images.php" alt="images" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;" width="800" height="600" onload="coverLoaded(this);" /> <img id="sampleImg" src="images.php" width="800" height="600" alt="images" onload="mainLoaded();" /> </div> </div> </body> </html> CSS code: Code: #imageWrap {
clear: both;
}
#images {
position: relative;
clear: both;
}
#sampleImgFade {
position: absolute;
top: 0px;
left: 0px;
}
JavaScript code which doesn't work properly(just to show in which direction I'm going): Code: var img;
var loaded = new Array();
loaded['start'] = true;
loaded['main'] = false;
loaded['cover'] = true;
var fade = 0;
var i = 0;
function getImage() {
img = new image();
img.src = "images.php";
}
function coverLoaded(obj) {
loaded['cover'] = true;
setOpacity(obj, 100);
window.setTimeout("startFade", 5000);
}
function mainLoaded() {
loaded['main'] = true;
if (loaded['start'] && loaded['cover'] && loaded['main']) startFade();
}
function startFade() {
loaded['start'] = false;
loaded['main'] = false;
loaded['cover'] = false;
fade = window.setInterval("fadeIn()", 50);
}
function fadeIn() {
var obj = document.getElementById("sampleImgFade");
var opacity = getOpacity(obj);
if (opacity > 0) {
setOpacity(obj, opacity-5);
} else {
window.clearInterval(fade);
document.getElementById("sampleImg").src = "images.php?u="+i++;
}
}
function getOpacity(obj) {
if (obj.filters) {
return obj.filters.item("DXImageTransform.Microsoft.Alpha").Opacity;
} else if (obj.style.MozOpacity) { // mozilla
return obj.style.MozOpacity*100;
} else if (obj.style.KhtmlOpacity) { // konquerer
return obj.style.KhtmlOpacity;
} else { // not supported
return 0;
}
}
function setOpacity(obj, opacity) {
if (obj.filters) {
obj.filters.item("DXImageTransform.Microsoft.Alpha").Opacity = opacity;
} else if (obj.style.MozOpacity) { // mozilla
obj.style.MozOpacity = opacity/100;
} else if (obj.style.KhtmlOpacity) { // konquerer
obj.style.KhtmlOpacity = opacity;
}
}
I have a script that fades links on load and im trying to get this to work on everything but the menu link that has the "active" class Code: <div id="menu"> <ul><li id="Home"><a title="Home" href="/" style="opacity: 0.6;">Home</a></li> <li class="active" id="projects"><a title="projects" href="/projects/" style="opacity: 0.6;">projects</a></li> <li class="last" id="Contact"><a title="Contact" href="/contact" style="opacity: 0.6;">Contact</a></li> </ul> </div> and here is the javascript.. (JQuery) Code: $(document).ready(function(){
$("#menu a").fadeTo("slow", 0.6); // This sets the opacity of the menu to fade down to 60% when the page loads
$("#menu a").hover(function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity to 40% on hover
},function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity back to 100% on mouseout
});
});
What do I add so any "<li>" that has the class "<li class="active"> isnt effected by the javascript so it just displays at 1.0 instead of 0.6? Hello, I'm learning javascript, and was wondering if it was Possible to have buttons/links that you click, the whole page fades out, and then fade's in, with different stuff. here are my ideas for just changing the stuff Text: 1. having a javascript src file to start, and then when the button is clicked, that is formatted to white, the text layer is moved down, and a new javascript file is loaded? 2.variables? any help would be appreciated! Thanks, Cookies, whatever this forum gives out, you may receive! PHP 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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript"> <!-- var image1=new Image() image1.src="images/slideshow/image001.jpg" var image2=new Image() image2.src="images/slideshow/image002.jpg" var image3=new Image() image3.src="images/slideshow/image003.jpg" var image4=new Image() image4.src="images/slideshow/image004.jpg" var image5=new Image() image5.src="images/slideshow/image005.jpg" var image6=new Image() image6.src="images/slideshow/image006.jpg" var image7=new Image() image7.src="images/slideshow/image007.jpg" var image8=new Image() image8.src="images/slideshow/image008.jpg" var image9=new Image() image9.src="images/slideshow/image009.jpg" var image10=new Image() image10.src="images/slideshow/image010.jpg" var image11=new Image() image11.src="images/slideshow/image011.jpg" var image12=new Image() image12.src="images/slideshow/image012.jpg" var image13=new Image() image13.src="images/slideshow/image013.jpg" var image14=new Image() image14.src="images/slideshow/image014.jpg" var image15=new Image() image15.src="images/slideshow/image015.jpg" var image16=new Image() image16.src="images/slideshow/image016.jpg" var image17=new Image() image17.src="images/slideshow/image017.jpg" var image18=new Image() image18.src="images/slideshow/image018.jpg" var image19=new Image() image19.src="images/slideshow/image019.jpg" var image20=new Image() image20.src="images/slideshow/image020.jpg" //--> </script> </head> <body> <img src="images/slideshow/image001.jpg" name="slide"> <script type="text/javascript"> <!-- //variable that will increment through the images var step=1 function slideit(){ //if browser does not support the image object, exit. if (!document.images) return document.images.slide.src=eval("image"+step+".src" ) if (step<20) step++ else step=1 //call function "slideit()" every 2.5 seconds setTimeout("slideit()",2500) } slideit() //--> </script> </body> </html> 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! Hello everybody! This is my first post at CodingForums! I'm currently designing a wordpress theme, and I require a bit of javascript for a hover effect. I'm using Wordpress Jquery + Jquery Color Animations plugin. The structu I use a div (class="post") as a container for the wordpress post, and within the "post" div, I have a span (class="title") which I use to display the title of the post. What I want to do is: when the user hovers over (OnMouseOver) "post" div: ".title" spans's background color fades from black to red. when the user hovers out (OnMouserOut) "post" div: ".title" spans's background color fades back to black. The Code Code: $j(document).ready(function(){
$j(".posts").hover(function(){
$j (".posts .title").animate({ backgroundColor: "#FF0062" }, 300);
},function(){
$j(".posts .title").animate({ backgroundColor: "#231F20" }, 300);
});
});
The Problem The code works, except when the user hovers over any "post" div, all "title" span change color. So my question is, how do I target the code to address ONLY the "title" span in the "post" div that is in hover state? Any help would be greatly appreciated, Cheers, Drew. http://www.javascriptkit.com/javatut...rnalphp2.shtml Anyone have a decent way of adding a fade affect to this script? My issue is that I have a javascript function applied on page load via an addLoadEvent function call in the head to every row (dynamic number of records retrieved) on a table. On every row of the table I also have an element (image or button) that performs a different function that is assigned on the element itself. Unfortunately, when I click the element it also performs the function that was applied to the row in the page load. Is there any way to not call this function on element click? I know usually you include code, but due to the nature of the work I am limited in that respect. Basically its: Code: <script type="text/javascript">
addLoadEvent(function() { function1(1); })
//function1 makes the table rows do something appearance wise.
</script>
<tr>
<td></td>
<td></td>
<td>
<img src="pics/delete.png" alt="Delete" onclick="function2();">
</td>
</tr>
I apologize if my post doesn't conform to the general guidelines of proper posting on this board. I'm new on this site. is it possible if you have a div with child divs inside , so i fade out the parent div but the opacity of the child divs stays at 100% ? thank you Hi I have this code: <script type="text/javascript"> function Ajax() { var $http, $self = arguments.callee; if (window.XMLHttpRequest) { $http = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { $http = new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) { $http = new ActiveXObject('Microsoft.XMLHTTP'); } } if ($http) { $http.onreadystatechange = function() { if (/4|^complete$/.test($http.readyState)) { document.getElementById('ReloadThis').innerHTML = $http.responseText; setTimeout(function(){$self();}, 20000); } }; $http.open('GET', '../inc/record_count.php' + '?' + new Date().getTime(), true); $http.send(null); } } </script> <script type="text/javascript"> setTimeout(function() {Ajax();}, 1000); </script> Can you help me make this make a fade in effect?? I need to have an image hyperlinked to a js function that fades text elswhere on the page. I imagine it looks something like <a href="(some js function or somethingrather"><img src="theimg.png"></a>, but how do I do it exactly? I would like code that I can just copy and paste in my header that is set to fade a specific line of text, and be able to hyperlink and image to initiate the js. Please help. Carson www.carsonkahn.com Hello everyone. I'm working on a fade in and fade out script. I got to the part where I am making the fade in part of the script but I got this error that says: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0) Timestamp: Fri, 29 Jan 2010 07:08:20 UTC Message: Object expected Line: 1 Char: 1 Code: 0 But I'm not to sure what is making my script error out. I do believe it is the timeout part in my script but I'm not totally sure. If that is it how do I go about fixing it? Code: function fade(obj, duration, toggle) {
this.steps = 100;
this.elem = document.getElementById(obj);
function setOpacity(level) {
(document.getElementById && !document.all) ? this.elem.style.opacity = level :
this.elem.style.filter="alpha(opacity="+ level * 100 +")";
}
function fadeIn() {
for(var i = 0; i<= 1; i+=(1/this.steps)) {
setTimeout("setOpacity("+ i +")", i * duration);
}
}
fadeIn();
}
window.onload = function() {
fade('text', 20000, 1);
}
Thanks for the help. Hi all, I have created the following page http://kylehouston.com/new/index_new.html I have used JQuery to add animated load icon followed by my images fading in, the load works fine and the images appear but the problem is the fade in wont work. I have tried a few methods to try and get them to fade including adding spans round my images but the only thing that seems to work for me is setting all divs to fade in which I dont want to happen. Anyone got any advice? Thanks in advance! Kyle Hi everyone I'm new to javascript and I'm trying to fade in and out a div using an array. It worked when I had two arrays and two variables. One array that decends through the opacity values and another array that acends the opacity values. here is the the external JS, HTML and external CSS. It works once but I want it to work every time we click on the link. At the bottom of the post I've posted the JS again but modified in a way I thought would work by using one array, going fowards through the array with i++ and then going backwards through the array using i--. Anyway, it doesn't work and I can't find a simple solution. Hope you all understand what I'm trying to say. **********************THE JAVASCRIPT*********************** var fadesFoward = ["0.95","0.90","0.85","0.80","0.75", "0.70","0.65","0.60","0.55","0.50", "0.45","0.40","0.35","0.30","0.25", "0.20","0.15","0.10","0.05","0.00"]; var fadesBackward = ["0.05","0.10","0.15","0.20","0.25", "0.30","0.35","0.40","0.45","0.50", "0.55","0.60","0.65","0.70","0.75", "0.80","0.85","0.90","0.95","1.00"]; var i = 0; var j = 0; function fadeDiv() { if(i == fadesFoward.length); else (i++); document.getElementById("redbox").style.opacity = fadesFoward[i]; } function hide() { setInterval("fadeDiv()", 30); } function showDiv() { if(j == fadesBackward.length); else (j++); document.getElementById("redbox").style.opacity = fadesBackward[j]; } function show() { setInterval("showDiv()", 30); } function delayShow() { setTimeout("show()", 1000); } ********************THE HTML************************ <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN""http//www.w3c.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="test.css"/> <script language="javascript" type="text/javascript" src="test.js"> </script> </head> <body> <div id="redbox"></div> <a href="#" onclick="hide(); delayShow(); return false;" id="go_red">RED</a> </body </html> *********************THE CSS********************** div#redbox{z-index:2; width:200px; height:200px; background-color:red; opacity:1.0; position:absolute; left:0px; top:0px;} a#go_red{position:absolute; left:250px; top:100px;} *********************THE JAVASCRIPT AGAIN****************** var fades = ["0.95","0.90","0.85","0.80","0.75", "0.70","0.65","0.60","0.55","0.50", "0.45","0.40","0.35","0.30","0.25", "0.20","0.15","0.10","0.05","0.00"]; var i = 0; function fadeDiv() { if(i == fades.length); else (i++); document.getElementById("redbox").style.opacity = fades[i]; } function hide() { setInterval("fadeDiv()", 30); } function showDiv() { if(i == fades.length); else (i--); document.getElementById("redbox").style.opacity = fades[i]; } function show() { setInterval("showDiv()", 30); } function delayShow() { setTimeout("show()", 1000); } What would be really easy but which I can't find out how to do or even know if it is possible, is to have the variable "i" reset to 0 everytime the function is called. maybe it would work then? A script like this is invoked for each html page presenting a different background picture. How can I extend/modify the script to make the pic fade in when page is loaded? window.onload = function() {var bodyTag = document.getElementsByTagName("body")[0]; bodyTag.style.backgroundImage ="url(bilder/bryggsol.jpg)"; bodyTag.style.backgroundAttachment = "fixed"; bodyTag.style.backgroundPosition = "100% 100%"; bodyTag.style.backgroundRepeat = "no-repeat";} Grateful for clues I wrote a simple javescript for a slideshow that cycles through images and displays where the image is but I am wondering how to pause the slideshow and then add in a fading effect. Any help would be appreciated. index.html PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Page 1</title> <link rel="stylesheet" type="text/css" href="css.css"></link> <script language="JavaScript" type="text/javascript" src="js.js"></script> </head> <body onLoad="LoadMenu(); PlaceArrow();"> <table border="0" cellspacing="0" cellpadding="0" id="hmt" summary="layout" align="center"> <tr><td colspan="4"><div id="htop"><img border="0" width="240" height="40" alt="" src="img/homet.png"></div></td></tr> <tr valign="top"> <td id="hmtgut"><img border="0" width="50" height="250" alt="" src="img/homel.png"></td> <td id="hmtl"><img border="0" width="280" height="270" src="img/homelogo.png"></td> <td id="hmtr"> <script language="JavaScript" type="text/javascript"> <!-- //preload images var image1=new Image() image1.src="photos/slides/photo01.jpg" var image2=new Image() image2.src="photos/slides/photo02.jpg" var image3=new Image() image3.src="photos/slides/photo03.jpg" var image4=new Image() image4.src="photos/slides/photo04.jpg" var image5=new Image() image5.src="photos/slides/photo05.jpg" var image6=new Image() image6.src="photos/slides/photo06.jpg" var image7=new Image() image7.src="img/thumbarrow.png" var image8=new Image() image8.src="img/spacer.gif" var cphoto = Math.ceil(6*Math.random()); document.write('<div id="homephoto"><a href="javascript:slidelink()"><img border="0" name="photo" width="230" height="230" src="photos/slides/photo0'+cphoto+'.jpg"></a></div>'); var step=cphoto var whichimage=step function slideit() { if (!document.images) return document.images.photo.src=eval("image"+step+".src") whichimage=step if (step<6) { step=parseInt(Math.ceil(6*Math.random())) } else { step=1 } setTimeout("slideit()",3000) var i = "a" + whichimage document.images.a1.src=eval("image8.src") document.images.a2.src=eval("image8.src") document.images.a3.src=eval("image8.src") document.images.a4.src=eval("image8.src") document.images.a5.src=eval("image8.src") document.images.a6.src=eval("image8.src") document.images[i].src=eval("image7.src") } slideit() function slidelink() { if (whichimage==1) window.open('img.php?img=1','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400') else if (whichimage==2) window.open('img.php?img=2','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400') else if (whichimage==3) window.open('img.php?img=3','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400') else if (whichimage==4) window.open('img.php?img=4','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400') else if (whichimage==5) window.open('img.php?img=5','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400') else if (whichimage==6) window.open('img.php?img=6','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400') } //--> </script> <noscript> <div id="homephoto"> <img border="0" name="photo" width="230" height="230" src="photos/slides/photo01.jpg"> </div> </noscript> </td> <td id="mtmenu" valign="middle">Links Here</td> </tr> <tr> <td colspan="4"> <div id="hfoot"> <div id="hbot"><img border="0" width="240" height="20" alt="" src="img/homeb.png"></div> <div id="thumb1"> <div><img border="0" vspace="9" hspace="2" name="a1" width="30" height="6" alt="" src="img/spacer.gif"></div> <div><a onClick="LoadPhoto(1); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo01thumb.jpg"></a></div> </div> <div id="thumb2"> <div><img border="0" vspace="9" hspace="2" name="a2" width="30" height="6" alt="" src="img/spacer.gif"></div> <div><a onClick="LoadPhoto(2); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo02thumb.jpg"></a></div> </div> <div id="thumb3"> <div><img border="0" vspace="9" hspace="2" name="a3" width="30" height="6" alt="" src="img/spacer.gif"></div> <div><a onClick="LoadPhoto(3); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo03thumb.jpg"></a></div> </div> <div id="thumb4"> <div><img border="0" vspace="9" hspace="2" name="a4" width="30" height="6" alt="" src="img/spacer.gif"></div> <div><a onClick="LoadPhoto(4); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo04thumb.jpg"></a></div> </div> <div id="thumb5"> <div><img border="0" vspace="9" hspace="2" name="a5" width="30" height="6" alt="" src="img/spacer.gif"></div> <div><a onClick="LoadPhoto(5); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo05thumb.jpg"></a></div> </div> <div id="thumb6"> <div><img border="0" vspace="9" hspace="2" name="a6" width="30" height="6" alt="" src="img/spacer.gif"></div> <div><a onClick="LoadPhoto(6); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo06thumb.jpg"></a></div> </div> </div> </td> </tr> </table> </table> </body> </html> js.js PHP Code: function PlaceArrow() { if ( cphoto ) { carrow = "a" + cphoto; document.images[carrow].src = "img/thumbarrow.png"; } } function LoadPhoto (i) { if (document.images) { carrow = "a" + cphoto; document.images[carrow].src = "img/spacer.gif"; narrow = "a" + i; nphoto = "photo0" + i; document.images[narrow].src = "img/thumbarrow.png"; document.images['photo'].src = "photos/slides/" + nphoto + ".jpg"; cphoto = i; } } Hi, On my webpage I have an embedded link that jumps the users up to a text box for logging in. I'm trying to find a way so when they click that link, it will not only jump up to the text box but highlights it as well. I then want the highlight color to fade back to normal. I've been searching around but I can't find something that will work. Any ideas? I have this code... I want to be able to make each image fade from one to the other. Like this... http://www.dynamicdrive.com/dynamici...nslideshow.htm Is there a way to do that with this code? Code:
<script type="text/javascript">
// Simple Javascript Time based Image Swap
var Pics = new Array();
var counter = 0;
// Use this section to change the image paths
function LoadImages()
{
Pics[1] = new Image();
Pics[1].src = "images/pic1.jpg";
Pics[2] = new Image();
Pics[2].src = "images/pic2.jpg";
Pics[3] = new Image();
Pics[3].src = "images/pic3.jpg";
Pics[4] = new Image();
Pics[4].src = "images/pic4.jpg";
Pics[5] = new Image();
Pics[5].src = "images/pic5.jpg";
Pics[6] = new Image();
Pics[6].src = "images/pic6.jpg";
Pics[7] = new Image();
Pics[7].src = "images/pic7.jpg";
Pics[8] = new Image();
Pics[8].src = "images/pic8.jpg";
Pics[9] = new Image();
Pics[9].src = "images/pic9.jpg";
Pics[10] = new Image();
Pics[10].src = "images/pic10.jpg";
Pics[11] = new Image();
Pics[11].src = "images/pic11.jpg";
Pics[12] = new Image();
Pics[12].src = "images/pic12.jpg";
Pics[13] = new Image();
Pics[13].src = "images/pic13.jpg";
Pics[14] = new Image();
Pics[14].src = "images/pic14.jpg";
Pics[15] = new Image();
Pics[15].src = "images/pic15.jpg";
Pics[16] = new Image();
Pics[16].src = "images/pic16.jpg";
Pics[17] = new Image();
Pics[17].src = "images/pic17.jpg";
document.pic1.src = Pics[1].src;
}
//Time in miliseconds
function timedImage()
{
counter ++
if (counter > 17) {
counter = 1;
}
document.pic1.src = Pics[counter].src;
t=setTimeout("timedImage()",5000);
}
</script>
|
|||||||