|
JavaScript - Is There A Certain Order When Using Onmouseover And Onclick?
Hello all,
I am just starting out trying to learn javascript and I am looking for a good forum to help me get through all the roadblocks I'm sure to hit. This looks like a very active place so hopefully I'll find some good help! Right now I'm going through a tutorial series at webmonkey. Here is the lesson I am currently working on: http://www.webmonkey.com/2010/02/JavaScript_Tutorial_-_Lesson_3/#Getting_Framed At the bottom of the page they give you a homework assignment which is to re-create this page using html and javascript. This page has 2 row frames. I re-created these frames and the top frame initially has a page called "navigation" loaded and the bottom page initially has a page called "explorer" loaded. If you click the monkey image at the right in the "navigation" frame, it opens a new page called "brand" in the bottom frame. This "brand" page has the same monkey image as the "navigation" page but unlike the other monkey image, this one changes when you mouseover it. If you mouseover it again, it changes to another image, and a third mouseover brings you back to the original monkey image. If you click on one of the images, it swaps the monkey image in the "navigation" frame with that image. The idea is that you have 3 images to chose from in the "brand" page that you can designate as the logo in the "navigation" page. I have no problem re-creating this effect. Here is the code I used to re-create this: I initialized these variables in the <head> of my page: Code: <script language="JavaScript"> var temp = ""; var img1 = 'http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/monkey.gif'; var img2 = 'http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/thau.gif'; var img3 = 'http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/sky.gif'; </script> Then I wrote this in the body of my page: Code: <a onclick="parent.navigation.document.logo.src=img1;" onmouseover=" temp=img1; img1=img2; img2=img3; img3=temp; document.the_image.src=img1;" href="#"> <img src="http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/monkey.gif" name="the_image"></a> Out of curiosity, I switched the order of onmoseover and onclick so that onmouseover came first like this: Code: <a onmouseover=" temp=img1; img1=img2; img2=img3; img3=temp; document.the_image.src=img1;" onclick="parent.navigation.document.logo.src=img1;" href="#"> <img src="http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/monkey.gif" name="the_image"></a> The page still worked in Firefox, but when I viewed the source (using firebug), onclick was still first and then onmouseover. I deleted my history and refreshed the page and still onclick was coming up first when I viewed the source. Does Firefox have an auto-correct feature that is forcing onclick to be first? Is there an order when using event handlers? Does onclick always have to come before onmouseover? Also, this code worked in Firefox and Safari, but it did not work in Chrome. Both with onclick and onmouseover first, I was able to mouseover and rotate through the images in Chrome, but whenever I clicked on an image the image was not swapped in the "navigation" page. Why? The "navigation" page also has a green button and a yellow button that change the background of the bottom frame to their respective color when clicked using the bgColor property. This effect also works in Firefox and Safari, but not in Chrome. Why? Do I have a setting in Chrome activated that is preventing this or does Chrome not recognize this code? I know this was long-winded but I'm a beginner so don't go too hard on me! Thanks in advance! Similar TutorialsHi, I use mostly PHP with my office's website as it usually requires some interaction with the server. However, i would like to do something that does not, and figured JS should be able to take care of it. I just can't get my head around it and would like to ask for some guidance...not the answer per say, just helping me get on the right path would be great! What i would like to do seems rather simple: I have a calendar. I would it to do one of two things: 1. Using onclick, when the user clicks on a date, i would like it to print something underneath the calendar. Similar to an error message that shows up on a login form if you type something wrong in a field using PHP (if(isset($whatever))). 2. Or using onMouseover, if the user hovers over a date that i have something special scheduled, i want a message to either pop up (alert()) or similar to #1, show up below the calendar. While fiddling with it this afternoon i figured i was close, but i am missing something... Code: <td><a href="#" onclick="document.getElementById("27").innerHTML='President's Day'; return false;">27</a></td>
But this seems to be pulling information from an element whose id = 27...which is not what i'd like.. Thanks in advance, Tsiqueira Hello, I have some database widgets. I want the user to be able to mouseover the widget and see a popup window of a synopsis of the database. If the user would like to access the database, I would like them to have the onClick option. <head> [CODE] <script> function openPopUp(URL) { new_window = window.open(URL, 'window', 'toolbar=0,scrollbars=0,location=0, statusbar=0,menubar=0,resizable=0,width=650,height=300,left = 350,top = 280'); } function closePopUp() { new_window.close(); } </script> [CODE] <Body> [CODE] <a href="#" onMouseOver="openPopUp('http://jpl.coj.net/res/db/popups/abc-clio.html')" onMouseOut="closePopUp(''http://jpl.coj.net/res/db/popups/abc-clio.html')"><img src="http://jpl.coj.net/pics/logos/abc-clio.jpg" alt="ABC-CLIO Databases" width="164" height="42" border="0"/></a> <URL of database> http://databases.abc-clio.com/Multi/ Can this be done? Thank you for your help, Elbee 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??? I'm currently working on a project and I am doing a bunch of image switching. I'm having a problem with the following... I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click. Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already. What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function. What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top. Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure. Is it possible disable an onclick after clicking it and then enable it from another onclick by id Code: <img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;"> This code runs when it is clicked: Code: $("#one").click(function() {
runEffectB();
return false;
});
What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run. I am assuming I will be able to re-enable it from another onclick running a similar function. This is jquery and jquery ui if that helps. Any ideas much appreciated. Hi Guys im new to javascript but i have got this code so far to work Code: <script type="text/javascript">
function do_something(e)
{
document.getElementById('imgholder') .style.background="transparent url('images/img2.jpg') no-repeat";
}
</script>
and it works with this Code: <div id="flash">
<div id="imgholder">
</div>
<div id="myController2">
<span class="jFlowControl2">No 1 </span>
<span class="jFlowControl2">No 2 </span>
</div>
<div id="mySlides2">
<div>
<a onmouseover="do_something(this)" class="vm" href="#" title="Vulnerability Management"></a>
<a class="grc" href="#" title="grc"></a>
<a class="pci" href="#" title="pci"></a>
<a class="gcs" href="#" title="gcs"></a>
<a class="pt" href="#" title="Penetration Testing"> </a>
<span class="jFlowNext2 NextFlash"> </span>
</div>
<div>
<span class="jFlowPrev2 BackFlash"> </span>
</div>
</div>
</div>
Currently the background changes on the 1st link hover. is it possible to have different images load on the hover of different a's? any help would be appricated I have been googling this for two days and am coming to the conclusion that the answer is no. Am I correct?
Alright I know about the problems IE has, but I'm testing out an id that is titled "slideRecord1" and trying to move it. The functions work with Firefox for the onmouseover and onmouseout attributes. But IE doesn't support that. So I'm trying to do it manually in the Javascript, but it's still not reading it. Any help? Code: /* <![CDATA[ */
document.getElementById('slideRecord1').onmouseover = function(){slideRecord(1);}
function slideRecord(disc)
{
var record = "disc"+disc;
var y = 20;
document.getElementById(record).style.top = y + 'px';
}
function unSlideRecord(disc)
{
record = "disc"+disc;
var y = 0;
document.getElementById(record).style.top = y + 'px';
}
/* ]]> */
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>
I have created a scroll script that, when you mouse over the page, the scrolling stops, and it resumes when you mouseout. For some reason, my script messes up slightly when you have <p>, <a>, <span>, and <div> tags inside the main div. On that page, even if you are moused over the page, it will still try to scroll a tiny bit. This is because it thinks you have moved your mouse out of the page. I have tried adding mouseover and mouseout events to these tags to remedy the problem, but that didn't work. Here's a link to an example with nothing but text, and it works fine: http://www.myfsjournal.com/scroll2.php Here's the same page, but with stuff inside of <p> and <a> tags. However, it doesn't work quite right. http://www.myfsjournal.com/scroll1.php You can view all the code on my page, but here's the relevant part: Code: var timerIsOn = 1;
window.onload = function()
{
startScroll();
var marqueeDiv = document.getElementById("marqueeDiv")
if(navigator.appName != "Microsoft Internet Explorer")
{
if(marqueeDiv != null)
{
marqueeDiv.addEventListener("mouseout",function () {resumeScroll();},false);
marqueeDiv.addEventListener("mouseover",function () {stopScroll();},false);
}
}
else
{
if(marqueeDiv != null)
{
marqueeDiv.attachEvent("onmouseout",function () {resumeScroll();},false);
marqueeDiv.attachEvent("onmouseover",function () {stopScroll();},false);
}
}
}
function startScroll()
{
if(timerIsOn == 1)
{
//if we have scrolled to the bottom
if(getScrollY() >= document.documentElement.scrollHeight - document.documentElement.clientHeight)
{
window.scroll(0,0);
}
window.scrollBy(0,1); // horizontal and vertical scroll increments
scrolldelay = setTimeout('startScroll()',50); // scrolls every 100 milliseconds
}
}
function stopScroll()
{
clearTimeout(scrolldelay);
timerIsOn = 0;
}
function resumeScroll()
{
timerIsOn = 1;
startScroll();
}
function getScrollY()
{
var scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' )
{
//Netscape compliant
scrOfY = window.pageYOffset;
}
else if( document.body && document.body.scrollTop )
{
//DOM compliant
scrOfY = document.body.scrollTop;
}
else if( document.documentElement && document.documentElement.scrollTop )
{
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
}
return scrOfY;
}
Hey i need some help with the mouseover commands i cant find the one that will allow me to mouse over a button and a menu with subcategories
Hey guys I am currently trying to set up a set of <li>'s to act as links just so: Code: <li onmouseover="location='http://www.google.com'">Text</li> Obviously this works fine, however what I need it to do is load in an iframe rather than reloading the browser. So the question is, what code do I need to get target data in to the js? Thanks! I have a dropdown list working, but I want the dropdown list to be initiated when the mouse goes over the first link in the list. Once it is visible, I want it to remain visible so long as the mouse is over any of the links. Right now I have it working for being visible only when the mouse is over the first link, but it does not remain visible moving the mouse over the first link, down the drop down menu. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> <html> <head> <style type="text/css"> div.ff { border:2px solid white; display:none; width:200px; background-color:red; margin-top:5px; } a { width: 200px; text-align:center; background-color:red; color:white; font-size:16px; display:block; } </style> <script type="text/javascript"> function ab(a) { document.getElementById(a).style.display="block"; document.getElementById(a).parentNode.onmouseover="ab(a)"; document.getElementById(a).parentNode.onmouseout="ab1(a)"; } function ab1(a) { document.getElementById(a).style.display="none"; } </script> </head> <body style="background-color:black;"> <div> <a href="kkjklj.com" onmouseover="ab('dg')" onmouseout="ab1('dg')">kjlj</a> <div id="dg" class="ff"> <a href="kjlj.com">lkjefee</a> <a href="ehfueh.com">fheufheuih</a> </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...... Ok, I'm new to these form and I need help with an assignment. Hopefully I'm within the rules here as I most certainly don't want to get stung for plagiarism or cheating. But, here is my issue. I'm struggling with javascript and I can't manage to get this rollover effect working. The HTML side of things should be ok and it's probably a missing semicolon. Code: /* write functions that define the action for each event */
function showTip () {
var sidTip;
/* obtain access to the HTML tool tip element using id "sidTip" and link it a varialbe named sidTip */
sidTip = document.getElementById("sidTip");
/* display the HTML tool tip element sidTip bying change the value of its CSS property "display" to "inline" */
sidTip.style.display("inline");
}
function hideTip () {
/* this function hides the tool tip */
var = sidTip;
/*first, get access to the tool tip HTML element */
sidTip = document.getElementById("sidTip")
/* then, hide the tool tip HTML element by changing its CSS property "display" to "none" */
sidTip.style.display("none");
}
function init () {
alert("javascript working");
/* the init function links functions to appropriate events of corresponding HTML elements */
/* create a variable named sid */
var = sid;
/* get access to the HTML element by its id "sid" and link it to sid */
sid = document.getElementById("sid");
/* link function showTip to the onmouseover event of sid */
onMouseOver = showTip;
/* link function hideTip to the onmouseout event of sid */
onMouseOut = hideTip;
}
/* link function init to the onload event of the window so that function init will be called when the page is loaded */
window.onload = init;
/* another random comment belonging to hebdomad */
Alright, I'm trying to get this website finished within the next 5 hours. I was designing it in such a way that I have some rollover buttons that take me to various parts of the site. Then, I have a gallery page, where I have a simple rollover galley. Adding the rollover gallery has stopped my buttons at the top from working. First, my .js file Code: function swap_image(name,source) {
document.images[name].src=source;
var argv=swap_image.arguments;
if(argv[2] && argv[3] && document.getElementById) {
element=document.getElementById(argv[2]);
element.innerHTML=argv[3];
}
}
if (document.images) {
image0 = new Image;
image1 = new Image;
image2 = new Image;
image0.src = '/images/male_fem.jpg';
image1.src = '/images/moon_wmn.jpg';
image2.src = '/images/mobydick.jpg';
} else {
image0 = '';
image1 = '';
image2 = '';
document.rollimg = '';
}
var cap = ['Picture One',
'Second Picture',
'Three'];
function rollover(n) {
document.rollimg.src = window['image'+n].src;
document.getElementById('caption').innerHTML = cap[n];
}
Now a portion of my html.. Code: <a onmouseover="swap_image('gallery','/images/galleryro.jpg')" onmouseout="swap_image('gallery','/images/galleryhl.jpg')">
<img style = "top:150px; left:160px;" border="0" id="gallery" src="/images/galleryhl.jpg"/> </a>
<a href="timeline.htm" onmouseover="swap_image('timeline','/images/timelinero.jpg')" onmouseout="swap_image('timeline','/images/timeline.jpg')">
<img style = "top:150px; left:175px;" border="0" id="timeline" src="/images/timeline.jpg"/> </a>
<a href="biography.htm"onmouseover="swap_image('biography','/images/biographyro.jpg')" onmouseout="swap_image('biography','/images/biography.jpg')">
<img style = "top:150px; left:190px;" border="0" id="biography" src="/images/biography.jpg"/> </a>
<a href="contact.htm" onmouseover="swap_image('contact','/images/contactro.jpg')" onmouseout="swap_image('contact','/images/contact.jpg')">
<img style = "top:150px; left:205px;" border="0" id="contact" src="/images/contact.jpg"/> </a>
<div class = "lrgimg">
<p align = "center">
<img style = "top:150px" src="images/male_fem.jpg" width="auto" height="auto" border="0" alt="large" name="rollimg" />
</p>
</div>
<div class = "imgbar">
<p align = "center"><span onmouseover="document.rollimg.src=image0.src;">
<img style = "top:250px" src="images/male_fem_sm.jpg" width="32" height="32" border="0"alt="malefem"/> </span>
<span onmouseover="document.rollimg.src=image1.src;">
<img style = "top:250px" src="images/moon_wmn_sm.jpg" width="32" height="32" border="0" alt="moonwmn"/></span>
<span onmouseover="document.rollimg.src=image2.src;">
<img style = "top:250px" src="images/mobydick_sm.jpg" width="32" height="32" border="0" alt="mobydick"/></span>
</p>
</div>
</div>
Any help to quickly resolve the conflict, would be greatly appreciated. I don't have a lot of time. Hi all, This is my first post, Self Learned new programmer here :o) Here's what I am having problem with: 1) OnMouseOver is working well on Chrome, but does not do anything on IE. What am I doing wrong? 2) I want to put sound on OnMouseOver. I tried using different examples, but no luck. Can you help me with the code? Here's the full code just in case: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">td img {display: block;}</style>
<!--Fireworks CS5 Dreamweaver CS5 target. Created Fri Nov 19 23:13:18 GMT-0500 (Eastern Standard Time) 2010-->
<script language="JavaScript">
<!-- Hide from old browsers
if (navigator.appVersion.indexOf("2.") != -1){
check = false;
}
if ((navigator.appVersion.indexOf("3.") != -1) && (navigator.appName.indexOf("Explorer") != -1)){
check = false;
}
else {
check = true;
}
image1= new Image();
image1.src = "img/index_r8_c4.gif";
image1on = new Image();
image1on.src = "img/index_r8_c4_RED.gif";
image2= new Image();
image2.src = "img/index_r4_c14.gif";
image2on = new Image();
image2on.src = "img/index_r4_c14_RED.gif";
function imageon(name) {
document[name].src = eval(name + "on.src");
}
function imageoff(name) {
document[name].src = eval(name + ".src");
}
function on(name) {
if (check == true){
imageon(name);
}
}
function off(name) {
if (check == true){
imageoff(name);
}
}
// -->
</script>
</head>
<body background="img/background.jpg">
<table border="0" cellpadding="0" cellspacing="0" width="1025" align="center">
<!-- fwtable fwsrc="main v1.png" fwpage="Page 1" fwbase="index.gif" fwstyle="Dreamweaver" fwdocid = "154491994" fwnested="0" -->
<tr>
<td><a href="OurPastWork.htm" onmouseover="on('image1');" onmouseout="off('image1')">
<img name="image1" src="img/index_r8_c4.gif" width="279" height="45" border="0" id="index_r8_c4" alt="" /></a></td>
<td><a href="OurExperience.htm" onmouseover="on('image2');" onmouseout="off('image2')">
<img name="image2" src="img/index_r4_c14.gif" width="186" height="50" border="0" id="index_r4_c14" alt="" /></a></td>
</tr>
</table>
</body>
</html>
Thanks in advance I am trying to alter Playa to use input type images instead of buttons. Part of this involves the need for a rollover image eg. a play button highlights when the cursor is over it. This is the code I have: Code: if (Playa.btnState == "Stop") {
document.getElementById("btnPlayStop").onmouseover = "this.src='images/stophover.gif'"
document.getElementById("btnPlayStop").onmouseout = "this.src='images/stop.gif'";
}
else {
document.getElementById("btnPlayStop").onmouseover = "this.src='images/playhover.gif'";
document.getElementById("btnPlayStop").onmouseout = "this.src='images/play.gif'";
}
<input type="image" src="images/stop.gif" onmouseover="this.src='images/stophover.gif'" onmouseout="this.src='images/stop.gif'" alt="Stop" id="btnPlayStop" onclick="Playa.doPlayStop();" />
Playa.btnState is the alt tag to say whether the state is stopped or started. I have the code working to alternate between "Play" and "Stop" images when the button is clicked, but the rollover doesn't happen. Any ideas? Thanks |
|||||||