|
JavaScript - Dynamically Adding Onmouseover Problem
So I have been struggling with a Javascript issues for a couple of days now and can't find an answer anywhere online that has helped.
I have a javascript loop that is looping through all of my <dfn> html tags. These tags are used to show a glossary term on my page. When the user mouses over the term it shows a popup with the term name and the definition. Here is my javascript function: Code: function definitionRollover(){
var j;
var dfns = document.getElementsByTagName('dfn')
for (j=0; j<dfns.length;j++){
var term = dfns[j].innerHTML.charAt(0).toUpperCase() + dfns[j].innerHTML.slice(1);
var definitionArray = new Array(term, dfns[j].title);
dfns[j].onmouseover = function(){stm(definitionArray,Style[0])}
dfns[j].onmouseout = function(){htm();};
}
}
As you can see I am adding a onmouseover event to these <dfn> tags which calls another function (stm) with the definition and term being held in the definitionArray. This works great until I have multiple terms on a page. When I have multiple terms it only shows the last terms definition for all terms. My question is how I can get it to work for all terms. I know that throughout the loop the definitionArray is holding the correct info at the correct time but for some reason it only shows the last one. I hope that this makes sense and if anyone could give me any tips or leads it would be very much appreciated. Similar TutorialsHi, I am quite new to JS and is currently building a website with a little of JS Function. Ok, so I have a Page tat consists of 10 images. Each images when on mouse over, will display a larger version on the images, using JS(onmouseover). Then, I will have a next button that will replace all the images, using Ajax, which means my page will not be reloaded. The problem comes here when I have to replace all the onmouseover effect. I can replace all the thumbnails without problem, but the onmouseover I have problem replacing. Is there anyway that I can dynamically replace all the onmouseover? Any help will be appreciated. Thanks Hi, I am trying to use the onmouseover on a table element (table/row/cell) when creating the table using HTML everything is ok. Code: <TABLE border="2" >
<TR >
<TD bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#FFFFFF';" >Mauritania</td>
<TD bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="alert('amit')">21N</TD>
<TD>24N</TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>
However when I am trying to do the same using javascript it is not working. I can see the correct table data and background color but it doesnt change on mouse over. Code: function test_table(srcHolder)
{
var srcTable = document.createElement("table");
srcTable.border = 1;
srcTable.borderColor = "black";
var tmpRow = null;
var tmpCell = null;
srcHolder.appendChild(srcTable);
for(i=0; i<3; i++)
{
tmpRow = srcTable.insertRow()
for(j=0; j<3; j++)
{
tmpCell = tmpRow.insertCell()
tmpCell.innerText = j;
tmpCell.bgColor ="red"
tmpCell.onMouseOver="this.bgColor='gold';"
tmpCell.onMouseOut="this.bgColor='#FFFFFF';"
tmpCell=null;
}
tmpRow = null;
}
}
can someone explain to me what's wrong? Hellooo. So I'm having trouble figuring out how to dynamically add another set of rows to a table when a button is clicked. The code below shows what goes into one set. When the button is clicked, it needs to create another three rows with the same format as the code below, but the variable names need to show what row they're on so I can easily call the values that have been inputed in another function that saves the information. Sooo for example the first variable, bhrs1-1 needs to become bhrs4-1 in the next set (because there's already a bhrs2-1 and bhrs3-1 in this set, which would become bhrs5-1 and bhrs6-1 in the new set). Sorry the code's so long! Help would be greatly appreciated. Thanksss!! Code: <TBODY>
<INPUT TYPE=HIDDEN id=bhrs1-1 name=bhrs1-1><INPUT TYPE=HIDDEN id=comment1-1 name=comment1-1>
<INPUT TYPE=HIDDEN id=bhrs1-2 name=bhrs1-2><INPUT TYPE=HIDDEN id=comment1-2 name=comment1-2>
<INPUT TYPE=HIDDEN id=bhrs1-3 name=bhrs1-3><INPUT TYPE=HIDDEN id=comment1-3 name=comment1-3>
<INPUT TYPE=HIDDEN id=bhrs1-4 name=bhrs1-4><INPUT TYPE=HIDDEN id=comment1-4 name=comment1-4>
<INPUT TYPE=HIDDEN id=bhrs1-5 name=bhrs1-5><INPUT TYPE=HIDDEN id=comment1-5 name=comment1-5>
<INPUT TYPE=HIDDEN id=bhrs1-6 name=bhrs1-6><INPUT TYPE=HIDDEN id=comment1-6 name=comment1-6>
<INPUT TYPE=HIDDEN id=bhrs1-7 name=bhrs1-7><INPUT TYPE=HIDDEN id=comment1-7 name=comment1-7>
<TR>
<TD HEIGHT=20 SDVAL="1" SDNUM="1033;1033;#,##0_);[RED](#,##0)">
<SELECT style="width:500px;" name=project_id1 size=1 onChange='onProjectChanged(1);'>
<?
//
// Load Projects
//
// $sresults = mysql_query("SELECT project_id, project, billable_rate, customer_id, Customer.CustomerName FROM Project LEFT OUTER JOIN Customer ON Project.customer_id=Customer.customer_id WHERE status_id='active' ORDER BY project");
$sresults = mysql_query("SELECT project_id, project, billable_rate, Project.customer_id, CostCenter.DisplayNameShort FROM Project LEFT OUTER JOIN CostCenter ON Project.customer_id=CostCenter.customer_id WHERE status_id='active' ORDER BY customer_id,CostCenter.DisplayNameShort,project");
// $srate = 0;
print "<OPTION value='0'>--</OPTION>\n";
while($arow = mysql_fetch_assoc($sresults))
{
// $srate = $arow["billable_rate"];
print "<OPTION value=\"" . $arow["project_id"] . "\">" . substr($arow["DisplayNameShort"], 0, 15) . ": " . $arow["project"] . "</OPTION>\n";
}
// print "\n</SELECT>Billable Rate: <INPUT name=billable_rate value=\"" . $srate . "\" size=10 DISABLED></TD>\n";
?>
</TD>
<TD>
<SELECT name=task11 size=1 style="width:220px;" onChange='onTaskChange(1);'>
<?
print "<OPTION value='0'>--</OPTION>\n";
print "<OPTION value='1'>Sales Support</OPTION>\n";
print "<OPTION value='2'>Project Management</OPTION>\n";
print "<OPTION value='3'>Discovery and Requirements Documentation</OPTION>\n";
print "<OPTION value='4'>Analysis and Design</OPTION>\n";
print "<OPTION value='5'>Coding, Unit Testing, Infrastructure Changes</OPTION>\n";
print "<OPTION value='6'>QA, Planning, System Testing</OPTION>\n";
print "<OPTION value='7'>User Acceptance Testing</OPTION>\n";
print "<OPTION value='8'>User Documentation and Training</OPTION>\n";
print "<OPTION value='9'>Launch</OPTION>\n";
print "<OPTION value='10'>Maintenance, Support, Account Management</OPTION>\n";
?>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs1-1 name=hrs1-1 size=2 maxlength=2 onFocus='onCellFocus(1,1);' onChange='calcRowTotal(1,1);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs1-2 name=hrs1-2 size=2 maxlength=2 onFocus='onCellFocus(1,2);' onChange='calcRowTotal(1,2);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs1-3 name=hrs1-3 size=2 maxlength=2 onFocus='onCellFocus(1,3);' onChange='calcRowTotal(1,3);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs1-4 name=hrs1-4 size=2 maxlength=2 onFocus='onCellFocus(1,4);' onChange='calcRowTotal(1,4);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs1-5 name=hrs1-5 size=2 maxlength=2 onFocus='onCellFocus(1,5);' onChange='calcRowTotal(1,5);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs1-6 name=hrs1-6 size=2 maxlength=2 onFocus='onCellFocus(1,6);' onChange='calcRowTotal(1,6);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs1-7 name=hrs1-7 size=2 maxlength=2 onFocus='onCellFocus(1,7);' onChange='calcRowTotal(1,7);'><BR>
</P>
</TD>
<TD BGCOLOR="#ffff99" SDVAL="0" SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><FONT SIZE=3><B><INPUT id=task1total size=2 maxlength=4 DISABLED></B></FONT>
</P>
</TD>
</TR>
<INPUT TYPE=HIDDEN id=bhrs2-1 name=bhrs2-1><INPUT TYPE=HIDDEN id=comment2-1 name=comment2-1>
<INPUT TYPE=HIDDEN id=bhrs2-2 name=bhrs2-2><INPUT TYPE=HIDDEN id=comment2-2 name=comment2-2>
<INPUT TYPE=HIDDEN id=bhrs2-3 name=bhrs2-3><INPUT TYPE=HIDDEN id=comment2-3 name=comment2-3>
<INPUT TYPE=HIDDEN id=bhrs2-4 name=bhrs2-4><INPUT TYPE=HIDDEN id=comment2-4 name=comment2-4>
<INPUT TYPE=HIDDEN id=bhrs2-5 name=bhrs2-5><INPUT TYPE=HIDDEN id=comment2-5 name=comment2-5>
<INPUT TYPE=HIDDEN id=bhrs2-6 name=bhrs2-6><INPUT TYPE=HIDDEN id=comment2-6 name=comment2-6>
<INPUT TYPE=HIDDEN id=bhrs2-7 name=bhrs2-7><INPUT TYPE=HIDDEN id=comment2-7 name=comment2-7>
<TR>
<TD HEIGHT=20 SDVAL="2" SDNUM="1033;1033;#,##0_);[RED](#,##0)">
<INPUT name=remove1 value=Remove type=button onClick='removeProject(1);'>
</TD>
<TD>
<SELECT name=task12 size=1 style="width:220px;" onChange='onTaskChange(2);'>
<?
print "<OPTION value='0'>--</OPTION>\n";
print "<OPTION value='1'>Sales Support</OPTION>\n";
print "<OPTION value='2'>Project Management</OPTION>\n";
print "<OPTION value='3'>Discovery and Requirements Documentation</OPTION>\n";
print "<OPTION value='4'>Analysis and Design</OPTION>\n";
print "<OPTION value='5'>Coding, Unit Testing, Infrastructure Changes</OPTION>\n";
print "<OPTION value='6'>QA, Planning, System Testing</OPTION>\n";
print "<OPTION value='7'>User Acceptance Testing</OPTION>\n";
print "<OPTION value='8'>User Documentation and Training</OPTION>\n";
print "<OPTION value='9'>Launch</OPTION>\n";
print "<OPTION value='10'>Maintenance, Support, Account Management</OPTION>\n";
?>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs2-1 name=hrs2-1 size=2 maxlength=2 onFocus='onCellFocus(2,1);' onChange='calcRowTotal(2,1);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs2-2 name=hrs2-2 size=2 maxlength=2 onFocus='onCellFocus(2,2);' onChange='calcRowTotal(2,2);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs2-3 name=hrs2-3 size=2 maxlength=2 onFocus='onCellFocus(2,3);' onChange='calcRowTotal(2,3);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs2-4 name=hrs2-4 size=2 maxlength=2 onFocus='onCellFocus(2,4);' onChange='calcRowTotal(2,4);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs2-5 name=hrs2-5 size=2 maxlength=2 onFocus='onCellFocus(2,5);' onChange='calcRowTotal(2,5);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs2-6 name=hrs2-6 size=2 maxlength=2 onFocus='onCellFocus(2,6);' onChange='calcRowTotal(2,6);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs2-7 name=hrs2-7 size=2 maxlength=2 onFocus='onCellFocus(2,7);' onChange='calcRowTotal(2,7);'><BR>
</P>
</TD>
<TD BGCOLOR="#ffff99" SDVAL="0" SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><FONT SIZE=3><B><INPUT id=task2total size=2 maxlength=4 DISABLED></B></FONT>
</P>
</TD>
</TR>
<INPUT TYPE=HIDDEN id=bhrs3-1 name=bhrs3-1><INPUT TYPE=HIDDEN id=comment3-1 name=comment3-1>
<INPUT TYPE=HIDDEN id=bhrs3-2 name=bhrs3-2><INPUT TYPE=HIDDEN id=comment3-2 name=comment3-2>
<INPUT TYPE=HIDDEN id=bhrs3-3 name=bhrs3-3><INPUT TYPE=HIDDEN id=comment3-3 name=comment3-3>
<INPUT TYPE=HIDDEN id=bhrs3-4 name=bhrs3-4><INPUT TYPE=HIDDEN id=comment3-4 name=comment3-4>
<INPUT TYPE=HIDDEN id=bhrs3-5 name=bhrs3-5><INPUT TYPE=HIDDEN id=comment3-5 name=comment3-5>
<INPUT TYPE=HIDDEN id=bhrs3-6 name=bhrs3-6><INPUT TYPE=HIDDEN id=comment3-6 name=comment3-6>
<INPUT TYPE=HIDDEN id=bhrs3-7 name=bhrs3-7><INPUT TYPE=HIDDEN id=comment3-7 name=comment3-7>
<TR>
<TD HEIGHT=20 SDVAL="3" SDNUM="1033;1033;#,##0_);[RED](#,##0)">
<P><BR>
</P>
</TD>
<TD>
<SELECT name=task13 size=1 style="width:220px;" onChange='onTaskChange(3);'>
<?
print "<OPTION value='0'>--</OPTION>\n";
print "<OPTION value='1'>Sales Support</OPTION>\n";
print "<OPTION value='2'>Project Management</OPTION>\n";
print "<OPTION value='3'>Discovery and Requirements Documentation</OPTION>\n";
print "<OPTION value='4'>Analysis and Design</OPTION>\n";
print "<OPTION value='5'>Coding, Unit Testing, Infrastructure Changes</OPTION>\n";
print "<OPTION value='6'>QA, Planning, System Testing</OPTION>\n";
print "<OPTION value='7'>User Acceptance Testing</OPTION>\n";
print "<OPTION value='8'>User Documentation and Training</OPTION>\n";
print "<OPTION value='9'>Launch</OPTION>\n";
print "<OPTION value='10'>Maintenance, Support, Account Management</OPTION>\n";
?>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs3-1 name=hrs3-1 size=2 maxlength=2 onFocus='onCellFocus(3,1);' onChange='calcRowTotal(3,1);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs3-2 name=hrs3-2 size=2 maxlength=2 onFocus='onCellFocus(3,2);' onChange='calcRowTotal(3,2);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs3-3 name=hrs3-3 size=2 maxlength=2 onFocus='onCellFocus(3,3);' onChange='calcRowTotal(3,3);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs3-4 name=hrs3-4 size=2 maxlength=2 onFocus='onCellFocus(3,4);' onChange='calcRowTotal(3,4);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs3-5 name=hrs3-5 size=2 maxlength=2 onFocus='onCellFocus(3,5);' onChange='calcRowTotal(3,5);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs3-6 name=hrs3-6 size=2 maxlength=2 onFocus='onCellFocus(3,6);' onChange='calcRowTotal(3,6);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs3-7 name=hrs3-7 size=2 maxlength=2 onFocus='onCellFocus(3,7);' onChange='calcRowTotal(3,7);'><BR>
</P>
</TD>
<TD BGCOLOR="#ffff99" SDVAL="0" SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><FONT SIZE=3><B><INPUT id=task3total size=2 maxlength=4 DISABLED></B></FONT>
</P>
</TD>
</TR>
</TBODY>
Hi, I would just like to know how I would dynamically add another table once text fields in the existing table is clicked on. So pretty much what I have is a table with 5 textboxes lined up horizontally in the first row along with couple of buttons in the second row. What I want is that once one text box is clicked, another table like the one above is created and appears below that initial table. So this is the inital table that should be replicated on each click: Code: <table> <tr> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" ></td> </tr> <tr> <td><button /></td> <td><button /></td> </tr> </table> How would I go about achieving this? Thanks Hello, I want to add rows and columns on click. So, i have a table with columns and rows and I had a add and remove button. So I want the user to be able to add/remove more rows if they have multiple inputs/outputs. So what I want is when the user clicks on add.png, I want another row of Input and Description to appear underneath the current one. Here is my code.. Code: <img src="images/add.png" width="15" height="15" align="right" >
<div class="open">
<table width="200" border="0">
<tr>
<td class="propertyCol">Input: </th>
<td class="propertyCol"><input class="text ui-widget-content ui-corner-all" value="" style="width:210px"></input></th>
<td class="propertyCol">Description: </th>
<td class="propertyCol"><textarea name="" cols="45" rows="1" class="text ui-widget-content ui-corner-all"></textarea> </th>
<td class="propertyCol"><a href="javascript:removeElement();" ><img src="images/remove.png" alt="" width="15" height="15" /></a> </th>
</tr>
</table>
<table width="200" border="0">
<tr>
<td class="propertyCol">Output: </th>
<td class="propertyCol"><input class="text ui-widget-content ui-corner-all" style="width:200px"></input></th>
<td class="propertyCol">Description: </th>
<td class="propertyCol"><textarea name="" cols="45" rows="1" class="text ui-widget-content ui-corner-all"></textarea> </th>
<td class="propertyCol"><a href="javascript:removeElement();" ><img src="images/remove.png" alt="" width="15" height="15" /></a> </th>
</tr>
</table>
</div
Hi, I am using a javascript datepicker which works fine with simple textboxes: For example: I have a textBox startDate1 in the table below: <form method="post" name="upload" action=""> <table id="tableId"> <tr> <td> <input type="text" name="startDate1" value="" readonly="true" size="10"/> <script language="JavaScript"> new tcal ({'formname': 'upload','controlname': 'startDate1'}); </script> <td> </tr> <table> </form> --Now I want to add rows dynamically to this table for which I have <a href="javascript:addRowToTable();" >Add Row</a> and the corresponding javascript function: <script type = "text/javascript"> function addRowToTable() { var tbl = document.getElementById('tableId'); var lastRow = tbl.rows.length; var iteration = lastRow; var row = tbl.insertRow(lastRow); var box = row.insertCell(0); var element = document.createElement('input'); element.setAttribute('type', 'text'); element.setAttribute('name', 'startDate' + iteration); box.appendChild(element); } </script> --This code creates the text boxes properly, but I am not being able to add the datepicker to it. Please suggest me a way to add the datepicker to the textboxes in the dynamically generated rows. Thank You Regards Rusho Shaw 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...... 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>
Heyho. Well I'm rather new to JavaScripting, so don't be harsh on me . Well I'm trying to make a 'onMouseOver & onMouseOut' event, where you hold the cursor over a image, it will change to another. So, here is my code: Code: <A HREF="Home.html" onmouseover="document.but.src='HOME_OVER.PNG'" onmouseout="document.but.src='HOME_BASE.PNG'"> <IMG SRC="Home_BASE.PNG" NAME="but" BORDER="0" ALT="..."> </A> <br> <A HREF="http://city-driving.co.uk" onmouseover="document.but.src='FORUM_OVER.PNG'" onmouseout="document.but.src='FORUM_BASE.PNG'"> <br> <IMG SRC="FORUM_BASE.PNG" NAME="but2" BORDER="0" ALT="..."> </A> It works fine when I use it for 1 picture, but it really mess up when I use it more then 1 time :/. I don't understand why. Probably obvious for you! Looking forward to (hopefully) see a solution . Marius. this is my script Quote: <a href="javascript:void(0);" onmouseOver="hahaha()"> <img border="0" src="pink.gif" name="Mainpic" id="image"></a> and this is the function Quote: function hahaha() { document.getElementById('image').src="blue.gif"; } the problem is when i mouseover the image look like this why is that? help please! thanks http://www.primedesigning.com/ellis/ I'm working on a site for a friend and I can't figure out what's causing this blinking! Hover over one of the 3 pictures in the "Products" section to see what I'm talking about (the larger, expanded picture and its border blinks on and off). BTW, this site is still under construction. Any design ideas you guys may have would be appreciated too Thanks for any help! hi i have a problem coding a menu i have 4 links on menu and clicking on items should expand a DIV and change the menu item image. also rollover has to change the image too i mean 3 conditions for every menu item: normal, rollover, clicked. i have no problem with rollover but when item is been clicked and image changes, image has to change on mouse over again, but has not to change to original image on mouse out. also clicking on another menu item has to change the previous item image to original. i'm confused enough i tried by samples over and over. but the main problem is that i dont know js syntaxes and coding however, anybody could help??? So i've written abit of code myself in order to do this: I will have multiple video tags on my website, each of the video tag's will have to be able to play/pause seperatly, so technically speaking only 1 video should be playing at a time, when the user 'onmouseout' it should pause and when the user's gos to another video that other video should start playing. If he move's the cursor out of the video it should stop... The problem is now, i have video A & B. When i go 'onmouseover' video B, video A starts playing. This is how i started coding: 1 . 2 functions for playing/pausing a video tag 2 . Check how many <video> tags are on the page (after load) 3 . Add Event "mouseout" + function to each <video> tag And the actual code: Javascript: Code: /*** FUNCTIONS OM DE MOUSEOVER & OUT TE DOEN WERKEN ***/
function speelFilmpje(){
document.getElementById("filmpke").play();
}
function stopFilmpje(){
document.getElementById("filmpke").pause();
}
window.onload = function(){
/*** FUNCTION DIE ONMOUSEOVER & OUT FUNCTIE AAN 'VIDEO' TAGS TOEVOEGT ***/
var video = document.getElementsByTagName('video');
var videotags = video.length;
//console.log(videotags);
for(i=0; i<videotags;i++){
video[i].addEventListener("mouseover", speelFilmpje,false);
video[i].addEventListener("mouseout", stopFilmpje,false);
}//einde van de functie
}
HTML: Code: <div id="right_column">
<div id="preview1">
<video width="197" height="81" id="filmpke">
<source src="unknown.ogg" type="video/ogg">
<source src="unknown.mp4" type="video/mp4">
</video>
<a href="#">Unknown (2010)</a>
</div>
<div id="preview1">
<video width="197" height="81" id="filmpke">
<source src="unknown.ogg" type="video/ogg">
<source src="unknown.mp4" type="video/mp4">
</video>
<a href="#">Unknown (2010)</a>
</div>
</div>
Any thoughts or information is welcome. I've stumbled upon my own wall of "Lack of knowledge" -_- Hey everyone, I'm trying to make a sound by using the mouseover event on JS. The script works fine on my husband's computer (IE8, windows xp), but does not work on mine (IE8, Vista). Click on the link below to give you an idea. Just mouseover the images and you should hear an elephant and duck sound. Mouseover the word "elephant" and it "should" make an elephant sound. http://www.mypreciousarrival.com/Ani...oundtest4.html I just need to find a script that will work with different operating systems (or at least windows xp and vista) and browsers (or at least IE) Any suggestions are greatly appreciated. I would like to not resort to any macromedia or schockwave scripting. Thank you! 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, 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>
hi, please ignore this thread..it is a duplicate of one already active. MODS please delete. apologies for my mistake. |
|||||||