|
JavaScript - Simple Question About Javascript Rollover Images
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? Similar TutorialsHi 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
Hello guys, Im new to Javascript,please help me ya in my php code, I retrieve a ID value and assign to variable like below PHP Code: $id = $gettingdata['id']; and I want this id to be include together with javascript "insertsubcat" function like below Code: <a href="javascript:insertsubcat('.$ID.');"/>Click to insert this data</a>
in the javascript page, I dont know how to call back the id value and i try like code below but it doesnt work Code: function insertsubcat(data) {
var data = data.value;
.
.
.
.
}
Any idea? Thanks Azhan Malaysia Hello guys, I'm new to this forum and to Javascript. I need to make a very simple website to check whether a ticket number is valid or not. I have created an array with all the codes necessary, but when I try to loop through it, the only thing that works as it should is the first element of the array. Basically, I want the code to display Correct!, if there is a match between user input and array, or Wrong if otherwise. Here is my code: Code: <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function validate() {
var list = new Array;
list[0]="zDv5BXAc";
list[1]="6YXF3Qwj";
list[2]="k8UKpgwo";
var code= document.getElementById("code");
var name = document.getElementById("name");
for(var i=list.length-1; i>=0; --i) {
if (code.value == list[i])
{
document.all.confirm.innerHTML = "Correct"
}
else
document.all.confirm.innerHTML = "Wrong"
}
}
</script>
</head>
<body>
<input name="Name" type="text" id="name" size="50">
<input name="Code" type="text" id="code" size="10">
<input name="Check Code" type="submit" value="Verify" onClick="validate()">
<div id="confirm"></div>
</body>
</html>
I'm building a webpage using javascript and iframes. Basically I have an iframe in the middle of the index.html page that links to another html page (let's call it iframe.html). My question is, is it possible to call a javascript function from iframe.html to control an object on index.html? If so, how do I do this? I'd like to be able to assign an image in iframe.html with the hyperlink of href="javascript:function()", where the function effects the CSS of a div on index.html. Thanks I am very new to javascript and really can't figure out what I am doing wrong. I am trying to make a 1 page store that allows you to type in an item and select the color and size you want for that item. If you don't fill in a field, an alert message should tell you that. If all the fields are filled in, a "thank you for purchasing ____________" message should appear in a text area at the bottom of the page. This is my current code: Code: <html>
<head>
<script>
function processform()
{
if ( document.form1.item1.value == "")
{
alert("No Item Chosen")
}
else
{
chosen = ""
len = document.form1.c1.length
for (i = 0; i <len; i++) {
if (document.form1.c1[i].checked) {
chosen = document.form1.c1[i].value
}
}
if (chosen == "") {
alert("No Color Chosen")
}
}
else {
itemname = document.form1.item1.value;
itemcolor = document.form1.c1.value;
itemsize = document.form1.size.value;
document.form1.txtarea1.value = "Thank you for purchasing a " + itemsize + " " + itemcolor + " " + itemname;
}
}
</script>
</head>
<body>
<h1>Store</h1>
<br/><br/>
<form name="form1">
<h4>What item would you like to buy?</h4>
<input type="text" name="item1" value="" /><br />
<br/><br/>
<h4>Color</h4>
<input type="radio" name="c1" value="blue" /> Blue<br />
<input type="radio" name="c1" value="red" /> Red<br />
<input type="radio" name="c1" value="green" /> Green<br />
<input type="radio" name="c1" value="yellow" /> Yellow<br />
<br/><br/>
<h4>Size</h4>
<select name="size">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="extra large">Extra Large</option>
</select>
<br/><br/>
<button onclick="processform()">Purchase</button>
<br/><br/>
<textarea rows="2" cols="40" name = "txtarea1"> </textarea>
</form>
</body>
</html>
When I press the purchase button, no alert message is shown, nor does anything get displayed in the textarea. What am I doing wrong? Hi, Im new to javascript so thankyou in advance for reading this! Im trying to create a video gallery, with thumbnails below a main content div, which when clicked display the relevant video in the said div. This isn't a problem and I have managed to do this... However, I also need to display descriptive text (different for every video) in a seperate div, and the first video also needs to autoplay when the page is loaded (rather than waiting until the user requests a video by clicking a thumbnail) I've made an example of where Im at so far and its viewable here... http://www.phixfilm.com/video_thumbn...ideo_test.html The div 'a few lines of info about vid here' is currently just static but this is what i need to change each time a different video is requested by the user (sorry if thats obvious but just in case its not clear) I will be using .movs but I've embedded youtube for now although I don't think that makes any difference... Im presuming it will be a case of having text that is hidden until the thumbnail is clicked...? Which I guess I could do with css but that way seems a little clumsy, I really am a newbie to javascript so a helping hand in the right direction would be very much appreciated. THANKYOU! ps- an example of something similar to what Im trying to achieve is here... http://somesuchandco.com/#670098/Nathalie-Canguilhem I need to be able to drag an image from one browser window to a form text input in a different window, populating it with the image file name. I can do this easily, except that the result is the whole url, and I only want the filename to be inserted. In other words, it inserts http://www.path/path/file.jpg, but I just want to end up with file.jpg. I believe the file object .name property holds the info I need, but I don't know how to populate the input field with it. Any help appreciated. 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 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! 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. 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 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! I imagine this would be very simple for someone who knows javascript. I want to have three fields. First field is "posted speed limit", second field is "actual speed" and third field will be the output field. All the script needs to do it subtract the posted speed from the actual speed and add a ZERO to the end; which is the amount of the speeding ticket. The minimum fine is $100, however. So, 5 miles over the speed limit would be $100 (minimum value) 15 miles over the speed limit would be $150 (add a zero) 35 miles over the speed limit would be $350. etc. I know very little Javascript, if anyone could help me out with this, I'd appreciate it. Thanks, Sean I am using a show/hide script for my sites FAQs. This is the code: However, when you click on one of the Questions it brings you to the top of the page due to the <a href="#" How do I make it so it doesn't bring you to the top of the page? Code: <html>
<head>
<title>TEST TEMPLATE</title>
<script type="text/javascript">
function showHide(id)
{
var current = document.getElementById(id);
for ( var f = 1; f < 99999; ++f )
{
var div = document.getElementById("FAQ" + f);
if ( div == null ) return; // quit when we run out of FAQs
if ( div != current )
{
div.style.display = "none"; // zap all others
} else {
// toggle current one
div.style.display = ( div.style.display == "none") ? "block" : "none";
}
}
return false; // IMPORTANT!
}
</script>
</head>
<body>
<!------ QUESTIONS ------>
<p>Change lines <li> to divs or whatever</p>
<li> <a href="#" onclick="return showHide('FAQ1')">FAQ one</a></li>
<li> <a href="#" onclick="return showHide('FAQ2')">FAQ two</a></li>
<li> <a href="#" onclick="return showHide('FAQ3')">FAQ three</a></li>
<!------ ANSWERS ------>
<div id="FAQ1" style="display:none;"><p>Ans one</p></div>
<div id="FAQ2" style="display:none;"><p>Ans two</p></div>
<div id="FAQ3" style="display:none;"><p>Ans three etc etc.</p></div>
</body>
</html>
Hello, I am new to javascript. Below is the code that opens a new window when the user clicks on the button "Click here to see". But the code resides outside the <script></script>. As far as i know javascript codes have to be between these tags to work. How will the "window.open" statement work? Code: <form>
<input type="button" value="Click here to see" onclick="window.open('http://www.yahoo.com')" />
</form>
I have the following code: Code: if (n==1 && g <=5)
{
sndPlayer1.URL ="Boy-a1.wav";
}
else if (n==1 && g >5)
{
sndPlayer1.URL ="Girl-a1.wav";
}
else if (n==2 && g <=5)
{
sndPlayer1.URL ="Boy-e1.wav";
}
else if (n==2 && g >5)
{
sndPlayer1.URL ="Girl-e1.wav";
}
else if (n==3 && g <=5)
{
sndPlayer1.URL ="Boy-i1.wav";
}
else if (n==3 && g >5)
{
sndPlayer1.URL ="Girl-i1.wav";
}
else if (n==4 && g <=5)
{
sndPlayer1.URL ="Boy-o1.wav";
}
else if (n==4 && g >5)
{
sndPlayer1.URL ="Girl-o1.wav";
}
else if (n==5 && g <=5)
{
sndPlayer1.URL ="Boy-u1.wav";
}
else if (n==5 && g >5)
{
sndPlayer1.URL ="Girl-u1.wav";
}
else if (n==6 && g <=5)
{
sndPlayer1.URL ="Boy-b1.wav";
}
else if (n==6 && g >5)
{
sndPlayer1.URL ="Girl-b1.wav";
}
else if (n==7 && g <=5)
{
sndPlayer1.URL ="Boy-b1.wav";
}
else if (n==7 && g >5)
{
sndPlayer1.URL ="Girl-b1.wav";
}
else if (n==8 && g <=5)
{
sndPlayer1.URL ="Boy-h1.wav";
}
else if (n==8 && g >5)
{
sndPlayer1.URL ="Girl-h1.wav";
}
else if (n==9 && g <=5)
{
sndPlayer1.URL ="Boy-t1.wav";
}
else if (n==9 && g >5)
{
sndPlayer1.URL ="Girl-t1.wav";
}
I was wondering what the best way to make a smaller simpler version of this code is? Would it be using a loop? If so can you help me with how to I have an alert I'm using over in Salesforce to remind sales reps to use a special terms document when quoting. Problem is, the alert is going off for ALL accounts, not just "Account1" and "Account2". Is this line incorrect in syntax or something? if ((isstatus == "Proposal/Price Quote") && (acct == "Account1", "Account2")) Thanks all. This forum has been very helpful for me in the past so this was my first stop! Jeremy Code: <html>
<head>
<script type="text/javascript" language="javascript" src="/js/functions.js"></script>
<script type="text/javascript" src="/soap/ajax/10.0/connection.js"></script>
<script type="text/javascript">
function throwalert()
{
var isstatus = "{!Opportunity.StageName}";
var acct = "{!Opportunity.Account}"
var msgg = "Please remember to use a special terms and conditions quote template when quoting this opportunity.";
if ((isstatus == "Proposal/Price Quote") && (acct == "Account1", "Account2"))
{
alert(msgg);
}
else
{
window.parent.location.replace = "{URLFOR($Action.Opportunity.View, Opportunity.Id,null,true)};"
}
}
</script>
</head>
<body onload="throwalert()";>
</body>
</html>
|
|||||||