JavaScript - How To Do Mouseover Document Swap Using Info From This Script.

Hello everyone,

1.) I'm not a programmer beyond HTML, CSS and only a basic knowledge of javascript, it doesn't take much for me to get lost beyond my skills in javascript.

2.) Is someone willing to add and explain the changes to the code below to include a pause on mouseover?

Code:

var currentSlide = 1;
var maxSlides = 0;

function fadeImage(){
	opacity = 100;
	if(steps < 4){
		steps += 1;
		opacity = opacity / steps;
		imageObj = document.getElementById("slide-"+currentSlide);
		imageObjN = document.getElementById("slide-"+nextSlide);
		imageObjN.style.display = "block";

		imageObj.style.opacity = "" + opacity / 100;
		imageObjN.style.opacity = "" + ((steps * 25) / 100);
		//fade
		slideTimeout = setTimeout("fadeImage()", 170); /** fade transition speed */
	}else{
		steps = 1;
		document.getElementById("slide-"+currentSlide).style.display = "none";
		currentSlide += 1;
		if(currentSlide > maxSlides){
			currentSlide = 1;
		}
		showSlide();
	}
}

function initSlideshow(){
	slidesCollection = document.getElementById("slides").children;
	maxSlides = slidesCollection.length;
	for (var i=0; i < maxSlides; i++){
		slidesCollection[i].id = "slide-"+(i+1);
		if (i > 0)
			slidesCollection[i].style.display = "none";
	}	
	steps = 1;
	nextSlide = 2;
	slideTimeout = 0;
	showSlide();
}

function showSlide(){
	clearTimeout(slideTimeout);
		
	nextSlide = currentSlide + 1;
	if (currentSlide >= maxSlides){
		nextSlide = 1;
	}
	
	slideTimeout = setTimeout("fadeImage()", 8300); /** display time of slide */
}

I have a form & I want the customer to be able to check a box if the bill to information is the same as the ship to information & have the information automaticlly put into the appropriate boxes. I have the following script in the head of my html page:

<script language="JavaScript">
<!--
function shipsame()
{
var form = document.forms[0];
if(form.sameasbilling.checked){

form.shipname.value = form.shipname.value;
form.shipaddress.value = form.billaddress.value;
form.shipaddress2.value = form.billaddress2.value;
form.shipcity.value = form.billcity.value;
form.shipstate.value = form.billstate.value;
form.shipzip.value = form.billzip.value;
form.shipcontact.value = form.billcontact.value;
form.shipphone.value = form.billphone.value;

}else{

form.shipname.value = "";
form.shipaddress.value = "";
form.shipaddress2.value = "";
form.shipcity.value = "";
form.shipstate.value = "";
form.shipzip.value = "";
form.shipcontact.value = "";
form.shipbill.value = "";

}
}
function fixup() {
var cb = document.forms[0].sameasbilling;
cb.onclick = shipsame;
}
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
//-->
</script>

And I have the following in my form section:

<input name="sameasbilling" type="checkbox" onclick="MM_callJS('sameasbilling')" value="yes" onload="fixup()"/>

I am not a programmer & have gotten this script from searching the web. I have tried several things but do not know enough to fix the problem. I'm not even sure if the ship or bill should come first in the code. The customer will be filling out the bill to information first on my form. I would appreciate any help but please put it in VERY simple terms that I can understand.
Thank you

I know this maybe sounds "newbie", perhaps I am still one.

I have 3 divs, all of them in a group "name", there are h1 tags inside them with names too. Well actually I have many many divs like this in several pages so I must use a JS sheet (.js).

Code:

<div name="area"> <h1 name="stringRed"> Mercury </h1> </div>
<div name="area"> <h1 name="stringRed"> Venus </h1> </div>
<div name="area"> <h1 name="stringRed"> Earth </h1> </div>

The idea is to create an event for the divs, a mouseover event to a div in order to change the color of the words inside the h1 tags. When the mouse is over one particular div the word inside it must change to red.

I was trying this Java Script script:

(a cross-browser event handler present)

Code:

    function initialize ( ) {
    aArea=document.getElementsByName("area");
    aStringRed=document.getElementsByName("stringRed");

    for (var i=0; i < aArea.length; i++) {
    addEvent (aArea[i], 'mouseover', changeColor);
    addEvent (aArea[i], 'mouseout', changeOutColor);
    }
    }

    function changeColor() {
    ????
    }
    function changeOutColor() {
    ????
    }

Thank you in advanced for any help.

I have this nice little piece of code that Bullant (CodingForum Senior Coder) helped me with. And it works flawlessly!
I want to put it in the same document twice. I've tried to tweak the code so that each script is unique, but to no avail
Both scripts work by themselves, but when placed together on the same page - the first one fails.
Here is the test-site where it is being used: http://metrobilia.worldsecuresystems.com/stools.html#
Here's what I'm doing (see below):
Any help would be greatly appreciated!

Code:

<head>
	<link href="/stylesheets/styles.css" rel="stylesheet" type="text/css" />
	
	<script type="text/javascript">
        var picData = [
            ['images/template2/fpo1_templ2.jpg','URL_for_one'],
            ['images/template2/fpo2_templ2.jpg','URL_for_two'],
            ['images/template2/fpo3_templ2.jpg','URL_for_three']
        ];
        //preload the images
        var oPics = [];
        for(i=0; i < picData.length; i++){
            oPics[i] = new Image();
            oPics[i].src = picData[i][0];
        }
        function swapImage(obj){
            oImgSwap.src = oPics[obj.indx].src;
            oImgSwap.parentNode.href = picData[obj.indx][1];
        }
        window.onload=function(){
            oImgSwap = document.getElementById('imgSwap');
            oLinks = document.getElementById('radiobs').getElementsByTagName('a');
            for(i=0; i < oLinks.length; i++){
                oLinks[i].indx = i;
                oLinks[i].onclick=function(){
                    swapImage(this);
                    return false;
                }
            }
            swapImage(oLinks[0]);
        }
    </script>

	<script type="text/javascript">
        var picDatab = [
            ['images/template2/fpo1_templ2b.jpg','URL_for_one'],
            ['images/template2/fpo2_templ2b.jpg','URL_for_two'],
            ['images/template2/fpo3_templ2b.jpg','URL_for_three']
        ];
        //preload the images
        var oPicsb = [];
        for(i=0; i < picDatab.length; i++){
            oPicsb[i] = new Image();
            oPicsb[i].src = picDatab[i][0];
        }
        function swapImageb(obj){
            oImgSwapb.src = oPicsb[obj.indx].src;
            oImgSwapb.parentNode.href = picDatab[obj.indx][1];
        }
        window.onload=function(){
            oImgSwapb = document.getElementById('imgSwapb');
            oLinksb = document.getElementById('radiobsb').getElementsByTagName('a');
            for(i=0; i < oLinksb.length; i++){
                oLinksb[i].indx = i;
                oLinksb[i].onclick=function(){
                    swapImageb(this);
                    return false;
                }
            }
            swapImageb(oLinksb[0]);
        }
    </script>

	</head>

<div class="graphics_templ2" style="padding-left:217px;">

<div class="selections">
	<div>
        <a href="">
            <img src="" id="imgSwap" alt="" />
        </a>
    </div>
		<div id="radiobs">
			<div class="single_box">
			<a href="#"><img src="/images/template2/sample_box_1_fpo.jpg" width="30" height="30" alt="Sample Box Fpo"></a>
		<h2>Color 1</h2>
		</div>
		
		<div class="single_box">
			<a href="#"><img src="/images/template2/sample_box_2_fpo.jpg" width="30" height="30" alt="Sample Box Fpo"></a>
		<h2>Color 1</h2>
		</div>
		
		<div class="single_box">
			<a href="#"><img src="/images/template2/sample_box_3_fpo.jpg" width="30" height="30" alt="Sample Box Fpo"></a>
		<h2>Color 1</h2>
		</div>
		</div>
</div>
</div>

	<div class="graphics_templ2" style="padding-left:15px;">

<div class="selections">
	<div>
        <a href="">
            <img src="" id="imgSwapb" alt="" />
        </a>
    </div>
		<div id="radiobsb">
			<div class="single_box">
			<a href="#"><img src="/images/template2/sample_box_1_fpob.jpg" width="30" height="30" alt="Sample Box Fpo"></a>
		<h2>Color 1</h2>
		</div>
		
		<div class="single_box">
			<a href="#"><img src="/images/template2/sample_box_2_fpob.jpg" width="30" height="30" alt="Sample Box Fpo"></a>
		<h2>Color 1</h2>
		</div>
		
		<div class="single_box">
			<a href="#"><img src="/images/template2/sample_box_3_fpob.jpg" width="30" height="30" alt="Sample Box Fpo"></a>
		<h2>Color 1</h2>
		</div>
		</div>
</div>
</div>

Hi there,

I have a menu with 4 links and 4 images associated with them. By default, the image from link 1 is displayed on the page. I would like to change the image with its corresponding one, each time i mouseover one of the other three links.

I'm trying to make the following code work unsuccesfully, i might be missing something. Any help will be appreciated.

In the <head> section i have this:

<script type="text/javascript">

img1 = new Image();
img1.src = "images/party/party.jpg";

img2 = new Image();
img2.src = "images/party/icecream.jpg";

img3 = new Image();
img3.src = "images/party/juice.jpg";


img4 = new Image();
img4.src = "images/party/videogames.jpg";

function change(num){

document.images["linkpic"].src = "img" + num
}

</script>

</head>

In the <body> i have:

That's my default image
<table>
<tr>
<td width="100">
<img src="images/party/balloon1.jpg" name="linkpic">
</td>
<td width="260" valign="top" align="left">
<table>
<tr><td><a href="Party1.html" onmouseover="change('1')">Party and Fun</a></td></tr>
<tr><td><a href="Party2.html" onmouseover="change('2')">Icecream
</a></td></tr>
<tr><td><a href="Party3.html" onmouseover="change('3')">Juice </a></td></tr>
<tr><td><a href="Party4.html" onmouseover="change('4')">Video Games
</a></td></tr>
</table>
</tr>
</table>
</body>

I would like when i point to Icecream, the picture on the left to change to the Icecream picture and so on.
Any hints and help are appreciated!

Thanks!

Since I like to minimize on graphics to keep bandwidth low, I have been using a script to simulate buttons. When you mouseover, you get some color changes which revert back when you move the mouse off. Simple, right?

The problem is that firefox totally ignores the script. Even worse, safari changes on mouseover, but doesn't revert on mouseout.

I have this in the heading:

Code:

<script LANGUAGE="JavaScript">

function ColorBlock(oRegion,sLinkID) 
{	
	if (document.readyState != "complete") return;
	window.event.cancelBubble = true;
	oRegion.className = "MenuSelected";	
	oRegion.style.cursor="hand";
	sLinkID.style.color = "black";
}

function UncolorBlock(oRegion,sLinkID) 
{
	if (document.readyState != "complete") return;
	window.event.cancelBubble = true;
	var oToEl = window.event.toElement;
	if ((oToEl && !oRegion.contains(oToEl))||!oToEl) 
	{
	sLinkID.style.color = "white";
	oRegion.className = "MenuUnSelected";
	}
}
</script>

And this is in the body.

Code:

<table class=MenuTable>
   <tr><td  OnMouseover="ColorBlock(this, Link4);"
            OnMouseout="UncolorBlock(this, Link4);"
            CLASS="MenuUnSelected" nowrap>
      <a STYLE="color:white" ID="Link4"
         OnMouseover="this.style.textDecorationNone=true;" href="javascript:createWindow('edu.htm','edu','toolbar=1,location=1,directories=1,status=1,menubar=1,scrollbars=1,resizable=1,width=825,height=725')">
      <div style="width:144; cursor=hand; font-weight:bold;">
      Education
      </a></div></td>
    </tr>
</table>

I have a bunch of these "buttons" ... firefox ignoring the code is annoying but safari only using half the code makes it look really bad. Anyone have any ideas?

I've done a lot of work over time on the site, there are just a few bugs that have been avoiding me and I am trying to hunt them all down and kill them.

The page is at www.adam-k-watts.com

Good morining,

I'm working on a javascript for a rollover menu that the client is regularly changing. I want to create a call to a remote "document write" script on each page so that when it changes I only have to modify it in the script rather than on every page of the site. The problem I am having is that I cannot figure out how to include the quotes needed to execute the rollovers without killing the script.

I tried removing all the quotes, and the "\" method as I would with a perl script, (and MANY other attempts) but no go.

Here is where I'm at right now. I would appreciate any suggestions or links to info I can read to learn from.

Call to the script in the html page(s):
Code:

<SCRIPT language="JavaScript" SRC="Nav_11Set.js"></SCRIPT>

The script (condensed to one image):
Code:

document.write('<table id=Table_01 width=143 height=264 border=0 cellpadding=0 cellspacing=0><tr><td><a href=http://www.minersalley.com/Memberships.html onmouseover=changeImages('Nav_11Set_01', 'images/Nav_11Set_01-over.jpg'); return true;onmouseout=changeImages('Nav_11Set_01', 'images/Nav_11Set_01.jpg'); return true;onmousedown=changeImages('Nav_11Set_01', 'images/Nav_11Set_01-down.jpg'); return true; onmouseup=changeImages('Nav_11Set_01', 'images/Nav_11Set_01-over.jpg'); return true;><img name=Nav_11Set_01 src=images/Nav_11Set_01.jpg width=143 height=24 border=0 alt=Membership Info!></a></td></tr></table>')

I'm reworking a 15 year old script.
Here is the original general purpose routine that extracted a portion of one form to another form.
Code:

function FillForm(f) {
	for( i=FullName; i<=EndOfForm; i++) { 
		self.document.forms[f].elements[i].value = FormData[i];
	}; 
};

But NOW I'm supposed to use getElementById()
Does that mean instead of the short routine I have to put one line for each Id tag and it is no longer general purpose and independent of the form being used?

Is it OK to keep using the legacy script despite the Warning from the error console?

Hi all,

I am using the following script posted on this site: http://www.javascriptkit.com/script/...oundlink.shtml

It works great, but I want to extend this script and mute the sound using a checkbox. This checkbox has the id: sound. If checked, I want to hear the sounds, when unchecked, no sounds should be heard.

This is the code I currently have for the checkbox:
Code:

function playSound() {
    if (document.getElementById('sound').checked){
        -something needs to be added here to make it work?-
    }
}

Anyone have an idea how to make this work?

Many thanks

I'm no coder, as you will soon discover. The web work I do is from a purely novice, even hobby standpoint and the sites I create and host are nothing more than favors for friends and acquaintances who have needed but have not had a presence on the web. This being explained, I am asking those with coding skills to please take a look at the site I've just completed for a little diner down the road. (They're just starting out and can't afford to pay a professional web designer and, unfortunately, are stuck with me.)

The site is http://d-n-ddiner.com

I'm the first to say that the mouseover sound would drive me crazy, but the guys who own the diner are enthusiastic and want it left as is. I have had to combine scripts in order to have the "black-and-white to color" image effect work simultaneously with sound. The sound script depends on uploaded files: soundmanager.js, soundcontroller.swf and sound-config.xml and its tags are found incorporated with each involved image, within the body. The image effects are just the result of playing around with bits and pieces I've seen, mucking about the Internet. Its script is found within the head and also within the body, in each involved image's area, in mouseover, mouseout and, of course when specifying "name=" (such as Img_1).

I opted for providing the sound in this manner because I am able to use an .mp3 file, rather than having to weigh through the pros and cons of .au versus .wav, etc., and the fickle nature of different browsers and plug-in crashes. After having many test the site (friends with varying operating systems and browsers) it appears that this mp3 solution makes the mouseover sound available to a broader range of users. Success has been achieved with Firefox, Safari, Netscape, Omniweb and Chrome. However, Internet Explorer and Opera seem to be the holdouts for both Mac and PC users.

All this brings me to two requests: Would someone take a look at the site (particularly with Firefox) to determine if something might be done to help the page load more smoothly? Secondly, is there some sleight-of-hand that might be incorporated into the script to help IE and Opera detect the mouseover sound or do you consider these two browsers essentially not worth the bother?

I am attaching a zip of the sound files I mentioned. The mp3 is not included but any mp3 snippet would do for testing, provided the sound config file is edited to reflect its file name.

My primary concern is smooth page-loading; the IE and Opera issue is of less importance. Thank you for your patience and for any assistance you would offer.

My code is here and it works ...
However, I would like my dynamic table to show on the same page as my body and not on a new blank page. I have created a DIV and try playing around with the document.getElementById('monTab').innerHTML but it's not working out for me ...

What am i missing ?

Regards,

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>new Script - Javascript Cours 11</TITLE>
<META content="text/html"; charset="UTF-8" http-equiv="content-type">
<SCRIPT type="text/javascript">
	
   

	function createTable(){
	var Etudiant = new Array(Number(prompt("How many Students will you put in ?","")));

	document.write("<table border=\"1\">");
	for (var i=0; i<Etudiant.length; i++) {
	Etudiant[i] = window.prompt("S'il vous plait entrez le nom d'un etudiant " + (i+1) + ".","")
	alert("Nice to see you "+Etudiant[i]);
	
	document.write("<td>"+Etudiant[i]+"</td>");
	j = parseInt(prompt("Combien de notes voulez vous calculez ?"));
	for (h=0;h<j;h++){ 
	notes[h] = parseInt(prompt("S'il vous plait entrez la "+(h+1)+" note de "+Etudiant[i]));
	document.write("<td>"+notes[h]+"</td>");
	}
	
	
	document.write("<tr>");
	}


	
	document.write("</tr>");
	document.write("</table>");
	document.getElementById('monTab').innerHTML=Etudiant;
}


	</script>
<BODY>

<H1>Combien de note voulez vous cumulez ?</H1>
<br>
<br>

<input type="button" name="btnSubmit" value="TRY IT" onclick="createTable()">
<div id="monTab" size="10"> Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ... </div>
</BODY>
</HTML>

I found this line in one of the scripts on javascript.kit

<code>
if(document.layers|| document.getElementById|| document.all)
</code>

Could someone give me an idea on why this line would be used in a code?

Thank you very much

could somebody plz tell me why this isnt working??

i want it specifically as it is because i need it in a bigger picture

Code:

<body>
<img id="down0" src="images/greentick.png" onclick="swap(0,1)" />
<br />
<table><tr><span id="0"><td>asdasdasd</td></span></tr></table>
<br />
<table><tr><span id="1"><td>ante gamisou re gyfto</td></span></tr></table>

<script type="text/javascript">
/*<![CDATA[*/
function swap(idA,idB){
	var cellA=document.getElementById(idA); 
    var cellB=document.getElementById(idB);
	if(cellA&&cellB){ 
		
        var temp=cellA.innerHTML;
		cellA.innerHTML=cellB.innerHTML; 
        cellB.innerHTML=temp;
	}
	alert(idB);
}
/*]]>*/
</script>
</body>