JavaScript - Javascript Onmouseover Onmouseout Event Problem

I need help with making an Image onMouseOver event and onMouseOut event without using <a> tags and inline code in the HTML. I know how to do it with <a> tags and inline already. Not sure how to go about doing this without <a> tags and inline.

If someone could give me an example of how to do this using strictly Javascript only, I would greatly appreciate the help.

I am also planning on having the Images within a table and assigning functions that execute when the mouse is over the image within the cell and when the mouse is off the image in the cell.

Aloha,

I'm trying to make a page that changes a pic to match the paragraph the user's mouse is over.

Page is here,
http://rentalocal.thad.com/sample1

The problem I have is that the page reloads the initial image (the map) every time I move my mouse from one list item to the next, before it loads the next pic. It only does this the first time, but it's annoying, slow, and makes my page look bad. I tested it using both Safari and Firefox and got the same results. Does anyone know how I should correct it?

TIA,
Thad

Code:

<ul class="borderit" onmouseout="document.getElementById('picture').src='/pic0.jpg'">
	<li onmouseover="document.getElementById('picture').src='/pic1.jpg'">
		We are picked up at our hotel in Waikiki. We are greeted with aloha, and fresh leis too.
		Our destinations are numerous, so let's get started!
	</li>
	<li onmouseover="document.getElementById('picture').src='/pic2.jpg'">
		We drive away from Waikiki toward the Windward side of O'ahu. Along the way, we see Diamond Head.
		We stop at a scenic lookout for our first pictures of the day.
	</li>
	<li onmouseover="document.getElementById('picture').src='/pic3.jpg'">
		From there we view at Koko Crater and Hanauma Bay. Next we stop at the Halona Blowhole,
		where the waves force water through a lava tube and into the sky as high as 30 feet!
	</li>
	<li onmouseover="document.getElementById('picture').src='/pic4.jpg'">
		We continue along past the amazingly beautiful blue costal waters. Have you ever seen waters so blue?
	</li>
	<li onmouseover="document.getElementById('picture').src='/pic5.jpg'">
		We are now far from the hustle and bustle of Honolulu and Waikiki. We stop for a visit to one of the many
		fantastic local beaches, but not for long, we have much more to see!
	</li>
	<li onmouseover="document.getElementById('picture').src='/pic6.jpg'">
		As we continue we reach a local macadamia nut farm where we stop to buy some flavorful gifts for friends
		back home. We make more visits to an art gallery, a ranch, a local restaurant
		for some ono (Hawaiian word for yummy) food.
	</li>
	<li onmouseover="document.getElementById('picture').src='/pic7.jpg'">
		We make a stop at Laie Point, and learn about its Hawaiian legend.
	</li>
	<li onmouseover="document.getElementById('picture').src='/pic8.jpg'">
		From there we continue on to the North Shore. We stop at a few of the world-famous beaches and observe
		some of the day's surfers. We even get a chance to swim with a honu (turtle).
	</li>
	<li onmouseover="document.getElementById('picture').src='/pic9.jpg'">
		After a stop at a shrimp truck, we get to Hale'iwa Town for some shopping and dining. We get some yummy Matsumoto Shave Ice.
	</li>
	<li onmouseover="document.getElementById('picture').src='/pic10.jpg'">
		After leaving the North Shore we begin our return the Waikiki. We travel through wonderfully fragrant pineapple fields.
		We stop at the Dole Plantation and try not to get lost in the world's largest maze.
	</li>
	<li onmouseover="document.getElementById('picture').src='/pic11.jpg'">
		On our way back to town we visit the National Cemetery at Punchbowl and the State Capitol.
	</li>
	<li onmouseover="document.getElementById('picture').src='/pic12.jpg'">
		Our final stop is another scenic point for one last view of the day.
	</li>
	<li style="margin-bottom:.5em" onmouseover="document.getElementById('picture').src='/pic13.jpg'">
		We return to our hotel. Today we saw so many wondrous sights, took countless pictures, heard about Hawaiian history and legend,
		sampled some local food, discovered some Hawaiian treasures, and learned some Hawaiian language. This will be a memory
		that we will recall for the rest of our lives.		
	</li>
</ul>

have a small div above (hover) a big one.
I assign onmouseover and onmouseout events to the wrapper div.
For image caption roll-over animation.

The problem is when the mouse is above the caption itself, causing an unwanted result(probably event bubbling).

And another problem: sometimes when you move mouse from outside to container you get a a triple debug sequence: (it should be just 2):
-I am over- -I am out- -I am over-
(firebug console)

How to make it work? (no jquery)
must work on all browsers.

Demo: http://verror.netai.net/test.html


The wanted result:
When mouse moved over the image, only mouseover event should be raised once!

When mouse moved out from the image, only the mouseout event should be raised.

when mouse is over the captionm it should be treated as if the mouse is still on the image. (no flickering)

hi,

please ignore this thread..it is a duplicate of one already active.

MODS please delete.

apologies for my mistake.

Hi,

Im a complete newbie to javascript and I've basically copied and pasted the javascript I found here to use on my site. Its an onMouseOver slideshow:

http://www.javascriptkit.com/script/...ifferent.shtml

to use on my site.

Basically, my problem is how do I add a second, separate image in a different location on the web page, associated with this script?


If I post <a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a> in two different locations, which is the script for the image, the script stops working, but having it once makes it work. So how do I add two different image locations?

Can someone please help me here? I just want to add more images in a different location. ie have image location 1, and image location 2.

Thanks in advance

Script Below:


Code:

<script>

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink1
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}


preloadimages(my images here)

</script>

For the Links:

<a href="creativewriting.html" onMouseover="changeimage(myimages[1],this.href)">Creative Writing</a><br>

For the Image:

<a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a>

Hello everyone,
If I type the name, and I check and Gender Scholar, my button will

appear
What I am looking to:
Check my buttons, and when I start typing the name, the button

Submit appear, st if I delete the text, the Submit button

disappear

Here's the script:


Code:

<head>
  <script type="text/javascript" src="jquery.validate.js"></script>
  <script>
  $(document).ready(function(){
    $("#commentForm").validate();
  });
  function check_required(){
	
	//alert(document.getElementById('rdo_boursier_oui').checked);
	//alert(document.getElementById('txt_lastname').value != "");
	if((document.getElementById('rdo_boursier_oui').checked == true 

|| document.getElementById('rdo_boursier_non').checked == true) &&

(document.getElementById('rdo_sexe_eleve_m').checked == true || 

document.getElementById('rdo_sexe_eleve_f').checked == true)
	
&&	(document.getElementById('txt_lastname').value != "" )

	
	)
 	{
		document.getElementById

('submit_etape2').style.display='block';
	}else{
		document.getElementById

('submit_etape2').style.display='none';
	}
  }
  </script>
  </head>
  
  
  <form action="#" method="post" id="commentForm">
   	<input class="submit" type="submit" name="submit_etape2" 

id="submit_etape2" value="" style="display:none;"/>
  				
			<p class="p_float">
				<label for="lastname">Votre nom<span 

class="required_red">*</span></label>
				<input type="text" name="txt_lastname" 

id="txt_lastname" value="" class="required" minlength="3" 
               
                onchange="check_required();"
                 />
			</p>
			
			
			<p class="p_float rdo">
				<label for="boursier">Boursier<span 

class="required_red">*</span></label>
			
				<input type="radio" name="rdo_boursier" 

id="rdo_boursier_oui" value="" class="rdo_sexe_eleve snd_inscription 

required" onclick="check_required();"/>Oui
				<input type="radio" name="rdo_boursier" 

id="rdo_boursier_non" value="" class="rdo_sexe_eleve snd_inscription 

required" onclick="check_required();"/>Non
			</p>
			
			<p class="p_float rdo">
				<label for="sexe">Sexe<span 

class="required_red">*</span></label>
				<input type="radio" 

name="rdo_sexe_eleve" id="rdo_sexe_eleve_m" class="rdo_sexe_eleve 

snd_inscription required" onclick="check_required();" value="">M
				<input type="radio" 

name="rdo_sexe_eleve" id="rdo_sexe_eleve_f" class="rdo_sexe_eleve 

snd_inscription required" onclick="check_required();" value="">F
			</p>
			
            
  
  </form>

Hello, I have a script I am using which works great, except when I copy the code and have multiple events it only shows the first one. This I believe is because it's calling the first class name of it's kind. I want the class's to be named the same thing (css styling) and because the site is going to be dynamically driven, but is there a way to modify my script so that instead of looking for the first class it recognizes the right class associated with the button clicked. If anyone can help me fix this problem I am having I would be most appreciative..

Code:

<script language="javascript"> 
function toggle() {
	var ele = document.getElementById("commpopup");
	if(ele.style.display == "block") {
    	ele.style.display = "none";
  	}
	else {
		ele.style.display = "block";
	}
} 
</script>

<div class="togglecomment">
     <div class="popup" id="commpopup">
          <div class="commentbtn"><a href="#"><img src="images/commenticon.png" align="absmiddle" />Comment</a></div>
     </div>
     <div class="button"><a href="javascript:toggle();"><img src="images/comment_btn.jpg" /></a></div>
</div>

I have the following javascript function:

[ function addNewWindowEvent(evType, fn)
{
if (window.addEventListener)
{
this.addEventListener("load", fn, false);
return true;
}
else if (window.attachEvent)
{
var onload = "onload"
this.attachEvent(onload, fn);
return true;
}
else
{
return false;
}
} ]

which is giving me a an exception every time a page on our site loads. The actual exception in firefox is this:

uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: https://cms-dev.stchas.edu/global/js/hdvscripts.js :: addNewWindowEvent :: line 5" data: no]

and I'm not sure exactly what it's complaining about. I'm relatively new to javascript so diagnosing and fixing this problem has me quite puzzled, and so far I have been unable to find anything helpful when I try and google for information on this. I would appreciate any help or suggestions. Thanks.

henryv

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.

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>

2 onmouseover conflict. i cant click menu1-jQuery. can someone help me out.

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>
<title>灰色CSS+Js实现的下拉菜单代码- www.webdm.cn</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="JavaScript" type="text/javascript">
function $(id){
	return document.getElementById(id);
}
 
function menu_my(name,num) {
	var my;
	my = $(name);
 
	if ( my.last == undefined ) {
		my.last = 1;
	}
	var Menu = $("Menu" + name + my.last);
	var Cont = $("Cont" + name + my.last);
	Menu.className = "";
	Cont.style.display = "none";
 
	var Menu = $("Menu" + name + num);
	var Cont = $("Cont" + name + num);
	Menu.className = "selectd";
	Cont.style.display = "block";
 
	my.last = num;
	}
</script>
<script type="text/javascript">
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;
</script>
<style type="text/css">
body{
text-align: center;
font-size:12px;
}
#popimg{
WIDTH:770px;
margin:0 auto;
text-align:center;
}
#popimg2{
WIDTH:770px;
margin:0 auto;
text-align:center;
z-index:-1;
}
ul { 
	padding: 0;
	margin: 0;
	list-style: none;
}
li {
	position:relative;
	float: left;	
	width: 110px;	
}
li ul { 
	position:absolute;
	display: none;
	top: 20px;left:0;
}
li:hover ul, li.over ul {
	display: block;
}
ul li a{
	display:block;
	font-size:12px;
	border: 1px solid #ccc;
	padding:3px;
	margin-right:1px;
	text-decoration: none;
	color: #777;background:#eee;
}
ul li a:hover{
	background-color:#f4f4f4;
}
#test{
	clear:both;
	background-color:#999999;
	width:769px;
	height:100px;
	margin:0 auto;
}
.menu0307 {
	OVERFLOW: hidden; ZOOM: 1; HEIGHT: 28px
}
.menu0307 SPAN {
	BACKGROUND: url(http://upload.ouliu.net/g/ad2da94515010b2c275a9b4958441e20.png) no-repeat -1000px 0px; FLOAT: left; OVERFLOW: hidden; WIDTH: 125px; LINE-HEIGHT: 300px; HEIGHT: 28px
}
.menu0307 SPAN#Menuxuehua1 {
	BACKGROUND-POSITION: 0px 0px
}
.menu0307 SPAN#Menuxuehua2 {
	BACKGROUND-POSITION: -125px 0px; WIDTH: 124px
}
.menu0307 SPAN.selectd#Menuxuehua1 {
	BACKGROUND-POSITION: 0px -32px
}
.menu0307 SPAN.selectd#Menuxuehua2 {
	BACKGROUND-POSITION: -125px -32px
}
</style>
</head>
<body>
<div id="popimg">
<ul id="nav">
  <li><a href="">menu1</a>
    <ul>
       <li><a href="/">Ajax/JavaScript</a></li><li><a href="/">ExtJS</a></li><li><a href="/">jQuery</a></li>
	</ul>
  </li>
  <li><a href="">menu2</a>
    <ul>
      <li><a href="/">test1</a></li><li><a href="/">test2</a></li><li><a href="/">test3</a></li>
    </ul>
  </li>
  <li><a href="">Ajax</a>
    <ul>
      <li><a href="/">CSS</a></li><li><a href="/">HTML</a></li><li><a href="/">editor</a></li>
    </ul>
  </li>
    <li><a href="">menu3</a>
    <ul>
      <li><a href="/">media</a></li><li><a href="/">object</a></li><li><a href="/">graphic</a></li>
</ul>
  </li>
  <li><a href="">menu4</a>
    <ul>
      <li><a href="/">Ajax/JavaScript</a></li><li><a href="/">ExtJS</a></li><li><a href="/">jQuery</a></li>
    </ul>
  </li>
  <li><a href="">menu5</a>
    <ul>
<li><a href="/">game</a></li><li><a href="/">programming</a></li><li><a href="/">sale</a></li>
    </ul>
  </li>
  <li><a href="">VC++</a>
    <ul><li><a href="/">database</a></li><li><a href="/">oracle</a></li><li><a href="/">sql</a></li>
    </ul>
  </li>
</ul>
</div>
<div id="popimg2">
  <div id="test">
       <DIV class=menu0307 id=xuehua>
							 <SPAN class=selectd id=Menuxuehua1 onmouseover="menu_my('xuehua',1)" ;>meeting</SPAN>
							 <SPAN id=Menuxuehua2 onmouseover="menu_my('xuehua',2)" ;>note</SPAN>
	   </DIV>
	   <DIV id=Contxuehua1 style="POSITION: relative">test</DIV>
	   <DIV id=Contxuehua2 style="DISPLAY: none">database</DIV>
  </div>
</div>
</body>
</html>

Hi I have a script that runs fine in FF, Chrome But in IE it does not work at all...(mouse over/mouseout) Would you please help me fix the problem...
here is the code:
Code:

<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;

function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
window.onmouseout=doTimer;
function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
}


function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}

function descriptionKeyUp() {
	if (timer === null) {
		
		
		startTimer();
	}
	else {
		clearTimeout(timestop);
	}

	timestop = setTimeout(stopTimer, 6000);
}

</script>


-----------------------
<form>
  
<textarea name="taskdesc" id="taskdesc" cols="45" rows="5"onmouseover="stopCount()" onkeyup="descriptionKeyUp()"></textarea>

<p>Time Spent on Other tasks:
      <input type="text" name ="txt" id="txt" />
    </p>
    <p>Time Spent on Documenting:
      <input type="input" name="seconds" id="timer" />
</form>

basically what it does is when user takes the mouse away from the form it counts the time...when user put the cursor in side the form...it stops counting......

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.

Is it possible to set onmouseover only in js file without running the function on html code?

P.S. I found a coding thread here but I don't understand it and it's too old (2005 archive).

Thank you very much

JavaScript

Code:

window.addEvent('domready',function(){
	//SAMPLE 8
	var handles8_more = $$('#handles8_more span');
	var nS8 = new noobSlide({
		box: $('box8'),
		interval: 5000,
		autoPlay: true,
		items: $$('#box8 h3'),
		size: 900,
		handles: $$('#handles8 span'),
		handle_event: 'mouseenter',
		addButtons: {
			previous: $('prev8'), 
			play: $('play8'), 
			stop: $('stop8'), 
			playback: $('playback8'), 
			next: $('next8') 
		},
		onWalk: function(currentItem,currentHandle){
			//style for handles
			$$(this.handles,handles8_more).removeClass('active');
			$$(currentHandle,handles8_more[this.currentIndex]).addClass('active');
			//text for "previous" and "next" default buttons
			$('prev8').set('html','<< '+this.items[this.previousIndex].innerHTML);
			$('next8').set('html',this.items[this.nextIndex].innerHTML+' >>');
		}
	});
	//walk to item 0 witouth fx
	nS8.walk(0,false,true);
});

html

Code:

		<div class="slider sample8">
			<p class="buttons" id="handles8">
				<span>Item 1</span><span>Item 2</span><span>Item 3</span><span>Item 4</span><span>Item 5</span>
			</p>
			<div class="mask1">
				<div id="box8">
					<div onMouseOver="nS8.Stop();" onMouseOut="nS8.Play();">
					</div>
				</div>
			</div>
			<p class="buttons">
				<span id="prev8">&lt;&lt; Previous</span> | <span id="next8">Next &gt;&gt;</span>
			</p>

			<p class="buttons">
				<span id="playback8">&lt; Playback</span>
				<span id="stop8">Stop</span>
				<span id="play8">Play &gt;</span>
			</p>
		</div>

All I need to do is when they hover ocer the div statement stop the program from looping. and then when they stop hovering over it let it start looping again.