|
JavaScript - Multiple Mouseover Effects For My Menu Bar
I need help with the script for multiple mouseOver Effects for my Menu Bar.
The script I have is: <script type="text/javascript"> function mouseOver() { document.getElementById("b1").src ="home1.jpg"; } function mouseOut() { document.getElementById("b1").src ="home.jpg"; } </script> <A HREF="Index.html" rel="nofollow" target="_blank"><img src="home.jpg" id="b1" width="167" height="60" onmouseover="mouseOver()" onmouseout="mouseOut()"/></A> However, that only does one mouseover effect. Can someone help me with this? Similar TutorialsHi Coders, I have been trying to achieve a multiple mouseover effect on some of my pictures within my web page. The first effect changes the picture within a table - works fine The second effect should change the text within another table. - does not work. I am receiving the error message: 'document.text' is null or not an object. Here is the code which lies on my image: Code: <td style="height: 101px; width: 20%" valign="top"> <img onMouseover="changeimage(myimages[1],this.href); newchange();" alt="loading" height="86" src="images/marsrover_sml.jpg" width="104" /></td> Here is the newchange() script: Code: <script language="JavaScript1.1">
function newchange()
{
document.text.innerHTML='<b>hello world</b>'
}
</script>
And I am sure that the table in which the text should appear has its Id and Name defined as "text" Here is it: Code: <td class="style5" Id="text" name="text" style="height: 29px; width: 525px" valign="top"> <strong class="style10">Endavour has launched</strong></td> But could not make it work error free. Thanks for any comments. Happy Turkey Day!! I am new to JavaScript and I downloaded a code for image mouse over effects. It works exactly how it's supposed to except when you first load the page, the images are not there. They do not appear and function until you actually roll the mouse over them. Here is the script and the link... any help would be greatly appreciated! Thank you Link Code: <script language="javascript">
//script found on www.a1javascripts.com
//all credit to unknown author
<!-- hide script from old browsers
window.onerror = null;
var netscape = 0;
var goodIE = 0;
browserName = navigator.appName.substring(0,8);
browserVer = parseFloat(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3)
{ netscape = 1; }
if (browserName == "Microsof" && browserVer >= 4)
{ goodIE = 1; }
// end error trapping code
if (netscape || goodIE) {
pic1 = new Image(150,100);
pic1.src = "enso.jpg";
pic2 = new Image(150,100);
pic2.src = "shine.jpg";
pic3 = new Image(150,100);
pic3.src = "samsara.jpg";
pic4 = new Image(150,100);
pic4.src = "samsara.jpg";
a1 = new Image(300,200); a1.src = "personal1.jpg"; a2 = new Image(300,200);
a2.src = "personal2.jpg";
b1 = new Image(325,225); b1.src = "spiritual1.jpg";
b2 = new Image(325,225); b2.src = "spiritual2.jpg";
c1 = new Image(325,225); c1.src = "eyeent1.jpg"; c2 = new Image(300,200);
c2.src = "eyeent2.jpg";
}
function hiLite(imgDocID, imgObjName, imgDocID2, imgObjName2, imgDocID3, imgDocID3) {
if (netscape || goodIE) {
document.images[imgDocID].src = eval(imgObjName + ".src");
document.images[imgDocID2].src = eval(imgObjName2 + ".src");
document.images[imgDocID3].src = eval(imgObjName3 + ".src");
}}
//end hiding -->
</script>
<img alt="Default Image" name="pic" src="default.gif"
height="100" width="150" /><br />
<a onclick="window.focus()"
onmouseout="hiLite('pic','pic1','a','a1'); window.status='';return true;"
onmouseover="hiLite('pic','pic2','a','a2'); window.status='Button 1';return true;"
href="your-page.html"><img alt="Button 1" name="a"
src="upbutton1.gif"
style="border: 0px solid ; width: 325px; height: 225px;" /></a><br />
<a onclick="window.focus()"
onmouseout="hiLite('pic','pic1','b','b1'); window.status='';return true;"
onmouseover="hiLite('pic','pic3','b','b2'); window.status='Button 2';return true;"
href="your-page.html"><img alt="Button 2" name="b"
src="upbutton2.gif"
style="border: 0px solid ; width: 325px; height: 225px;" /></a>
<a onclick="window.focus()"
onmouseout="hiLite('pic','pic1','c','c1'); window.status='';return true;"
onmouseover="hiLite('pic','pic4','c','c2'); window.status='Button 3';return true;"
href="your-page.html"><img alt="Button 3" name="c"
src="upbutton3.gif"
style="border: 0px solid ; width: 325px; height: 225px;" /></a>
plz i want to know how to make the effects that exists on this link in the upper part : http://www.masrawy.com/new/ 1-) changing color when pressing on the color 2-) changing font (+) to increase it (-) to decrease it (N) to set it to the normal style 3-) decrease and increase the width of the page (from كبر حجم الصفحة or صغر حجم الصفحة ) can anyone help me in doing this task????? Hello everyone, right now I have this in my site:
Code: <html>
<head>
<script type="text/javascript">
function open_win() {
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
}
</script>
</head>
<body>
<form>
<input type=button value="Open Windows" onclick="open_win()">
</form>
</body>
</html>
And I was wondering if there's a way to get rid of the button, and make it so when the user opens the webpage, it automatically opens the multiple webpages. -- If that's not possible, I was also wondering if there's a way to make the button "click" on a mouseover, so when they move their mouse across the button, it opens the pages. I would rather have the 1st option, if possible. Thanks. Hi all, I've been trying to teach myself Javascript to figure out this problem, but I'm apparently not learning what I need to. The objective is this: I want to have a div appear below my mouse when mousing over different parts of my website. I know how to swap out the background images, I know how to change the div's sizes... It's just that I'm using one div, and in order to get this right, I need it to be positioned in different places under the mouse each time the image changes. I've got a cross-browser mouse-follow worked out, I just don't know how to edit the "divvx" and "divvy" variables when I mouse over the "boxtest" div. Here is the code I'm working on, maybe I'm just missing something obvious? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var divvx=22, divvy=22;
function doMouseMove(e){
var posx=0;var posy=0;
var e=(!e)?window.event:e;//IE:Moz
if (e.pageX){//Moz
posx=e.pageX+window.pageXOffset;
posy=e.pageY+window.pageYOffset;
}
else if(e.clientX){//IE
if(document.documentElement){//IE 6+ strict mode
posx=e.clientX+document.documentElement.scrollLeft;
posy=e.clientY+document.documentElement.scrollTop;
}
else if(document.body){//Other IE
posx=e.clientX+document.body.scrollLeft;
posy=e.clientY+document.body.scrollTop;
}
}
else{return false}//old browsers
var mydiv=document.getElementById('curicon');
mydiv.style.left=(posx-divvx)+'px';
mydiv.style.top=(posy-22)+'px';
}
document.onmousemove=doMouseMove
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
</script>
<style type="text/css">
<!--
#curicon {
background-image: url(resources/cursors/Inactive_Halo.png);
height: 44px;
width: 44px;
position: absolute;
top: -80px;
left: -80px;
}
#boxtest {
position: absolute;
height: 100px;
width: 400px;
background-color: #0F0;
left: 149px;
top: 213px;
}
-->
</style>
</head>
<body>
<div id="curicon" name="curicon" style="position:absolute; left:-250px; z-index:2"></div>
<div id="boxtest" onMouseOver="MM_callJS('divvx=68')"></div>
</body>
</html>
Thanks, everyone. This has been driving me nuts for an entire week. The code below allows the user to hover over 1 object and it not only replaces the object but also shows an additional object between the buttons. It works great in Firefox, but does not in Internet Explorer. HELP webpage: http://www.isp.ucar.edu/ ------------ standard mouseover commands are used in index.php <CODE> <a href="http://www.tiimes.ucar.edu/beachon/" onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')"> <img src="images/buttons/button-beachon.gif" alt="BEACHON" width="181" height="74" border="0" id="img1" /></a> </CODE> ------------ <CODE> if (document.images) { img1on = new Image(); img1on.src = "images/buttons/button-beachon-on.gif"; img1off = new Image(); img1off.src = "images/buttons/button-beachon.gif"; img2on = new Image(); img2on.src = "images/buttons/button-bgs-on.gif"; img2off = new Image(); img2off.src = "images/buttons/button-bgs.gif"; img3on = new Image(); img3on.src = "images/buttons/button-iam-on.gif"; img3off = new Image(); img3off.src = "images/buttons/button-iam.gif"; img4on = new Image(); img4on.src = "images/buttons/button-nvia-on.gif"; img4off = new Image(); img4off.src = "images/buttons/button-nvia.gif"; img5on = new Image(); img5on.src = "images/buttons/button-utls-on.gif"; img5off = new Image(); img5off.src = "images/buttons/button-utls.gif"; img6on = new Image(); img6on.src = "images/buttons/button-water-on.gif"; img6off = new Image(); img6off.src = "images/buttons/button-water.gif"; img7on = new Image(); img7on.src = "images/buttons/button-exploratory-on.gif"; img7off = new Image(); img7off.src = "images/buttons/button-exploratory.gif"; // second image that does not appear in original button space img1ad = new Image(); img1ad.src = "images/buttons/beachon-overview-sm.gif"; img2ad = new Image(); img2ad.src = "images/buttons/bgs-overview-sm.gif"; img3ad = new Image(); img3ad.src = "images/buttons/iam-overview-sm.gif"; img4ad = new Image(); img4ad.src = "images/buttons/nvia-overview-sm.gif"; img5ad = new Image(); img5ad.src = "images/buttons/utls-overview-sm.gif"; img6ad = new Image(); img6ad.src = "images/buttons/water-overview-sm.gif"; img7ad = new Image(); img7ad.src = "images/buttons/exploratory-overview-sm.gif"; } { function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); document["holder"].src = eval(imgName + "ad.src"); } } } function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); document["holder"].src = "images/buttons/isp-overview-sm.gif"; } } </CODE> I am working with the quiz found below (Multiple Choice Quiz that is instantly graded/checked), and would like to add pictures to the questions and rollover sound effects. I have figured how to add the picture, but not the sound. Sound effects are played when added to the html section, but not when added to the javascript coding. I am alright with html and css, but not with javascript. Any help from the javascript experts would be appreciated. ********* Coding Example ********* <HTML> <HEAD> <TITLE>The JavaScript Source: Miscellaneous : Multiple Choice Quiz</TITLE> <META HTTP-EQUIV="The JavaScript Source" CONTENT = "no-cache"> <META NAME="description" CONTENT="Add a quiz to your Web page without using a server-side script. Easy to set-up. Questions and answers are stored in a multi-dimensional array format in an external file. The quiz is marked in real time, and once answered, questions are set to read-only. A summary of the users score is alerted at the end."> <META NAME="date" CONTENT="2005-12-27"> <META NAME="channel" CONTENT="Developer"> <META NAME="author" CONTENT="James Crooke"> <META NAME="section" CONTENT="Miscellaneous"> <style type="text/css"> <!-- .question { color:darkblue; font-size:14px; font-weight:bold; } --> </style> <script type="text/javascript"> <!-- /* This script and many more are available free online at The JavaScript Source :: http://javascript.internet.com Created by: James Crooke :: http://www.cj-design.com */ var useranswers = new Array(); var answered = 0; function renderQuiz() { for(i=0;i<questions.length;i++) { document.writeln('<p class="question">' + questions[i] + ' <span id="result_' + i + '"><img src="blank.gif" style="border:0" alt="" /></span></p>'); for(j=0;j<choices[i].length;j++) { document.writeln('<input type="radio" name="answer_' + i + '" value="' + choices[i][j] + '" id="answer_' + i + '_' + j + '" class="question_' + i + '" onclick="submitAnswer(' + i + ', this, \'question_' + i + '\', \'label_' + i + '_' + j + '\')" /><label id="label_' + i + '_' + j + '" for="answer_' + i + '_' + j + '"> ' + choices[i][j] + '</label><br />'); } } document.writeln('<p><input type="submit" value="Show Score" onclick="showScore()" /> <input type="submit" value="Reset Quiz" onclick="resetQuiz(true)" /></p><p style="display:none"><img src="correct.gif" style="border:0" alt="Correct!" /><img src="incorrect.gif" style="border:0" alt="Incorrect!" /></p>'); } function resetQuiz(showConfirm) { if(showConfirm) if(!confirm("Are you sure you want to reset your answers and start from the beginning?")) return false; document.location = document.location; } function submitAnswer(questionId, obj, classId, labelId) { useranswers[questionId] = obj.value; document.getElementById(labelId).style.color = "grey"; //disableQuestion(classId); showResult(questionId); answered++; } function showResult(questionId) { if(answers[questionId] == useranswers[questionId]) { document.getElementById('result_' + questionId).innerHTML = '<img src="correct.gif" style="border:0" alt="Correct!" />'; // I tried to make the background a different colour for the answer document.getElementById(questionId).style.border ='1px'; } else { document.getElementById('result_' + questionId).innerHTML = '<img src="incorrect.gif" style="border:0" alt="Incorrect!" />'; } } function showScore() { if(answered != answers.length) { alert("You have not answered all of the questions yet!"); return false; } questionCount = answers.length; correct = 0; incorrect = 0; for(i=0;i<questionCount;i++) { if(useranswers[i] == answers[i]) correct++; else incorrect++; } pc = Math.round((correct / questionCount) * 100); alertMsg = "You scored " + correct + " out of " + questionCount + "\n\n"; alertMsg += "You correctly answered " + pc + "% of the questions! \n\n"; if(pc == 100) alertMsg += response[0]; else if(pc >= 90) alertMsg += response[1]; else if(pc >= 70) alertMsg += response[2]; else if(pc > 50) alertMsg += response[3]; else if(pc >= 40) alertMsg += response[4]; else if(pc >= 20) alertMsg += response[5]; else if(pc >= 10) alertMsg += response[6]; else alertMsg += response[7]; if(pc < 100) { if(confirm(alertMsg)) resetQuiz(false); else return false; } else { alert(alertMsg); } } function disableQuestion(classId) { var alltags=document.all? document.all : document.getElementsByTagName("*") for (i=0; i<alltags.length; i++) { if (alltags[i].className == classId) { alltags[i].disabled = true; } } } var questions = new Array(); var choices = new Array(); var answers = new Array(); var response = new Array(); // To add more questions, just follow the format below. questions[0] = "1) JavaScript is ..." ; choices[0] = new Array(); choices[0][0] = "the same as Java"; choices[0][1] = "kind of like Java"; choices[0][2] = "different than Java"; choices[0][3] = "ther written part of Java"; answers[0] = choices[0][2]; ///////// THIS IS THE SECTION THAT I'M TRYING TO WORK ON ///////// // image works, but sound doesn't // questions[1] = "<a href='javascriptHTMLSound' id='dummyspan' // the smiley is actually a colon followed by a D as in "DHTML" onMouseOver='DHTMLSound('success.wav')'><img src='some_image.gif'></a>"; choices[1] = new Array(); choices[1][0] = "Play This" + "<a href='javascriptlaySound('success.wav')'>Play This</a>"; choices[1][1] = "objective"; choices[1][2] = "evil"; choices[1][3] = "object based"; answers[1] = choices[1][3]; ///////////////////////////////////////////////////////////////// questions[2] = "3) To comment out a line in JavaScript ..."; choices[2] = new Array(); choices[2][0] = "Precede it with two forward slashes, i.e. '//'"; choices[2][1] = "Precede it with an asterisk and a forward slash, i.e. '*/'"; choices[2][2] = "Precede it with an asterisk, i.e. '*'"; choices[2][3] = "Precede it with a forward slash and an asterisk, i.e. '/*'"; answers[2] = choices[2][0]; questions[3] = "4) JavaScript can only run on Windows"; choices[3] = new Array(); choices[3][0] = "True"; choices[3][1] = "False"; answers[3] = choices[3][1]; questions[4] = "5) Semicolons are optional at the end of a JavaScript statement."; choices[4] = new Array(); choices[4][0] = "True"; choices[4][1] = "False"; answers[4] = choices[4][0]; questions[5] = "strings are..."; choices[5] = new Array(); choices[5][0] = "strings, numbers, BooBoos, and nulls"; choices[5][1] = "strings, text, Booleans, and nulls"; choices[5][2] = "strings, numbers, Booleans, and nulls"; choices[5][3] = "strings, numbers, Booleans, and zeros"; answers[5] = choices[5][2]; // response for getting 100% response[0] = "Excellent, top marks!"; // response for getting 90% or more response[1] = "Excellent, try again to get 100%!" // response for getting 70% or more response[2] = "Well done, that is a good score, can you do better?"; // response for getting over 50% response[3] = "Nice one, you got more than half of the questions right, can you do better?"; // response for getting 40% or more response[4] = "You got some questions right, you can do better!"; // response for getting 20% or more response[5] = "You didn't do too well, why not try again!?"; // response for getting 10% or more response[6] = "That was pretty poor! Try again to improve!"; // response for getting 9% or less response[7] = "Oh dear, I think you need to go back to school (or try again)!"; //--> </script> </HEAD> <BODY BGCOLOR=#ffffff vlink=#0000ff > <script> function DHTMLSound(surl) { document.getElementById("dummyspan").innerHTML="<embed src='"+surl+"' hidden=true autostart=true loop=false>"; } </script> <script type="text/javascript"> <!-- renderQuiz(); //--> </script> </body></html> ********* I have also tried the following sound ideas, but none work "within" the javascript -- they do work when assigned to a button inside the html however... The trick is, I want to be able to display an image within the question, then mouseover a <span> of text or an image (preferrably NOT a link <a>) and have the sounds played as part of the choices for the question. For a slightly different purpose, I'm also interested in being able to have the correst answer (for more complicated quizes) appear beside the question, in a <div> if possible, rather than an alert, to give the solution / reasoning for the correct answer. Any help at all would be really appreciated. I've been looking for a solution to a dropdown menu problem where the button does not stay hovered when the list is navigated/as soon as the cursor leaves the button area. At the moment the effect is setup using css sprites (locally) but I have seperate images also for the 2 states. HTML Code: <dl class="dropdown">
<dt id="three-ddheader" onmouseover="ddMenu('three',1)" onmouseout="ddMenu('three',-1)"><div id="mainnav1"></div></dt>
<dd id="three-ddcontent" onmouseover="cancelHide('three')" onmouseout="ddMenu('three',-1)">
<ul><li>
<a href="page1.html" class="underline">Products 1</a>
<a href="page2.html" class="underline">Products 2</a>
<a href="page3.html" class="underline">Products 3</a>
<a href="page4.html" class="underline">Products 4</a>
<a href="page5.html" class="underline">Products 5</a>
<a href="page6.html" class="underline">Products 6</a>
<a href="page7.html">Products 7</a>
</li></ul></dd></dl>
CSS Code: #mainnav1 {width:218px; height:50px; background:url(../images/root/mainnav1.png)} #mainnav1:hover {background-position:0 -50px;} #mainnav1 a:active {background-position:0 -50px;}
#mainnav2 {width:218px; height:50px; background:url(../images/root/mainnav2.png)} #mainnav2:hover {background-position:0 -50px;} #mainnav2 a:active {background-position:0 -50px;}
#mainnav3 {width:218px; height:50px; background:url(../images/root/mainnav3.png)} #mainnav3:hover {background-position:0 -50px;} #mainnav3 a:active {background-position:0 -50px;}
#mainnav4 {width:218px; height:50px; background:url(../images/root/mainnav4.png)} #mainnav4:hover {background-position:0 -50px;} #mainnav4 a:active {background-position:0 -50px;}
.dropdown {float:left;}
.dropdown dt {width:218px; height:50px; overflow:hidden;}
.dropdown dt:hover {background-position:0 -50px;}
.dropdown dd {position:absolute; overflow:hidden; width:218px; display:none; z-index:200;}
.dropdown ul {width:218px;}
.dropdown li {display:inline;}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#747474; text-decoration:none; background:#efefef; width:218px;}
.dropdown a:hover {background:#757575; color:#dddddd;}
.dropdown .underline {border-bottom:1px solid #d9d9d9;}
JS Code: var DDSPEED = 1;
var DDTIMER = 1;
// Mouse Events //
function ddMenu(id, d) {
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearInterval(c.timer);
if (d == 1) {
clearTimeout(h.timer);
if (c.maxh && c.maxh <= c.offsetHeight) {
return
} else if (!c.maxh) {
c.style.display = 'block';
c.style.height = 'auto';
c.maxh = c.offsetHeight;
c.style.height = '0px';
}
c.timer = setInterval(function () {
ddSlide(c, 1)
}, DDTIMER);
} else {
h.timer = setTimeout(function () {
ddCollapse(c)
}, 0);
}
}
// Collapse //
function ddCollapse(c) {
c.timer = setInterval(function () {
ddSlide(c, -1)
}, DDTIMER);
}
// Cancel Collapse During Dropdown Selection //
function cancelHide(id) {
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearTimeout(h.timer);
clearInterval(c.timer);
if (c.offsetHeight < c.maxh) {
c.timer = setInterval(function () {
ddSlide(c, 1)
}, DDTIMER);
}
}
// Expand & Contract //
function ddSlide(c, d) {
var currh = c.offsetHeight;
var dist;
if (d == 1) {
dist = (Math.round((c.maxh - currh) / DDSPEED));
} else {
dist = (Math.round(currh / DDSPEED));
}
if (dist <= 1 && d == 1) {
dist = 1;
}
c.style.height = currh + (dist * d) + 'px';
if ((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)) {
clearInterval(c.timer);
}
}
I heard that it's something to do with the mouseover function but feel like I could be adding css and not changing some of the stuff already present governing the script, can anyone guide me? Thanks! I'm still very new to Javascript, like really new. I'm trying to use this sliding menu script, and I want to have multiple menus on the same page. Problem is, I can't get multiple ID's for the menus to work, so if I click one menu's slider button, then it will always only affect the first menu, regardless of which I click. Here's where I think I need to modify the code, at the top: Code: <script type="text/javascript"> var sliderIntervalId = 0; var sliderHeight = 232; var sliding = false; var slideSpeed = 10; function Slide() And where the ID value is defined: Code: function SlideUpRun()
{
slider = document.getElementById('exampleSlider'),
slider = document.getElementById('slider2');
if(sliderHeight <= 0)
{
sliding = false;
sliderHeight = 0;
slider.style.height = '0px';
clearInterval(sliderIntervalId);
Obviously, these are just snippets of the whole code, I didn't know if less/more is needed to be shwon. Can anyone help on this? I just need to know how to separate it, so I can add multiple menus to the same page. Hi, This code works as it should, but I want to enhance it so that it does a search by category within the Regions/Provinces selected. But I'm not an expert with Javascript, actually the complete reverse. This if for a classified ads website, so the categories are like cars, homes, etc Code: <html>
<head>
<title></title>
<meta content="">
<style></style>
<script language="JavaScript">
function loadPage(list) { location.href=list.options[list.selectedIndex].value }
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<form>
<div align="center">
Search by
<select name="file" size="1"
onchange="loadPage(this.form.elements[0])"
target="_parent._top"
onmouseclick="this.focus()">
<option value select="selected">Regions</option>
<option value="http://www.apple.com">Region 1</option>
<option value="http://www.apple.com">Region 2</option>
<option value="http://www.apple.com">Region 3</option>
</select>
</form>
</td>
<td>
<form>
or
<select name="file" size="1"
onchange="loadPage(this.form.elements[0])"
target="_parent._top"
onmouseclick="this.focus()">
<option value select="selected">Provinces</option>
<option value="http://www.apple.com">Province 1</option>
<option value="http://www.apple.com">Province 2</option>
<option value="http://www.apple.com">Province 3</option>
</select>
</div></form>
</td></tr></table>
</body>
</html>
Any help would be appreciated. Or any improvements would also be appreciated. Also, any help in converting the table to CSS would be appreciated. Hi there, i've run into a bit of a problem, i've managed to get javascript to change an image when choosing an option from a dropdown menu, but when i try to get it to change multiple images it only ever changes one image... Code: <script type="text/javascript">
function changeWalls(what, whatimg)
{
if(what != "none")
{
document.images[whatimg].src = what;
}
}
</script>
<select name="Walls" onchange="changeWalls(this.value,'walls')">
<option value="images/white.gif" selected="selected">Please Select a Colour</option>
<option value="images/WALLCC.png">Classic Cream</option>
<option value="images/WALLSG.png">Shale Grey</option>
<option value="images/WALLDO.png">Deep Ocean</option>
<option value="images/WALLSM.png">Surfmist</option>
</select>
then the images i want are multiples so i want to change 2 of these Code: <img src="images/front_0002_front-wall-colour.png" alt="" name="walls" border="0" id="walls2" /> hi all, i am using this javascript code which i found on a random website to create a tooltip style popup. in my head is: Code: <script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden"
}
</script>
<style type="text/javascript">
#twittericon {
position: fixed;
bottom:148px;
left: 6%;
width: 33px;
height:29px;
z-index: 49;
}
#tweet{
position:fixed;
bottom:178px;
left: 3%;
max-width:310px;
color:#333333;
font-family:Arial Narrow,Arial,Sans-serif;
font-size:12px;;
z-index:6000;
visibility: hidden;
}
</style>
in my body is: Code: <div id="twittericon" onMouseOver="showmenu('tweet')" onMouseOut="hidemenu('tweet')">
<a href="http://twitter.com/bubblejam" target="_blank">
<img src="http://nang-nang.net/tumblr/blog/twit-bird.gif" width="33" height="29" /></a>
</div>
<div id="tweet">
(latest tweet generating code)
</div>
this creates a little bird, which displays latest tweet when rolled-over. you can see a working example of this he http://nang-nang.net/tumblr/blog/try.html my question a (1) can i add something to the javascript to create a delay when onMouseOut so that the tweet doesn't disappear immediately? also (2) could i also add something to the javascript to create a visual effect when onMouseOver or onMouseOut occurs? like a fade in effect? or slide up effect? i've been playing around with scriptaculous effects but i'm not sure how to combine that script with my script above. an answer to (1) at least would be very much appreciated! please i want to know how to make lightbox effects with the idea of switching between pages using the lightbox please follow this link: http://particletree.com/examples/lightbox/ while pressing on "submit an inquiry " it will show a form... all that i need is to make the same idea but using registration form first page: contains user data ---> on pressing next .. i want to be on same lightbox box effect but using next page that contains his work data... and on third page he will have a message that his registration is done successfully.. so how to switch between pages in lightbox effects??? Hello, i want to integrate dropdown combobox menu on my website for pricing, i want the same like it is on the following link: Web Hosting - Shared cPanel Web Hosting and on this website there is no choose currency option, but i have set on my website on the corner of the top side. how can i do this? Regards, Alex C Hi guys I am using a customized version of this free css dropdown menu script. It is just pure css, no jquery. I wanted to add some delay to the open and close on mouseover, here is what I added: Code: <script type="text/javascript">
$(document).ready(function () {
$('ul.dropdown li').hover(
function () {
//show its submenu
$('ul', this).slideDown(150);
},
function () {
//hide its submenu
$('ul', this).slideUp(250);
}
);
});
</script>
When I first mouse over, this does nothing, but if I mouse over the same drop down li a second time, it works. Check it out here. Any ideas on how I can fix this? this js file disables the toggle from all my effects. any idea how to fix this problem without deleting this? Code: // SpryDOMEffects.js - version 0.6 - Spry Pre-Release 1.7
//
// Copyright (c) 2007. Adobe Systems Incorporated.
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
// * Neither the name of Adobe Systems Incorporated nor the names of its
// contributors may be used to endorse or promote products derived from this
// software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
(function() { // BeginSpryComponent
if (typeof Spry == "undefined" || !Spry.Utils || !Spry.$$)
{
alert("SpryDOMEffects.js requires SpryDOMUtils.js");
return;
}
if (!Spry.Effect) Spry.Effect = {};
Spry.Effect.Animator = function(opts)
{
Spry.Effect.Animator.Notifier.call(this);
this.animatorID = Spry.Effect.Animator.nextID++;
this.dropFrames = true;
this.fps = 60; // frames per-second
this.duration = 500; // msecs
this.timer = 0;
this.startTime = 0; // Used only when dropFrames is true.
this.currentFrame = 0;
this.easeFunc = Spry.Effect.Animator.defaultEaseFunc;
this.stopped = false;
Spry.Effect.Animator.copyProps(this, opts);
this.interval = 1000 / this.fps;
this.numFrames = (this.duration / 1000) * this.fps;
if (this.onComplete)
{
var self = this;
this.addObserver({ onAnimationComplete: function(){ self.onComplete(); } });
}
};
Spry.Effect.Animator.nextID = 1;
Spry.Effect.Animator.copyProps = function(dst, src)
{
if (src)
{
for (prop in src)
dst[prop] = src[prop];
}
return dst;
};
Spry.Effect.Animator.getElement = function(element)
{
if (arguments.length > 1)
{
for (var i = 0, elements = [], length = arguments.length; i < length; i++)
elements.push(Spry.Effect.Animator.getElement(arguments[i]));
return elements;
}
if (typeof element == 'string')
element = document.getElementById(element);
return element;
};
Spry.Effect.Animator.defaultEaseFunc = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
Spry.Effect.Animator.Notifier = function()
{
this.observers = [];
this.suppressNotifications = 0;
};
Spry.Effect.Animator.Notifier.prototype.addObserver = function(observer)
{
if (!observer)
return;
// Make sure the observer isn't already on the list.
var len = this.observers.length;
for (var i = 0; i < len; i++)
{
if (this.observers[i] == observer)
return;
}
this.observers[len] = observer;
};
Spry.Effect.Animator.Notifier.prototype.removeObserver = function(observer)
{
if (!observer)
return;
for (var i = 0; i < this.observers.length; i++)
{
if (this.observers[i] == observer)
{
this.observers.splice(i, 1);
break;
}
}
};
Spry.Effect.Animator.Notifier.prototype.notifyObservers = function(methodName, data)
{
if (!methodName)
return;
if (!this.suppressNotifications)
{
var len = this.observers.length;
for (var i = 0; i < len; i++)
{
var obs = this.observers[i];
if (obs)
{
if (typeof obs == "function")
obs(methodName, this, data);
else if (obs[methodName])
obs[methodName](this, data);
}
}
}
};
Spry.Effect.Animator.Notifier.prototype.enableNotifications = function()
{
if (--this.suppressNotifications < 0)
{
this.suppressNotifications = 0;
Spry.Debug.reportError("Unbalanced enableNotifications() call!\n");
}
};
Spry.Effect.Animator.Notifier.prototype.disableNotifications = function()
{
++this.suppressNotifications;
};
Spry.Effect.Animator.prototype = new Spry.Effect.Animator.Notifier;
Spry.Effect.Animator.prototype.constructor = Spry.Effect.Animator;
Spry.Effect.Animator.prototype.start = function()
{
this.stopped = false;
this.currentFrame = 0;
this.startTime = (new Date()).getTime();
this.notifyObservers("onAnimationStart");
var self = this;
this.timer = setTimeout(function(){ self.onStepAnimation(); }, this.interval);
};
Spry.Effect.Animator.prototype.stop = function()
{
if (this.timer)
clearTimeout(this.timer);
this.timer = 0;
this.stopped = true;
this.notifyObservers("onAnimationStopped");
};
Spry.Effect.Animator.prototype.onStepAnimation = function()
{
var obj = {};
if (this.dropFrames)
{
obj.duration = this.duration;
obj.elapsed = ((new Date).getTime()) - this.startTime;
if (obj.elapsed > obj.duration)
obj.elapsed = obj.duration;
}
else
{
obj.duration = this.numFrames;
obj.elapsed = ++this.currentFrame;
}
obj.easingConst = this.easeFunc(obj.elapsed, 0, 1, obj.duration)
this.notifyObservers("onPreDraw", obj);
this.draw(obj.elapsed, obj.duration, obj.easingConst);
this.notifyObservers("onPostDraw", obj);
if (!this.stopped)
{
if (obj.elapsed < obj.duration)
{
var self = this;
this.timer = setTimeout(function(){ self.onStepAnimation(); }, this.interval);
}
else
{
this.stop();
this.notifyObservers("onAnimationComplete");
}
}
};
Spry.Effect.Animator.prototype.draw = function(elapsed, duration, easingConst)
{
// The default draw method does nothing. It is assumed that
// derived classes will provide their own implementation of this
// method.
debug.log("elapsed: " + elapsed + " -- duration: " + duration + " -- easingConst: " + easingConst);
};
///////////////////////////////////////////////////////////////////////////////
Spry.Effect.CSSAnimator = function(elements, styleStr, opts)
{
this.animationSets = [];
Spry.Effect.Animator.call(this, opts);
this.add(elements, styleStr);
};
Spry.Effect.CSSAnimator.prototype = new Spry.Effect.Animator();
Spry.Effect.CSSAnimator.prototype.constructor = Spry.Effect.CSSAnimator;
Spry.Effect.CSSAnimator.prototype.add = function(elements, styleStr)
{
// The first argument for the CSSAnimator can be
// the id of an element, an element node, or an array of
// elements and/or ids.
elements = Spry.$$(elements);
if (elements.length < 1)
return;
var animSet = { elements: elements, cssProps: []};
this.animationSets.push(animSet);
// Convert the styleStr into an object.
var toObj = Spry.Utils.styleStringToObject(styleStr);
for (var p in toObj)
{
var obj = new Object;
var v = toObj[p];
obj.value = new Number(v.replace(/[^-\d\.]+/g, ""));
obj.units = v.replace(/[-\d+\.]/g, "");
toObj[p] = obj;
}
for (var i = 0; i < elements.length; i++)
{
var obj = animSet.cssProps[i] = new Object;
for (var p in toObj)
{
var pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs[p];
if (!pFuncs)
pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs["default"];
obj[p] = new Object;
obj[p].from = new Number(pFuncs.get(elements[i], p).replace(/[^-\d\.]+/g, ""));
obj[p].to = toObj[p].value;
obj[p].distance = obj[p].to - obj[p].from;
obj[p].units = toObj[p].units;
}
}
};
Spry.Effect.CSSAnimator.prototype.start = function()
{
for (var s = 0; s < this.animationSets.length; s++)
{
var animSet = this.animationSets[s];
var elements = animSet.elements;
var cssProps = animSet.cssProps;
for (var i = 0; i < elements.length; i++)
{
var ele = elements[i];
var eleProps = ele.spryCSSAnimatorProps;
if (!eleProps)
eleProps = ele.spryCSSAnimatorProps = new Object;
var obj = cssProps[i];
for (var p in obj)
eleProps[p] = this.animatorID;
}
}
return Spry.Effect.Animator.prototype.start.call(this);
};
Spry.Effect.CSSAnimator.prototype.stop = function()
{
for (var s = 0; s < this.animationSets.length; s++)
{
var animSet = this.animationSets[s];
var elements = animSet.elements;
var cssProps = animSet.cssProps;
for (var i = 0; i < elements.length; i++)
{
var ele = elements[i];
var obj = cssProps[i];
var eleProps = ele.spryCSSAnimatorProps;
for (var p in obj)
{
if (eleProps[p] == this.animatorID)
delete eleProps[p];
}
}
}
return Spry.Effect.Animator.prototype.stop.call(this);
};
Spry.Effect.CSSAnimator.prototype.draw = function(elapsed, duration, easingConst)
{
for (var s = 0; s < this.animationSets.length; s++)
{
var animSet = this.animationSets[s];
var elements = animSet.elements;
var cssProps = animSet.cssProps;
for (var i = 0; i < elements.length; i++)
{
var ele = elements[i];
var eleProps = ele.spryCSSAnimatorProps;
var obj = cssProps[i];
for (var p in obj)
{
if (eleProps[p] == this.animatorID)
{
var pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs[p];
if (!pFuncs)
pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs["default"];
if (elapsed > duration)
pFuncs.set(ele, p, obj[p].to + obj[p].units);
else
pFuncs.set(ele, p, obj[p].from + (obj[p].distance * easingConst) + obj[p].units);
}
}
}
}
};
Spry.Effect.CSSAnimator.stylePropFuncs = {};
Spry.Effect.CSSAnimator.stylePropFuncs["default"] = {
get: function(ele, prop)
{
return ele.style[prop];
},
set: function(ele, prop, val)
{
ele.style[prop] = val;
}
};
Spry.Effect.CSSAnimator.stylePropFuncs["opacity"] = {
get: function(ele, prop)
{
var val = 1;
if (ele.style.opacity)
val = ele.style.opacity;
else if (ele.style.filter)
{
var strVal = ele.style.filter.replace(/.*alpha\(opacity=(\d+)\).*/, "$1");
if (strVal)
val = parseInt(strVal) / 100;
}
return val + "";
},
set: function(ele, prop, val)
{
ele.style.opacity = "" + val;
ele.style.filter = "alpha(opacity=" + (val * 100) + ")";
}
};
///////////////////////////////////////////////////////////////////////////////
Spry.$$.Results.defaultEaseFunc = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
Spry.$$.Results.animatePropertyTo = function(propName, to, options)
{
var opts = { interval: 10, duration: 1000, onComplete: null, transition: Spry.$$.Results.defaultEaseFunc };
Spry.Effect.Animator.copyProps(opts, options);
var objs = [];
for (var i = 0; i < this.length; i++)
{
var obj = objs[i] = new Object;
obj.ele = this[i];
obj.from = obj.ele[propName];
obj.distance = to - obj.from;
}
var startTime = (new Date).getTime();
var animateFunc = function()
{
var elapsedTime = ((new Date).getTime()) - startTime;
if (elapsedTime > opts.duration)
{
for (var i = 0; i < objs.length; i++)
objs[i].ele[propName] = to;
if (opts.onComplete)
opts.onComplete();
}
else
{
for (var i = 0; i < objs.length; i++)
{
var obj = objs[i];
obj.ele[propName] = opts.transition(elapsedTime, obj.from, obj.distance, opts.duration);
}
setTimeout(animateFunc, opts.interval);
}
};
setTimeout(animateFunc, opts.interval);
return this;
};
Spry.$$.Results.animateStyleTo = function(styleStr, options)
{
var a = new Spry.Effect.CSSAnimator(this, styleStr, options);
a.start();
return this;
};
})(); // EndSpryComponent
I am working on implementing a gallery into my website with categories that collapse/expand the set of images within those categories. i figured out mostly everything i need except i can't get the BUTTONS to behave the way that I want. I'm working with the following images: arrow1: arrow2: arrow3: in general, I want "arrow1" to change to "arrow2" whenever you hover a mouse over it, and back to "arrow1" when the mouse is moves away. (which is simple by itself) the complicated part that I can't figure out, is what happens when you CLICK the button. I want the image to change to "arrow3" when it is clicked (because the content expands), and to STAY at that image until it's clicked again, at which point it should behave as what I started with. The problem is, I can get the arrow to change on click no problem, but once the mouse is moved away, the "onMouseOut" effect changes it back to "arrow1". this is the code I'm working with, hope someone can help Code: <SCRIPT LANGUAGE = "JavaScript">
<!--
first=new Image
first.src="http://www.clearnonsense.com/images/arrow1.png"
second=new Image
second.src="http://www.clearnonsense.com/images/arrow2.png"
// --></SCRIPT>
</HEAD>
<table border="0">
<tr>
<td>
<a href="javascript:void(0)" OnMouseOut="monitor.src=first.src" OnMouseOver="monitor.src=second.src" onMouseUp="clickdown('pic1')"><img src="http://www.clearnonsense.com/images/arrow1.png" border="0" name="monitor" onclick="showhide('div1',this,'http://www.clearnonsense.com/images/arrow1.png','http://www.clearnonsense.com/images/arrow3.png');"/></a>
</td>
</tr>
<tr>
<td valign="top" width="15">
<div id="div1" style="display: none;">imgset1</div>
</td>
</tr>
</table>
The 2 sites below are animated scrolling pages which I know how to do, What I am looking for is how do they make the effect like the pages are sliding independent "like an overlaid effect" of each other If anyone can show me how they get that effect or if there are any demo or examples to help me figure it out http://www.sketchtravel.com/ http://www.foofighters.com/us/discography thanks for your help -rob Friend i concern with some that man told me , JavaScript programming is the best effective for website development. so how it is tell me ?
|
|||||||