|
JavaScript - Multiple Actions For A Rollover
Hello:
I am a newbie to learning Javascript. I have some problems with a file. The goal of the file is that when it loads in a browser, the 1st image is displayed in the top left (image 7441805.gif), along with the following three titles to the right of the image, as listed below: Java Demystified OOP Demystified Data Structures Demystified When you place the mouse over "Java Demystified," the 7441805.gif image should still appear (which it does)), and a new window should pop-up and stay on the screen displaying "10% Discount for Java Demystified" until the user decides to do away with the new window by clicking on the "X". The new window does appear for about less than a second , and then goes away (actually it continuously flashes on and off very quickly), which is not what I want. When you place the mouse over "OOP Demystified," the 0072253630.jpg image should appear (which it does), and a new window should pop-up and stay on the screen displaying "20% Discount for OOP Demystified" until the user decides to do away with the new window by clicking on the "X". The new window does appear for about less than a second , and then goes away (actually it continuously flashes on and off very quickly), which is not what I want. When you place the mouse over "Data Structures Demystified," the 7417436.gif image should appear (which it does), and a new window should pop-up and stay on the screen displaying "15% Discount for Data Structures Demystified" until the user decides to do away with the new window by clicking on the "X". The new window does appear for about less than a second , and then goes away (actually it continuously flashes on and off very quickly), which is not what I want. All of the files are loaded on my laptop, which is using Vista, is 32bit, has the IE9 browser installed, and pop-ups are disabled. When I try to use Mozilla (version 6.0), I am unable to disable the pop-ups, and therefore can not even get any new windows to open. I would appreciate your help. The html file is below: [CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Open Window</title> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="en-us" /> <meta name="description" content="XYZ" /> <meta name="keywords" content="XYZ" /> <!-- the absolute pathname of this file is: --> <!-- C:\MISCSUP2_10_17_8\MISCSUP2\Javascript_Demystified_Download_Working\ --> <!-- Ch_12_Page241.html --> <!-- this file was created on Wednesday, 8/24/11: --> <!-- this file was updated on Wednesday, 8/24/11: --> <script language="Javascript" type="text/javascript"> <!-- function OpenNewWindow(book) { if (book== 1) { document.cover.src='7441805.gif' MyWindow = window.open('', 'myAdWin', 'titlebar="0" status="0", toolbar="0", location="0", menubar="0", directories="0", resizable="0", height="50", width="150",left="500",top="400"') MyWindow.document.write('10% Discount for Java Demystified!') } if (book== 2) { document.cover.src='0072253630.jpg' MyWindow = window.open('', 'myAdWin', 'titlebar="0" status="0", toolbar="0", location="0", menubar="0", directories="0", resizable="0", height="50", width="150",left="500",top="500"') MyWindow.document.write('20% Discount for OOP Demystified!') } if (book== 3) { document.cover.src='7417436.gif' MyWindow = window.open('', 'myAdWin', 'titlebar="0" status="0", toolbar="0", location="0", menubar="0", directories="0", resizable="0", height="50", width="150",left="500",top="600"') MyWindow.document.write("15% Discount for Data Structures Demystified!") } } --> </script> </head> <body> <table width="100%" border="0"> <tbody> <tr valign="top"> <td width="50"> <a> <img height="92" src="7441805.gif" width="70" border="0" name="cover"> </a> </td> <td> <img height="1" src="" width="10"> </td> <td> <a onmouseover="OpenNewWindow(1)" onmouseout="MyWindow.close()"> <b><u>Java Demystified </u></b> </a> <br> <a onmouseover="OpenNewWindow(2)" onmouseout="MyWindow.close()"> <b><u>OOP Demystified</u></b> </a> <br> <a onmouseover="OpenNewWindow(3)" onmouseout="MyWindow.close()"> <b><u>Data Structures Demystified</u></b> </a> </td> </tr> </tbody> </table> </body> </html>[ICODE] Similar TutorialsI am very new to javascript and cannot find any info anywhere regarding the following problem: On my website I have around 100 pages containing an action form. Occasionally it is necessary to cancel the action throughout the 100 pages which is very time-consuming. Then the action has to be reinstated once again for all the 100+ pages. I thought the solution would be to use javascript to change the action from a .js file which would mean only one page, the .js file, would require alteration: The action that appears on all 100+ pages several times that I am trying to change or stop happening by overwriting the "form action": <form action="http://www.changenamecart.com/" method="post"> <input type="hidden" name="userid" value="1234567"> <input type="hidden" name="return" value="http://www.thehomepage.co.uk/index.htm"> <input type="image" src="http://www.changenamecart.com/images/pic.gif"> </form> My efforts to date a The change .js file: function change() { var myChange = form action; if(myChange == form action){ document.write("form xction"); } } The html file in the header: <script src="change.js" type="text/javascript"></script> I am afraid that my knowledge of programming is very small and I would welcome any help to solve this problem. Hello, I am using this code Code: <form style="display: none;" name="num1form" id="num1form" action=""> <input type="image" name="1" id="num1" value="1" src="imgl/img_first_01.png" onclick="document.forms[0].action='javascript:ChangeNum1();'"/> </form> What the above code does is change the action state, it allows me to have multiple image inputs which is great as I can define various inputs with different IDs. However, this is used for one section of the page I happen to have another <form> with basically the same code but it's using num2 values, I'm not sure why but I can only using one of these Code: onclick="document.forms[0].action='javascript:ChangeNum1();'" at a time, for one form only. Is there anyone able to help me divide this, or make these onClick actions unique so they can be used in more than 1 form? Thanks, Keenan Hi Guys, I'm creating what is hoped to be a fun and slightly different page for Christmas. I am looking to have about 6 'dangling' objects, each that bounce on rollover (currently working) and that play a different note/tune. At the moment you will see in the code that I am using HTML5 to do this - whilst I am ok with this (I will create a flash fall back) I am unable to work out how to play a different sound for each rollover. Of course if there is a more cross browser friendly solution I'm all ears... Any help much appreciated! Please see below code... Quote: <!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script> // Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com) // Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code //** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc) //** Call: uniquevar.playclip() to play sound var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list: "mp3": "audio/mpeg", "mp4": "audio/mp4", "ogg": "audio/ogg", "wav": "audio/wav" } function createsoundbite(sound){ var html5audio=document.createElement('audio') if (html5audio.canPlayType){ //check support for HTML5 audio for (var i=0; i<arguments.length; i++){ var sourceel=document.createElement('source') sourceel.setAttribute('src', arguments[i]) if (arguments[i].match(/\.(\w+)$/i)) sourceel.setAttribute('type', html5_audiotypes[RegExp.$1]) html5audio.appendChild(sourceel) } html5audio.load() html5audio.playclip=function(){ html5audio.pause() html5audio.currentTime=0 html5audio.play() } return html5audio } else{ return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}} } } //Initialize two sound clips with 1 fallback file each: var mouseoversound=createsoundbite("whistle.ogg", "whistle.mp3") </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <style type="text/css"> body { background-color: #FFF; } div { padding:0px; width:116px; height:211px; text-align:center; float:left; display:block; } </style> </head> <body> <div id="bouncy1"> <a href="#" onmouseover="mouseoversound.playclip()"><img src="creation_logo.gif" width="116" height="211" border="0" /></a></div> <div id="bouncy2"> <a href="#" onmouseover="mouseoversound.playclip()"><img src="creation_logo.gif" width="116" height="211" border="0" /></a></div> <SCRIPT> $(function(){ //Add bounce effect on Click of the DIV $('#bouncy1').mouseenter(function () { $(this).effect("bounce", { times:3 }, 500); }); $('#bouncy2').mouseenter(function () { $(this).effect("bounce", { times:3 }, 300); }); }); </SCRIPT> </body> </html> Hey guys, Lookin' for a little help, not sure if it can even be done? hopefully someone has the answer. I'm trying to design myself an online portfolio; here's what I got so far... http://www.gregorymstevens.com/testsite/site.html As you can see my navigation is represented by each bird on the tree (every bird is a link), when you rollver one of the green birds they turn white, however, I am looking to not only have the green bird rollver to white but ALSO have the "choose a" image on the bottom right change to the corresponding page. For instance, when the mouse rolls over a bird-- this image: will turn into this image: while maintaining the original "white bird" rollover. Hopefully I'm explaining this correctly -- Any help greatly appreciated! Hi all, Trying to something i guess is pretty basic but i cant seem to get it working. I have a page with an iframe name="grid" and on that page i am also running a mootools script which toggles a pannel. The javascript for the pannel is: Code: <script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('top-panel');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
so this link opens the pannel Code: <a href="#" id="toggle">Show Panel</a> However, i want to make a it so that one link can both call a page in the iframe AND toggle the pannel. I tried: Code: <a href="page_to_call.htm" target="grid" id="toggle">Show panel and call page in iframe</a> but no joy. I want more than one link to be able to do this (calling different pages to the iframe and each one toggling the pannel) Can anyone help? Thanks loads in advance for any reply. Hi there! I've been searching for threads to solve my problem but I don't have the knowledge necessary to figure it out (you know, graphic designers....) so your help will be very appreciated!!! Here's the problem : I have a div named "cat" that I want to hide with a Javascript:animatedcollapse (slideup) action. The action is linked externally on another page. This is the line/link that hides it : <a href="javascript:animatedcollapse.hide('cat')">Hide the div<br/> It works fine. But, I want this action to happen at the same time that you press another link (that other link opens a page in an iframe). This is the iframe link : <p><a href="page.html" target="iframe">Open link in iframe</a></p> Both links work fine. But i want to merge the two together. How? Thanks in advance! Hey All, I have the following function - where I can get one of the conditions to work, but not both together. Here's the code: Code: function test_function() {
$('#form_field_name').focus();
window.location = window.location + "#form_field_name";
}
Basically when clicking an error link, I want to focus onto the form field, and then move to the anchor itself on the page. One of these will work at a time, but not both and I'm not sure why. Any suggestions would be appreciated. Thanks. I have a javascript code to let people subscribe to our newsletter. I would like to get a mail each time a person get subscribed to our newsletter. The code to let people subscribed to our newsletter is: [I] <!-- newsletter subscribe below here --> <script language="Javascript" type="text/javascript"> var fieldstocheck = new Array(); fieldnames = new Array(); function checkform() { for (i=0;i<fieldstocheck.length;i++) { if (eval("document.subscribeform.elements['"+fieldstocheck[i]+"'].value") == "") { alert("Please enter your "+fieldnames[i]); eval("document.subscribeform.elements['"+fieldstocheck+"'].focus()"); return false; } } return true; } function addFieldToCheck(value,name) { fieldstocheck[fieldstocheck.length] = value; fieldnames[fieldnames.length] = name; } </script> <form action="http://www.investinginmongolia.com/phplist/?p=subscribe&id=2" method="post" name="subscribeform"> <p class="linkleft12">Our Newsletter:</p> <p class="linkleft12">Email: <input name="email" style="width: 105px" type="text" value="" /> <script language="Javascript" type="text/javascript">addFieldToCheck("email","Email Address");</script> <input name="list[2]" type="hidden" value="signup" /></p> <p class="linkleft12"> <input name="subscribe" onclick="return checkform();" type="submit" value="Subscribe" /></p> </form> <!-- newsletter subscribe ends here --> I also would like that an e-mail is send automatically to info@yurt-ger-yourte.com through http://www.yurt-ger-yourte.com/cgi-sys/FormMail.cgi Thanks for your help. Bernard Here's my object constuctor: Code: function suggest_object(result_id)
{
this.in_result_div = false;
this.search_element = document.getElementById(result_id);
}
And the execution code: Code: var suggest = new suggest_object(result_id);
document.getElementById(result_id).onmouseover = function(){suggest.in_result_div = true;}
It works as is, but i'd really like to be able to set the onmouseover inside of the object. Something like Code: function suggest_object(result_id)
{
this.in_result_div = false;
this.search_element = document.getElementById(result_id);
this.input_element.onmouseover = function()
{
this.in_result_div = true;
}
}
So how can I get the 'this' inside the onmouseover function to refer to the object? Hi, I hope someone can help me. I'll be honest and say I don't know much about javascript, but am fairly comfortable in html. I am building a website that will have multiple image swaps on multiple pages. I am building this in wordpress, and I'm guessing that means my approach will be different than if I wasn't using wordpress. Here's how one page would work: There are 10 images shown. 1,2,3,4,5,6,7,8,9,10. When number 1 is clicked on, I want a new image - 1a. When 2 is clicked on, 2a. So there are 20 different images in all on a given page. Also, I want the user to be able to click on the image again to restore the original image. I would prefer onclick to onmouseover. There will be literally dozens of pages like this on the site, managed by wordpress, so hundreds of images to swap. Basically the first image is a question - the second image is the answer. Is this possible? Okay so I am fairly new to Javascript and am having some difficulties getting this rollover to work. I've gotten this rollover code to work in multiple other pages and for some reason it just wont work for this page. The code is below, basically I have three buttons on the page that need to have a rollover effect to display an alternate image for each button, I started small to try and get just the first one to work and have not had any luck. Tried three different browsers, nothing. Any advice will be greatly appreciated. Code:
<html>
<head>
<title>Ski Montana</title>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
if (document.images) {
photosUp = new Image
photosDown = new Image
photosUp.src = 'photosup.gif'
photosDown.src = 'photosdown.gif'
}
var images = new Array(3);
images[0] = new Image();
images[1] = new Image();
images[2] = new Image();
images[0].src ="bannerad1.jpg"
images[1].src ="bannerad2.jpg"
images[2].src ="bannerad3.jpg"
var outElm;
var currentImageIndex = 0;
var maxImageIndex = images.length-1;
function cycle(){
if (outElm) {
outElm.src = images[currentImageIndex].src;
++currentImageIndex;
if (currentImageIndex > maxImageIndex) {
currentImageIndex = 0;
}
}
}
function initImageCycler(elmID){
outElm = document.getElementById(elmID);
if (outElm) {
setInterval("cycle()", 2000);
}
}
//-->
</SCRIPT>
</head>
<body bgcolor="#FFFFFF" onload="initImageCycler('adBanner');">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="15" height="6" valign="top"></td>
<td width="103" height="6" valign="top"></td>
<td width="10" height="6" valign="top"></td>
<td width="9" height="6" valign="top"></td>
<td width="176" height="6" valign="top"></td>
<td width="1" height="6" valign="top"></td>
<td width="96" height="6" valign="top"></td>
<td width="1" height="6" valign="top"></td>
<td width="209" height="6" valign="top"></td>
<td width="11" height="6" valign="top"></td>
<td width="6" height="6" valign="top"></td>
<td width="133" height="6" valign="top"></td>
</tr>
<tr>
<td width="15" height="89" valign="top"></td>
<td width="103" height="89" valign="top"></td>
<td width="10" height="89" valign="top"></td>
<td width="503" height="89" colspan="7" valign="top"><img src="bannerad1.jpg" width="503" height="68" id="adBanner" alt="Ad Banners" /></td>
<td width="6" height="89" valign="top"></td>
<td width="133" height="89" valign="top"></td>
</tr>
<tr>
<td width="15" height="108" valign="top"></td>
<td width="103" height="108" valign="top"></td>
<td width="10" height="108" valign="top"></td>
<td width="9" height="108" valign="top"></td>
<td width="483" height="222" colspan="5" rowspan="3" valign="top">
<h1 align="center"><b><font size="+7">Welcome to Montana</font></b></h1>
<h2 align="center"><font size="+7"><b><font size="+3">Home of the Wild West
and some of the Best Ski Slopes in the World</font></b></font></h2>
</td>
<td width="11" height="108" valign="top"></td>
<td width="6" height="108" valign="top"></td>
<td width="133" height="108" valign="top"></td>
</tr>
<tr>
<td width="15" height="2" valign="top"></td>
<td width="103" height="2" valign="top"></td>
<td width="10" height="2" valign="top"></td>
<td width="9" height="2" valign="top"></td>
<td width="11" height="2" valign="top"></td>
<td width="6" height="2" valign="top"></td>
<td width="133" height="114" rowspan="2" valign="top"><img src="skiban2.jpg" width="130" height="99"></td>
</tr>
<tr>
<td width="15" height="112" valign="top"></td>
<td width="103" height="158" rowspan="2" valign="top"><img src="montana1.gif" width="103" height="115"></td>
<td width="10" height="112" valign="top"></td>
<td width="9" height="112" valign="top"></td>
<td width="11" height="112" valign="top"></td>
<td width="6" height="112" valign="top"></td>
</tr>
<tr>
<td width="15" height="46" valign="top"></td>
<td width="10" height="46" valign="top"></td>
<td width="9" height="46" valign="top"></td>
<td width="176" height="46" valign="top"></td>
<td width="97" height="46" colspan="2" valign="top"><a href="photos.htm" onMouseover="document.rollover.src=photosDown.src" onMouseout="document.rollover.src=photosUp.src"><img name="rollover" src="photosup.gif" border=0></a></td>
<td width="1" height="46" valign="top"></td>
<td width="209" height="46" valign="top"></td>
<td width="11" height="46" valign="top"></td>
<td width="6" height="46" valign="top"></td>
<td width="133" height="46" valign="top"></td>
</tr>
<tr>
<td width="15" height="44" valign="top"></td>
<td width="103" height="44" valign="top"></td>
<td width="10" height="44" valign="top"></td>
<td width="9" height="44" valign="top"></td>
<td width="176" height="44" valign="top"></td>
<td width="1" height="44" valign="top"></td>
<td width="97" height="44" colspan="2" valign="top"><a href="resorts.htm" onMouseover="document.rollover.src=resortsdown.src" onmouseout="document.rollover.src=resortsup.src"><img src="resortsup.gif" width="97" height="30" border="0" name="rollover"></a></td>
<td width="209" height="44" valign="top"></td>
<td width="11" height="44" valign="top"></td>
<td width="6" height="44" valign="top"></td>
<td width="133" height="44" valign="top"></td>
</tr>
<tr>
<td width="15" height="49" valign="top"></td>
<td width="103" height="49" valign="top"></td>
<td width="10" height="49" valign="top"></td>
<td width="9" height="49" valign="top"></td>
<td width="176" height="49" valign="top"></td>
<td width="97" height="49" colspan="2" valign="top"><a href="contactus.htm" onmouseover="document.rollover.src=contactusdown.src" onmouseout="document.rollover.src=contactusup.src"><img src="contactusup.gif" width="97" height="30" border="0" name="rollover"></a></td>
<td width="1" height="49" valign="top"></td>
<td width="209" height="49" valign="top"></td>
<td width="11" height="49" valign="top"></td>
<td width="6" height="49" valign="top"></td>
<td width="133" height="49" valign="top"></td>
</tr>
<tr>
<td width="15" height="1" valign="top"><img width="15" height="1" src="transparent.gif"></td>
<td width="103" height="1" valign="top"><img width="103" height="1" src="transparent.gif"></td>
<td width="10" height="1" valign="top"><img width="10" height="1" src="transparent.gif"></td>
<td width="9" height="1" valign="top"><img width="9" height="1" src="transparent.gif"></td>
<td width="176" height="1" valign="top"><img width="176" height="1" src="transparent.gif"></td>
<td width="1" height="1" valign="top"><img width="1" height="1" src="transparent.gif"></td>
<td width="96" height="1" valign="top"><img width="96" height="1" src="transparent.gif"></td>
<td width="1" height="1" valign="top"><img width="1" height="1" src="transparent.gif"></td>
<td width="209" height="1" valign="top"><img width="209" height="1" src="transparent.gif"></td>
<td width="11" height="1" valign="top"><img width="11" height="1" src="transparent.gif"></td>
<td width="6" height="1" valign="top"><img width="6" height="1" src="transparent.gif"></td>
<td width="133" height="1" valign="top"><img width="133" height="1" src="transparent.gif"></td>
</tr>
</table>
</body>
</html>
I have a div in my HTML that that when rolled over reveals an image. I can't figure out how to place a random image from a set of 5 images to appear in the background of that div when it is rolled over again. Please help me! I'm having trouble with a 3-state rollover with rollClick staying active for a series of buttons. Each button reveals it's own content within the same page. Here's a working example of what I have. The roll in and out works fine at first, but after the second click the images start getting jumbled together. Something to do with the lastClick code at the bottom I think. HTML-side my button images get class="rollover" and a unique id. Code: window.onload = rolloverInit;
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
function rolloverInit(){
var rollOvers = document.getElementsByClassName("rollover");
for(var i=0; i<rollOvers.length; i++){
setupRollover(rollOvers[i]);
}
}
function setupRollover(thisImage){
//UP
thisImage.outImage = new Image();
thisImage.outImage.src = "images/" + thisImage.id + "1.gif";
thisImage.onerror = thisImage;
thisImage.onmouseout = rollOut;
//OVER
thisImage.clickImage = new Image();
thisImage.clickImage.src = "images/" + thisImage.id + "2.gif";
thisImage.onerror = rollOut;
thisImage.onmousedown = rollClick;
//DOWN
thisImage.overImage = new Image();
thisImage.overImage.src = "images/" + thisImage.id+"2.gif";
thisImage.onerror = rollOut;
thisImage.onmouseover = rollOver;
thisImage.onmouseup = rollOver;
}
function rollOver() {
this.src = this.overImage.src;
}
function rollOut() {
this.src = this.outImage.src;
}
function rollClick() {
if(lastClick){
lastClick.onmouseout = rollOut;
lastClick.src = this.outImage.src;
}
this.src = this.clickImage.src;
this.onmouseout = rollClick;
lastClick = this;
}
var lastClick = null;
What I'd also like, since these buttons act as tabs, is for the first button to already be in the rollClick active state on page load (since that button's content is already displayed by default). Is this possible? Thanks for any help you can provide! I have a small .png on my site. I want to view at 250% when I rollover it. Is there a way to have the 250% .png be centered vertically and horizontally where the 100% without making the 100% .png 250% bigger (ex. extra white space). Any recommendations for other ways? Hello, my first post here; and i am new to javascript i actually am just starting to learn the concept of javascript; and I am wondering.... if certain aspects of a website are made by using javascript such as the part on facebook "My Account"; where on click it opens a "window" with options. OR, on amazon where the menu items pop out on rollover;; can someone please tell me if they are acomplishing that by using javascript? thank you and i appreciate who ever is reading this. I'm having an issue with the main logo in the navigation bar, each time I hover over it, it searches for the rollover image. I only want this javascript function to be activated over the div "navigation_menu" here's the html code for the logo <div id="nav"> <a href="index.php"> <img src="images/logo_05.jpg" alt="Home Page"/></a> </div><!-- nav --> here's the javascript code that's causing the problems window.onload = rolloverInit; function rolloverInit() { var nav = document.getElementById("navigation_menu"); for (var i=0; i<nav.images.length; i++) { if (nav.images[i].parentNode.tagName == "A") { setupRollover(nav.images[i]); } } } any help would be very appreciated Currently i have rollover images when click on active a hide show div tag with the css property. the problem is that i want to keep the buttons on active state till someone clicks on another button then the button returns to a down state and the new button that was click on stay up. Code: <script language="JavaScript">
//here you place the ids of every element you want.
var ids=new Array('a1','a2','a3','a4', 'a5','a6');
function switchid(id){
hideallids();
showdiv(id);
}
function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}
function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}
}
function showdiv(id) {
//safe function to show an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
please help Hey guys, I'm having a complete nightmare with this... If you see http://bit.ly/i5TwmL you can see what I am working on. In the services section with the 8 images you can see how I am TRYING to make the site work. The idea is that when scrolling over an image the related text will appear in the right column. This is to happen for each image with different text for each. The problem (as I'm sure is quite clear from using the site) is that there is a lot of jumping. When an image is not selected the images should stay in 2 columns with text to the right. "Scroll over the images for a brief description of the services we provide." I doubt I'm describing this well but this is all new to me... I have used javascript to control these rollovers. Quote: <script type="text/javascript"> //<![CDATA[ function toolTip(txt,top,left) { var el=document.getElementById('foo'); var text=new Array(); text[1]="<h2>Diamond Core Drilling</h2><p>For vertical or horizontal drilling where a precise circular opening is required. This method is used to create openings for mechanical, electrical, heating and ventilation installations and is also ideal for creating holes for routing cables, placing anchor bolts, installing load carrying devices or for concrete sample analysis. The circumference of a diamond drilled opening can be from 10mm to 1 metre or more. Drilling depths are virtually unlimited using barrel extensions. Stitch drilling is a technique which involves drilling a series of 107mm diameter holes to form openings of any size.</p>"; text[2]="<p>Scroll over the images for a brief description of the services we provide.<br><br /></p><h2>WALL SAWING</h2><p>By making a series of passes along the length being cut, wall saws are used to cut through walls for door or window openings. These can also be used to form openings on floors for stairways, lifts, etc. and can be used inverted. Cutting depths are up to 700mm</p><h2>FLOOR SAWING</h2><p>The floor saw is a very rapid cutting machine and is ideal for ground floors, warehouses, roads and runways. It enables efficient repairs, alterations and groundworks to be carried out. Cutting depths can reach 400mm and the machine can be powered by diesel, petrol, three phase electricity or gas.</p><br /><h2>CHAIN SAWING</h2><p>A concrete chain saw allows for deep plunge-cutting and corners with no over-cuts. This is useful for windows, door openings and small mechanical openings. There a various applications associated with chain sawing and it can be utilised for a variety of materials including brick, stone and reinforced concrete.</p><br /><br /><h2>WIRE SAWING</h2><p>Similar to the method of wall sawing although in place of a blade are a series of pulley wheels which guide the diamond wire 6mm in diameter. This method is ideal for removing large concrete or masonry sections with virtually no noise or vibration to the structure.</p>"; text[3]="<h2>Chasing</h2><p>Neat parallel channels are cut for housing of electrical cables within a wall or floor. All our chasing plant comes supplied with dust extraction as standard.</p>"; text[4]="<h2>Controlled Demolition</h2><p>Removal of structures or individual walls and removal of waste from site as required.<br><br><h2>Robotic Demolition</h2><p>A fast, safe and efficient method of controlled demolition using three phase driven machines remotely controlled by an operator eliminating any HAVS issues associated with traditional methods of demolition.<br><br><h2>Concrete Bursting</p></h2><p>A system in which a series of holes are drilled and bursting heads inserted which use hydraulic pressure to split the concrete. This method is used to remove large areas of concrete quietly and where there is limited space to work.</p>"; text[5]="<h2>Concrete Busting</h2><p>A system in which a series of holes are drilled and bursting heads inserted which use hydraulic pressure to split the concrete. This method is used to remove large areas of concrete quietly and where there is limited space to work.</p>"; text[6]="<h2>Concrete Crunching</h2><p>Used for walls, concrete slabs or masonry crunching is a fast, controlled method of demolition and relatively dust, vibration and noise free.</p>"; text[7]="<h2>Anchor Installation & Pull Testing</h2><p>The drilling and installation of mechanical or resin anchors and the subsequent pull off testing in a wide range of applications such as starter bars, holding down bolts, crane bases, hand rails and a myriad of other applications.</p>"; text[8]="<h2>Lintel Installation & Steel Erection</h2><p>The installation of steel or concrete lintels over any size of new door or window opening after we have diamond drilled (temporarily securing the structure above) then diamond cut to form the openings.<br><br>Steel erection is a practice which involves the cutting and removal of large sections of reinforced concrete walls or floors. Acudrill can fabricate, supply and install the steelwork to the requirements of the structural engineer.</p>"; el.innerHTML=text[txt]; el.style.top=top+"px"; el.style.left=left+"px"; el.style.display="block"; document.onmouseout=function() { el.style.display="none"; } } //]]> function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } </script> <div id="foo"> <p>Scroll over the images for a brief description of the services we provide.</p> </div> <div class="g292" onmouseover="toolTip(1)"> <div> <img src="images/drilling.png" border="0" id="Image55" /></a></li></ul> </div> <h2>DIAMOND core drilling</h2> </div> <div class="g292" onmouseover="toolTip(2)"> <img src="images/sawing.png" border="0" id="Image50" /></a> </li></ul> <h2>DIAMOND sawing</h2> </div> <div class="g292" onmouseover="toolTip(3)"> <img src="images/chasing.png" border="0" id="Image50" /></a> <h2>chasing</h2></div> <div class="g292" onmouseover="toolTip(4)"> <img src="images/demolition.png" border="0" id="Image50" /></a> <h2>controlled demolition</h2></div> <div class="g292" onmouseover="toolTip(5)"> <img src="images/busting.png" alt="" /> <h2>concrete busting</h2></div> <div class="g292"onmouseover="toolTip(6)"> <img src="images/crunching.png" border="0" id="Image57" /></a> <h2>concrete crunching</h2></div> <div class="g292" onmouseover="toolTip(7,50,185)"> <img src="images/anchor.png" alt="" /> <h2>anchor installation & pull testing</h2></div> <div class="g292" onmouseover="toolTip(8)"> <img src="images/lintel.png" border="0" id="Image57" /></a> <h2>lintel installation & Steel erection</h2></div> I am slightly worried about what will happen if the user has javascript disabled. Is there a way around this? I have tried using css to control this a completely scrap the javascript http://code.hyperspatial.com/all-cod...rollover-text/ but I cannot work out how to position the text in the div. Please help or advise. Many many thanks! Hi all I have this rollover script (original done by Old Pedant) which I have modified making it 5 sets of 2 images. Althogh it seems to work I have a feeling it's not the best way of doing it hahahaha It seems clumsy to me (and i'm no coder hahaaha) Could it be made more concise. (or just made correct) Would really appreciate any help or positive comments. Code: <script type="text/javascript">
function linkOver(link)
{
var image = link.getElementsByTagName("IMG")[0];
image.src = image.src.replace("Off_1.png","On_1.png");
image.src = image.src.replace("Off_2.png","On_2.png");
image.src = image.src.replace("Off_3.png","On_3.png");
image.src = image.src.replace("Off_4.png","On_4.png");
image.src = image.src.replace("Off_5.png","On_5.png");
}
function linkOut(link)
{
var image = link.getElementsByTagName("IMG")[0];
image.src = image.src.replace("On_1.png","Off_1.png");
image.src = image.src.replace("On_2.png","Off_2.png");
image.src = image.src.replace("On_3.png","Off_3.png");
image.src = image.src.replace("On_4.png","Off_4.png");
image.src = image.src.replace("On_5.png","Off_5.png");
}
</script>
</head>
I have 5 of these: Code: <body>
<div id="megaanchor" onmouseover="linkOver(this), callSecondFunction('soldier',50,40,200);" onmouseout="linkOut(this);" ><img src="images/image_Off.png" alt="" border="0" />
</body>
|
|||||||