|
JavaScript - Adding Two Rollover Images To Pausing Javascript Code
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
Similar TutorialsI'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? I have some rollover images on my website, and they don't switch until the page is finished loading. Is this standard? Is there a way to have the rollovers work when the page is still in the process of loading all the images? Thanks Hi all I've been looking now for over a week on how create this http://instances.110mb.com/ effect when you hover over the ships on that page. I would be eternally grateful for any ideas how to replicate this effect. Thanks Rob Hello, I just created a new page topper for my website, and am new to javascript. I spent HOURS on designing all of the mouseover images that are on my website now, except there are spaces in between all of the images and I designed them to touch. You can see what I am talking about on my website he http://www.corporateavedesign.com I've tried everything in the code to get these images to touch. Can anyone help? Here is my code: Code: <SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src = "http://www.corporateavedesign.com/images/website-logoMO1.jpg";
staticImage1 = new Image();
staticImage1.src = "http://www.corporateavedesign.com/images/website-logo1.jpg";
loadImage2 = new Image();
loadImage2.src = "http://www.corporateavedesign.com/images/website-logoMO2.jpg";
staticImage2 = new Image();
staticImage2.src = "http://www.corporateavedesign.com/images/website-logo2.jpg";
loadImage3 = new Image();
loadImage3.src = "http://www.corporateavedesign.com/images/website-logoMO3.jpg";
staticImage3 = new Image();
staticImage3.src = "http://www.corporateavedesign.com/images/website-logo3.jpg";
loadImage4 = new Image();
loadImage4.src = "http://www.corporateavedesign.com/images/website-logoMO4.jpg";
staticImage4 = new Image();
staticImage4.src = "http://www.corporateavedesign.com/images/website-logo4.jpg";
loadImage5 = new Image();
loadImage5.src = "http://www.corporateavedesign.com/images/website-logoMO5.jpg";
staticImage5 = new Image();
staticImage5.src = "http://www.corporateavedesign.com/images/website-logo5.jpg";
loadImage6 = new Image();
loadImage6.src = "http://www.corporateavedesign.com/images/website-logoMO6.jpg";
staticImage6 = new Image();
staticImage6.src = "http://www.corporateavedesign.com/images/website-logo6.jpg";
// End -->
</script>
<!-- STEP TWO: Insert this code into the BODY of your HTML document -->
<TD
style="BORDER-TOP: #000000 0px solid; BORDER-LEFT-WIDTH: 0px; BORDER-LEFT-COLOR: #000000; BORDER-BOTTOM: #000000 0px solid; BORDER-RIGHT-WIDTH: 0px; BORDER-RIGHT-COLOR: #000000"
vAlign=bottom bgColor=#ffffff colSpan=2 height=10>
<CENTER>
<a href="http://www.corporateavedesign.com/" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="http://www.corporateavedesign.com/images/website-logo1.jpg" border=0></a>
<a href="http://www.corporateavedesign.com/" onmouseover="image2.src=loadImage2.src;" onmouseout="image2.src=staticImage2.src;">
<img name="image2" src="http://www.corporateavedesign.com/images/website-logo2.jpg" border=0></a>
<a href="http://www.corporateavedesign.com/pages/AboutUs.htm" onmouseover="image3.src=loadImage3.src;" onmouseout="image3.src=staticImage3.src;">
<img name="image3" src="http://www.corporateavedesign.com/images/website-logo3.jpg" border=0></a>
<a href="http://www.corporateavedesign.com/contact.htm" onmouseover="image4.src=loadImage4.src;" onmouseout="image4.src=staticImage4.src;">
<img name="image4" src="http://www.corporateavedesign.com/images/website-logo4.jpg" border=0></a>
<a href="http://www.corporateavedesign.com/pages/Portfolio.htm" onmouseover="image5.src=loadImage5.src;" onmouseout="image5.src=staticImage5.src;">
<img name="image5" src="http://www.corporateavedesign.com/images/website-logo5.jpg" border=0></a>
<a href="http://www.corporateavedesign.com/category_36/Current-Price-List.htm" onmouseover="image6.src=loadImage6.src;" onmouseout="image6.src=staticImage6.src;">
<img name="image6" src="http://www.corporateavedesign.com/images/website-logo6.jpg" border=0></a>
</CENTER>
Please help if you can, I am desperate and my website looks crazy right now! THANKS!!! I wrote the code below to animate a roll of dice. It does iterate 10 times, as the code intends, but for some reason it doesn't pause in between. Also, how can I get it to return the final dice value to the calling function? Code: DiceValue=RollDiceAnimated(1)
function RollDiceAnimated(RollIteration) {
var Die1;var Die2
var RollSpeed=100
Die1=0;while(Die1<1 || Die1>6){Die1=Math.floor(Math.random()*7)}
Die2=0;while(Die2<1 || Die2>6){Die2=Math.floor(Math.random()*7)}
document.getElementById("Dice1").src="Images_Dice/Dice" + Die1 + ".jpg"
document.getElementById("Dice2").src="Images_Dice/Dice" + Die2 + ".jpg"
if(RollIteration<10){
var tempval=setTimeout(RollDiceAnimated(RollIteration+1),RollIteration*RollSpeed)
}
else{return Die1+Die2}
}
The setTimeout isnt pausing my script Code: xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
$("#result").fadeIn(); //Show the result div
document.getElementById("result").innerHTML=xmlhttp.responseText //Get the data from the URL from .open
document.getElementById('loadingDiv').style.display = 'none'; //Hide the loading div once loaded
setTimeout(location.href = "forum.php" ,8000); // 8 secs
}
}
Thats just part of my JS code so if you need the rest just say and ill post it all I want my site to wait some time before the redirect however at the moment its going straight away. Can anyone help? Hi, When the user clicks a button, I dynamically add entries to the page that have an X button rollover created with it as a means to remove the entry. The code would work just fine except that every time I add an element, I need to add the following line of javascript code: setrollover("images/tabs-icons/over-address_remove.png", 'address_remove1'); where the number '1' is replaced by whatever number of rollover I'm at (as new entries are added, it'd be rollover1, rollover2, etc. Is there a way to add, and possibly even remove, a line of javascript from a .js file? I'd like to do something like: Once the user clicks the button, and the entry is created, add/append "setrollover(\"images/tabs-icons/over-address_remove.png\", \"address_remove1" + i + "\");" to rollovers.js. A more challenging task would be to : When that element is removed, remove that line from the file. Below is a working example of two rollover images that differ only by the number. Code: <html>
<head>
</head>
<script>
//THIS SCRIPT BLOCK IS NORMALLY IN A SEPARATE FILE THAT I CAN PROBABLY APPEND/REMOVE FROM.
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this
// notice with the code.
var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}
function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}
function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
setrollover("images/tabs-icons/over-address_remove.png", 'address_remove');
setrollover("images/tabs-icons/over-address_remove.png", 'address_remove1');
</script>
<body>
<span id="AddressesVisited" style="font-weight:bold; cursor:pointer;">
<a onMouseOver="rollover('address_remove')" onMouseOut="rollout('address_remove')" style="cursor:pointer;">
<img src="images/tabs-icons/normal-address_remove.png" name="address_remove" title="remove" alt="remove"></a> <span class="address-
text">Entry1</span><br>
<a onMouseOver="rollover('address_remove1')" onMouseOut="rollout('address_remove1')" style="cursor:pointer;">
<img src="images/tabs-icons/normal-address_remove.png" name="address_remove1" title="remove" alt="remove"></a> <span class="address-
text">Entry2</span><br>
</span>
</body>
Hello, my first post here; and i am new to javascript i actually am just starting to learn the concept of javascript; and I am wondering.... if certain aspects of a website are made by using javascript such as the part on facebook "My Account"; where on click it opens a "window" with options. OR, on amazon where the menu items pop out on rollover;; can someone please tell me if they are acomplishing that by using javascript? thank you and i appreciate who ever is reading this. I have a div in my HTML that that when rolled over reveals an image. I can't figure out how to place a random image from a set of 5 images to appear in the background of that div when it is rolled over again. Please help me! Hi, I have a a-z brand menu on my site. I want the user to be able to select a letter and a list of brands appear. The problem I have is that I want the layer to appear at the position of the mouse (from the top left). I have this working fine but then when you rollover a link (brand) within the layer div it reactivates the call command and re positions the layer to the mouse again. Please Please help. My code is as follows; POSITION CODE; Code: var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if(self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
}
else if(document.documentElement && document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
}
else if(document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all) {
cX += rX;
cY += rY;
}
d.style.left = (cX+5) + "px";
d.style.top = (cY+5) + "px";
}
TOGGLE HIDE SHOW LAYER; Code: function toggle_visibility(id) {
var e = document.getElementById(id);
AssignPosition(e);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
EXAMPLE OF A-Z MENU; Code: <a href="#" onclick="toggle_visibility('uniquename0');">A</a>
EXAMPLE OF LAYER TO DISPLAY WHICH CONTAINS THE OFFENDING LINKS; Code: <div id="uniquename0" style="border-style: solid; padding: 5px; display: none; position: absolute; background-color: white; left: 482px; top: 428px;" onmouseout="toggle_visibility('uniquename0');">
<a href="Manufacturer-view.asp?ManID=1">All American EFX <img src="images/bul.gif" alt="View" border="0" width="4" height="6"></a><br>
<a href="Manufacturer-view.asp?ManID=3">Animal <img src="images/bul.gif" alt="View" border="0" width="4" height="6"></a><br>
</div>
Thank you Dan Hi, I am looking for some help with adding a caption in a semi transparent box over the main scrolling image in this http://jdhost.ueuo.com/scrolling/index.html I've been trying to hack other bits of javascript I've found on to it but I've had no luck. I would really apperciate any help. I am trying to get the images on this page to revert back to the original photo after hover releases. I am assuming this is a simple fix, but I am no programmer and just did this in dreamweaver. http://www.dataflurry.com/joey/ Hey guys, Lookin' for a little help, not sure if it can even be done? hopefully someone has the answer. I'm trying to design myself an online portfolio; here's what I got so far... http://www.gregorymstevens.com/testsite/site.html As you can see my navigation is represented by each bird on the tree (every bird is a link), when you rollver one of the green birds they turn white, however, I am looking to not only have the green bird rollver to white but ALSO have the "choose a" image on the bottom right change to the corresponding page. For instance, when the mouse rolls over a bird-- this image: will turn into this image: while maintaining the original "white bird" rollover. Hopefully I'm explaining this correctly -- Any help greatly appreciated! Basically, I have it so that when you click something, then it expands and then shows text. The part I am having trouble at is the text being a php include. Here is the line that works for pre-typed in information: Code: divbody.innerHTML = "Some random text here."; Then when I want to do something like this: Code: divbody.innerHTML = "<?php include('widgets/products.php'); ?>";
Then the actual innerHTML comes out like this: Code: <!--?php include('widgets/products.php'); ?-->
It seems as if it is changing '<' and '>' to '<!--' and '-->' respectively. Code: <script type="text/javascript" language="javascript">
function toggle()
{
var ele = document.getElementById("toggle");
var text = document.getElementById("display");
if(ele.style.display == "block")
{
ele.style.display = "none";
text.innerHTML = "Show";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide";
}
}
</script>
Code: <a href="javascript:toggle();" id="display" style="color:#000000">Show</a> <div id="toggle" style="display:none">CONTENT</div> The above toggle code works perfectly. How can I edit the code to use buttons instead of text? In other words: How can I replace two different texts that say "Show" and "Hide" with two different buttons that say "Show" and "Hide"? Thanks. Hi I was wondering if it is possible to add js logging onto a webpage and have this writing out to a separate file with the details? I have a page which is only showing the header and not the rest of the page, I want to add loggin code to find out where it is breaking. Is this possible and how would I go about setting it up? I have a function to accept number and certain text only when "Enter" key is pressed. Code: function handleEnter(field, event){
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
var tmp_val = "";
if (keyCode == 13) {
if(field.name=="number" && field.value.replace(/ /g,"").length>1){
field.value = field.value.replace(/ /g,"");
field.value = field.value.toUpperCase();
tmp_val = field.value;
if (isNaN(tmp_val) && tmp_val!="ABC") {
field.value = "";
field.focus();
return false;
}
else {
some codings here
}
}
}
}
However, when I added a second condition, the code stops working Code: if (isNaN(tmp_val) && (tmp_val!="ABC" ||tmp_val!="DEF") ) Anyone pls help~ Tks~ I have a script which opens an HTML page and passes the current URL to a form on the page. I'm also using RokBox, which open a window as an overlay on the current page rather than as a popup. It is triggered by adding rel="rokbox" to any link. For instance, the following link opens moreinfo.htm using RokBox: Code: <a rel="rokbox" href="/modules/mod_S5tellafriend/moreinfo.htm">More Info</a> Problem is the link doesn't pass the URL. The following code passes the URL but doesn't trigger RokBox: Code: <input type="button" class="button" value="MORE INFORMATION" onclick="s5_open_taf_popup()"/>
<script type="text/javascript">
var s5_taf_parent = window.location;
function s5_open_taf_popup() {
window.open('/modules/mod_S5tellafriend/moreinfo.htm','page','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=420,height=570,left=50,top=50,titlebar=yes')
}
</script>
Is there a way to add rel="rokbox" to the script? Or maybe pass the URL with the link instead? Thanks! Hi. I need help in adding a parenthesis in the area code of the phone number and validating it also. I made some javascript code but it is not working. Can somebody please help? I just need the code in adding () in the area code. For example: When user enter 10 digit number no spaces or dashes such as 0000000000 or 000-000-0000, I would like to have this format right away (000)000-0000. I know how to replace the characters but adding it is a tricky one for me. Can somebody please help? Thanks. How can I build a table that prompts user for number of rows and then number of columns and then builds it based on user input?
|
|||||||