JavaScript - Onmouseover Activate Stop Function Of Javascript

Hello all,

I have a question regarding onmouseover on "a" tag. I currently have a list of "img" thumbnails which have onMouseOver attached to the "a" tag which wraps the "img". When the mouse is over the image, a "preview" of the image will load in another div via a javascript function, this javascript function has a jquery fadeto effect so the preview will fade into view.

The problem now is if a user hover over multiple thumbnails quickly, the onMouseOver event is registered multiple times, so when the user finally stop hovering over multiple thumbnails quickly, the last thumbnail will receive the event multiple times and fades in not only once. Below is my code:

function previewimage(loadimg){
jloadimg='<img src="../images/'+loadimg+'.png" />';

//stimulate a fade in effect by making the image has 0.7 opacity first
$(#largeimage).fadeTo('fast', 0.7, function() {
});
$(#largeimage).fadeTo('slow', 1, function() {
});

document.getElementById('largeimage').innerHTML=jloadimg;
}

for the list of thumbnail images, I have:

<a onMouseOver="previewimage('imagefile1');"><img src="path/to/thumbnail/image1.png" /></a>
<a onMouseOver="previewimage('imagefile2');"><img src="path/to/thumbnail/image2.png" /></a>
<a onMouseOver="previewimage('imagefile3');"><img src="path/to/thumbnail/image3.png" /></a>

How do I cancel multiple event from running continuosly if the previous one is still in queue?

I have a website that has some javascript on it. I need to change one of the js files so that it doesn't reload the main "slideshow" (HTML5) files every time there is a click to a new page. here is the code that is causing...
[CODE]
$(document).ready(function() {

//When page loads...

$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {

$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content

var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});

});
[CODE]
I can't get rid of any of the lines or else it messes with my code, but when it "activates" the first tab is where I want that "first tab" to stay on what the user had clicked before, I don't want reactivation basically....please help!

Is there a line of code I can add to my slideshow code to have the slideshow activated by mouseOver and show the main picture on mouseOut, or do I have to redo the code? I've been searching online for a while and can't find anything that works.

Any help would be appreciated!

Code:

<script language="JavaScript1.1">
<!--

/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/

var slideimages=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}


//-->
</script>

	<img src="https://lh3.googleusercontent.com/-_ZBn3vpI1aM/TeT4Ty9Dh8I/AAAAAAAABQ8/OWXNUQfXn5U/butterfly.png" name="slide" border=0 width=50 height=47>
<script>
<!--

//configure the paths of the images, plus corresponding target links
slideshowimages("https://lh6.googleusercontent.com/-bPZjekuMNX8/TeT4TyZ2z7I/AAAAAAAABRA/swrVvRqHTpM/butterfly1.png","https://lh6.googleusercontent.com/-fM-kMmy3STQ/TeT4T_aq5hI/AAAAAAAABRE/oq4rGMy8-Qs/butterfly2.png","https://lh3.googleusercontent.com/-jR41bich1pw/TeT4UFyGefI/AAAAAAAABRI/2V8B6bx8P0o/butterfly5.png", "https://lh3.googleusercontent.com/-_ZBn3vpI1aM/TeT4Ty9Dh8I/AAAAAAAABQ8/OWXNUQfXn5U/butterfly.png")


//configure the speed of the slideshow, in miliseconds
var slideshowspeed=200

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++
setTimeout("slideit()",slideshowspeed)
}
slideit()

//-->
</script>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>

Hi Guys I am trying to modify the functionality of my page. I want to be able to activate this piece of code using another javascript function.

This is the code I want to activate:

Code:

<script type="text/javascript"><!--
$('#button-cart').bind('click', function() {
	$.ajax({
		url: 'index.php?route=checkout/cart/update',
		type: 'post',
		data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea, .date_data input[type=\'text\']'),
		dataType: 'json',
		success: function(json) {
			$('.success, .warning, .attention, information, .error').remove();
			
			if (json['error']) {
				if (json['error']['warning']) {
					$('#notification').html('<div class="warning" style="display: none;">' + json['error']['warning'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
				
					$('.warning').fadeIn('slow');
				}
				
				for (i in json['error']) {
					$('#option-' + i).after('<span class="error">' + json['error'][i] + '</span>');
				}
			}	 
						
			if (json['success']) {
				$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
					
				$('.success').fadeIn('slow');
					
				$('#cart_total').html(json['total']);
				
				$('html, body').animate({ scrollTop: 0 }, 'slow'); 
			}	
		}
	});
});
//--></script>

And this is how I want the format of the function to be:

function testsession() {
if there is a session called 'hiredate' {
activate the script above
}
else {
var el = document.getElementById("product_data");
}
}


I just dont know how to write this in javascript

Could you help me if possible please

hi.
how can i get the value of title of<td> on onmouseover function.

something like that.
Code:

<td title="mytitle" onMouseOver="func(this.title);"></td>

can i do this.
plzzzz help me

I have six small images. Depending on which image a user hovers over, I would like a seventh image (a simple box) to change as well.

For example, if a user hovers over image1, I want the seventh image to be a red box.

If a user hovers over image2, the seventh image should be a blue box.

Simple huh? So the seventh image changes color based on which of the six smaller images the user hovers over.

-------------
So far, my current code only allows me to hover over any of the six images, and the seventh image always changes to the same image color. Code is below. Any help would be appreciated.

Code:

		<script type="text/javascript">
			function hoverBox() {
				var boxNumber;
				
				document.getElementById("info").src = "Images/infoRedColor.png";
			}
			
			function hoverBoxOut() {
				document.getElementById('info').src = "Images/info.png;"
			}
			
		</script>
	</head>
	<body>
	<div id="wrapper">

		<a href=""> <img class="box1" src="Images/box1.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
onmouseout="this.src='Images/box1.png'; hoverBoxOut()" ></a>
		<a href=""> <img class="box2" src="Images/box2.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
onmouseout="this.src='Images/box2.png'; hoverBoxOut()"></a>
		<a href=""> <img class="box3" src="Images/box3.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
onmouseout="this.src='Images/box3.png'; hoverBoxOut()"></a>	
		<a href=""> <img class="box4" src="Images/box4.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
onmouseout="this.src='Images/box4.png'; hoverBoxOut()"></a>
		<a href=""> <img class="box5" src="Images/box5.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
onmouseout="this.src='Images/box5.png'; hoverBoxOut()"></a>
		<a href=""> <img class="box6" src="Images/box6.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
onmouseout="this.src='Images/box6.png'; hoverBoxOut()"></a> 

<!-- Seventh Image -->
		<img id="info" src="Images/info.png" border="0">

	</div>
		
		
		
	</body>

Hey all,

I have a little function that performs when a form item is selected. I would like to give the form items all at once and have the function perform when the user mouses over an item in the displayed list. Here is the form code:
Code:

<form>
<select onchange="showRSS(this.value)">
<option value="">Select an RSS-feed:</option>
<option value="Google">Google News</option>
<option value="MSNBC">MSNBC News</option>
</select>
</form>

thanks a bunch,

Brian

p.s. I tried this but it didn't work
Code:

<?php echo("<a href=\"http://www.msn.com\" onMouseover=\"showRSS(this.MSNBC)\">MSNBC News</a>");?>
<br />
<?php echo("<a href=\"http://www.google.com\" onMouseover=\"showRSS(this.Google)\">Google News</a>");?>
<br />

Hi,
I hope someone can help me figure this out - it's been bugging me for a whole day now, and I can't seem to figure it out, and so far no Google research found this exact problem for me...

Situation:
I have a simple HTML page with one DIV element with the id "rotator". Inside that, JavaScript is supposed to create boxes that react to mouseovers.

The weird thing is: The whole script works, but ONLY on the LAST box I create, no matter what I do. I can manually add the mouseover code to any one of these boxes, but it will only take on the last one.
I can have JavaScript tell me the mouseover status of each box, and they all tell me they have code assigned correctly - but again only the last one works...

Here's the relevant code (yes, highly abbreviated, but it's the part that fails on me):

Code:

var maxBoxes = 10;

function initSite() {
  var rotator = document.getElementById("rotator");
  rotator.innerHTML = "";
  for (x = 0; x < maxBoxes; x++) {
    rotator.innerHTML +='<div id="myBox' + x + '"></div><div id="myDark' + x + '"></div>';
    // various other stuff about myBoxes[x] also in here, but not relevant to the issue I think
    
    applyMouseActions(document.getElementById("myDark" + x);

    debugOutput(document.getElementById("myDark" + x).id+"=" + document.getElementById("myDark" + x).onmouseover + "<br>", 1);
  }
}

function applyMouseActions(item) {
  if (!item) return;
  item.onmouseover = function(ev) {
    alert("does this work?");
    var thisNum = this.id;
    thisNum = thisNum.charAt(this.id.length-1);
    var tempBox = myBoxes[thisNum].boxOb;
    tempBox.style.background = "#fff";
  }
  item.onmouseout = function(ev) {
    var thisNum = this.id;
    thisNum = thisNum.charAt(thisNum.length-1);
    var tempBox = myBoxes[thisNum].boxOb;
    tempBox.style.background = "#aaa";
  }
}

initSite is called in the body onload. All kinds of other animation parts are implemented that work fine, just this mouseover won't work.
I have tried re-writing it in multiple different ways, including "xyz.onmouseover = myMouseCode" and then defining the function separately later - still no dice.

So, the code creates 10 boxes (0-9) and 10 boxes that are on top of them to create a form of shadow effect depending on the position of the original boxes. Since the "myDark" boxes are on top of the "myBox" boxes, I apply the onmouseover onto the "myDark" boxes, but it only works on "myDark9" and no other box.
They are all created the same way, the mouseover assigned the same way...
All I can do is shake my head at it, but that doesn't fix the issue, obviously ;-)

Any idea what else I can try?

Thanks!

How do I stop the displaymessage function when i ==1
Code:

<script type="text/javascript">
var i =0;
function one()
{
	document.getElementById('control').innerHTML = 1;
	i =document.getElementById('control').innerHTML;
}
function zero()
{
	document.getElementById('control').innerHTML = 0;
	i =document.getElementById('control').innerHTML;
}
function displaymessage() 
//if (i==0)//this causes problems
{
	alert("Hello World!");
}
</script>
<body onclick="javascript: displaymessage();"> 
<div id='control' onmouseover="javascript: one();" onmouseout="javascript: zero()">0</div>

in the attached photos you have a wheel of colors and a corresponding cascading menu. I'd like to just be able to onmouseover one of the 8 colored polygons within the wheel, have it replace the wheel with one of 8 new images depending on which polygon the mouse is over, and at the same time, light up the corresponding image on the cascading company menu group. is this possible with javascript? links to a tutorial?

I've had some experience with replacing one image with another onmouseover, but not with breaking up one image into 8 parts, each with a separate image replacement. I could see how you could perform this with only 4 different colored polygons, but not 8.

I have some images rotating and I want to be able to stop the whole flow with another function.

This function needs to be killed so it all disappears and I can choose which image gets to stay. jquery by the way.
Code:

function start() {
		
			
		 $("#t1").fadeIn('fast', function() {
			$("#t1").fadeTo(2000, 1).slideUp('slow', function() {
					$("#t2").slideDown('slow');
					$("#t2").fadeTo(2000, 1).slideUp('slow', function() {
					$("#t3").slideDown('slow');
					$("#t3").fadeTo(2000, 1).slideUp('slow', function() {
					$("#t4").slideDown('slow');
					$("#t4").fadeTo(2000, 1).slideUp('slow', function() {
					$("#t5").slideDown('slow');
					$("#t5").fadeTo(2000, 1).slideUp('slow', function() {
					$("#t1").slideDown('slow');
				});
					});
					});
					});
			});
		});
		 }

Is this possible?
something like:

function killstart(){

//some code that totally stops the start() function
}

Hi,
what I want to do is create a menu with rollover buttons but each button also changes the background image of a div.

I've managed to change the colour of the div but not add an image there. I've added my code so you can have a look. Case 0 shows me attempting to change the background image. I must be doing something wrong.

I've left the other cases as colours so you can see how I did that. I eventually want it all to be images. I'm creating a Joomla website (not sure if that makes a difference).


Code:

<body onload="addHandlers()"> 

<script type="text/javascript" language="javascript">  

 function addHandlers(){  

 var allMenus = document.getElementById("services_menu").getElementsByTagName("li");  

 for(var k = 0; k < allMenus.length; k++)
	{
	  allMenus[k].setAttribute('onmouseover', 'ChangeContentBg('+ k + ')' );
	allMenus[k].setAttribute('onmouseout', 'Reset()'); 
	}

 }  

 </script> 



<script type="text/javascript">  

 function ChangeContentBg(i)  

 {  

 var Num = parseInt(i);  

 var ContentDiv = document.getElementById("content");  

 switch(Num)  

 {  

 case 0:  

 ContentDiv.style.background-image = 'url(../images/waxingtinting_rollover_image.jpg)';

 break;  

 case 1:  

 ContentDiv.style.backgroundColor = 'red';  

 break ;  
 
 case 2:  

 ContentDiv.style.backgroundColor = 'purple';  

 break ;  
 
  case 3:  

 ContentDiv.style.backgroundColor = 'green';  

 break ;  
 
  case 4:  

 ContentDiv.style.backgroundColor = 'yellow';  

 break ;  


 /*For each new color you would have to add a new case and change ChangeContentBg() parameter , to the case you want in <li> tag*/  

 }  

 }  

 function Reset()  

 {  

 document.getElementById("content").style.backgroundColor = '';  

 }  

</script>

Hi guys,

I need some help. Im trying to make a navagation menu with images that need to be changed when someone hovers over the child category.

So lets say I have a menu that looks like this:

Code:

<img src="notactiveimagemenu1.jpg" alt="">
<ul id="menu1">
   <li>link</li>
   <li>link</li>
   <li>link</li>
</ul>
<img src="notactiveimagemenu2.jpg" alt="">
<ul id="menu2">
   <li>link</li>
   <li>link</li>
   <li>link</li>
</ul>

Now what im trying to do is if someone hovers over the li items from menu1 to change the image src of menu1.jpg to active.

I was hoping to do this with some javascript.
Code:

// i was thinking about something like this:

// first put menu items in a array

// then use document.getElementById(id).onmouseover = function()
// and make some sort of check to see which src should be changed.

Now I really have no clue how to do it.
So if anyone knows a cool solution please let me know.
I know I could add onmouseover events to each li item and changing the src of the category. But Im trying to find a better solution.
And I think I should be able to use document.getElementById(id).onmouseover = function() for that.

Anyway thanks for any tips.
Please note I know I could use jquery to do all of this very easy but I consider this practice because I don't know that much javascript.

Here is a javascript/html code that changes a text phrase to something else on mouseover but it doesn't return to its original state before the event happened. The code is below. Thank you for your help.
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <script></script>
  <title>Javascript</title>
  <style type="text/css">
div
{
font-family: Georgia
}
  </style>
</head>
<body>
<script type="text/javascript">
function changetext()
{
var textchange2 = "~Home~" ;
var id = document.getElementById("A");
id.innerHTML=textchange2;
}
</script>
<div id="A" onmouseover="changetext();">Home</div>
</body>
</html>

Hi Guys,

Quick question, is there a way to stop a JavaScript from validating after a certain point of the code. I've been "googling" like crazy and cant find a solution.

I had to add a Checkbox validation last second and there was existing validation and I'm not good enough to alter all of it to reflect the checkbox part so what I did was I checked to see if at least one of the checkboxes was selected, if yes, do nothing and finish the rest of the validation. If no, prompt them with an error.

The problem is after it prompts them for an error, it continues to run the rest of the validation and at the end it allows the end user to print. I cannot allow the end user to print until everything is filled in. Here is my code:

Code:

function validateFields() {
	var fieldsToVerify = [
                ["PrincipalInvestigator"], 
		["ContactEmailAddress"],
		["RFAward"],
		["Sponsor"],
		["AwardTitle"], 
		["BudgetStartDate"], 
		["BudgetEndDate"], 
		["SectionII"],
		["ProjectRole"],
		["EmployeeName"], 
		["DatesofAppointment"],
		["EffortonProject"],
		["Date"],
		["PrintName"],
		["Date2"],
		["PrintName2"],
		
	];
	

		var emptyFields = [];
	var notFullFields = [];
	for (var i=0; i<fieldsToVerify.length; i++) {
		var f = this.getField(fieldsToVerify[i][0]);
		if (f==null) {
			console.println(fieldsToVerify[i][0] + " not found.");
			continue;
		}
		if (f.valueAsString=="") {
			emptyFields.push(f.name);
		} else if (fieldsToVerify[i].length>1 && f.valueAsString.length<fieldsToVerify[i][1]) {
			notFullFields.push([f.name,fieldsToVerify[i][1]]);
		}
	}
	
	for (var i in nonRequiredFieldsToVerify) {
		var f = this.getField(nonRequiredFieldsToVerify[i]);
		if (f==null) {
			console.println(nonRequiredFieldsToVerify[i] + " not found.");
			continue;
		}
		if (f.valueAsString!="" && f.valueAsString.length<f.charLimit) {
			notFullFields.push([f.name,f.charLimit]);
		}
	}


 if 
(this.getField("CheckBox1").value=="Yes" || this.getField("CheckBox2").value=="Yes" || this.getField("CheckBox3").value=="Yes" || this.getField("CheckBox4").value=="Yes" || this.getField("CheckBox5").value=="Yes" || this.getField("CheckBox6").value=="Yes" || this.getField("CheckBox7").value=="Yes")

{}

else

app.alert("Select a Checkbox in Section I before printing") 

	if (emptyFields.length==0 && notFullFields.length==0) {
		this.print();
	} else {
		var msg = "";
		if (emptyFields.length>0) {
			msg += "The following fields must be filled-in:\n";
			for (var i in emptyFields)
				msg += emptyFields[i]+"\n";
		}

		if (notFullFields.length>0) {
			if (msg!="") msg+="\n\n";
			msg += "The following fields are not filled-in completely:\n";
			for (var i in notFullFields)
				msg += notFullFields[i][0] + " (required length: " + notFullFields[i][1] + ")\n";
		}
		app.alert(msg,"");
	}
}