|
JavaScript - Help W/a Code: Mouse-over & On-click Effects
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>
Similar TutorialsHi 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? I've got to have a typo somewhere, but i can't seem to find it. I need a new pair of eyes to point it out for me. background: trying to code a mouseover link for a nav bar. everything is working( hyperlink, normal image shows up) but when i mouse over the image swap doesn't happen. I have 2 parts of code. 1st preloads images and does the swap function. loads in <head> See below: Code: <SCRIPT language="javascript" type="text/javascript">
if (document.images)
{
/* preload images */
var subcontractorsOn = new Image ();
subcontractorsOn.scr = "subcontractorsOn.gif";
var subcontractorsOff = new Image ();
subcontractorsOff.scr = "subcontractorsOff.gif";
}
function mouseOn (imgName)
{
if (document.images)
document [imgName].scr = eval (imgName + "On.scr");
}
function mouseOff (imgName)
{
if (document.images)
document [imgName].scr = eval (imgName + "Off.scr");
}
</SCRIPT>
2nd just calls the functions to preform the swap. this is in the <body> see code below Code:
<a href="subcontractors.htm" onMouseOut="mouseOn('subcontractors')"
onMouseOver="mouseOff('subcontractors')">
<img src="subcontractorsOff.gif" height="40" width="133" name="subcontractors" id="subcontractors" border="0" alt="subcontractors"></a>
any insight would be great. regards, Fatmann66 Hey guys! How can i simulate a click event? Like a real mouse click. and a keyboard click event? I've spent days searching without luck. I need help with the following: I have a program that have some hotkeys set to trigger some events. I would like to activate those hotkeys from inside firefox by clicking on a button. I'm not looking for keypress events, it has to be a button click. So, let's say I click on the button that executes a javascript code that emulates F7 or CTRL+A or whatever key or key combination. Can you guys please help with to find a solution? Oh, and I need it to work with Firefox only. Thanks! In a <textarea ..., the user can do this: 1) copy some text from somewhere; 2) right-mouse click on the textarea, from the floating menu, select the Paste, the text is pasted in the textarea. How can I detect the action of the Paste menuitem being clicked (on IE and Firefox, respectively)? Thanks Scott 1. I have code to show tip like: <a class="notvisible" onclick="mytip.disable();" href="javascript:void(0);">Close</a> How is correct Javascript code to Close this tip when clicked? 2. How to move next news feed with click on arror icon and back icon? <a onclick="mynews.previous();" href="javascript:void(0);">Previous</a> <a onclick="mynews.next();" href="javascript:void(0);">Next</a> How is correct Javascript code to move news item next and prevoius news? when clicked? <script type="text/javascript"> mynews.init(); mytip.init(); </script> I have small webBrowser1 and I have the 3 Buttons(Back, Forward,Go) also I have the ComboBox1 with the Items Collection of different website url using MSVB 2008 in C++ My question: 1) How could I make my mouse click on each url with timer between the first url and the second and so on and let's say time between the 1st url and scroll down to the second with timer of 3 second . 2) How to make also the mouse click on certain button on that website what is the command code for that. I Thank you for any help. I am having problem with editing string on mouse click. I have a string of text like this: Code: id1=&id2=&id3=&id4=& And now I need to show/hide part of string by clicking on a links. I would like to hide/show each id's (i.e. id1=& It is simple to hide whole text but how about part of it ? Hi, I am still designing the website and want some flexibility. I am capturing the mouse clicks fine on top of an image, but the coordinates are absolute and not relative to the image. How can I capture mouse clicks relative to the image so that I can move the image anywhere in my website? Thanks! I use the Mouse Gesture Redox addon for Firefox 3.4 which allows javascript to be added for a gesture. I have found code which will perform different commands for the same gesture when a particular key is pressed. I would like the code to be disabled after each key press or a timeout (if a key is not pressed) until the same gesture is performed again. My attempts at coding to produce this effect have not worked. Can this be achieved? porman9 Code: document.onkeypress=detectKey;
function detectKey(e)
{
if(e.which==97){BrowserOpenAddonsMgr();}
else
if(e.which==100){gBrowser.loadOneTab(currURL, null, null, null, false, false);document.body.focus();}
else
if(e.which==110){mgB_OpenTab();}
else
if(e.which==109){mgW_MinWin();}
else
if(e.which==114){mgW_Restart();}
else
if(e.which==117){mgB_UndoCloseTab();}
}
I would like for the script to say "Ok here is the button on this page *clicks* (or submit)" I have tried this with out help, I'm not really sure what to do. I've tried learning what I can on my own, I've tried using the search tool. Here is the part of the code I am trying to use to make my click button. Code: <div id="interactiveBox">
<div class="divpad3">
<form name="buyform" method="POST" action="/marketplace/userstore/2690240/buy/?id=567595175&step=submit" ENCTYPE="application/x-www-form-urlencoded">
<strong>Buy It Now</strong>
<strong>Password</strong> <input type="password" class="marketplaceInputField" name="password">
<input type="hidden" name="nonce" value="860307364.1283901229.441212630">
<button type="submit" class="cta-button-sm"><span>Buy Now</span></button>
<br /><br />
</form>
Here is what I have tried and failed.. This code will be used in combination with greasemonkey Code: <script>function clickOnLoad()
{
document.buyform.submit.value = "true";
}
body onload="clickOnLoad()"</script>
Hello, I have found this JS code that makes a window popunder on the first click when someone clicks anywhere on the page. This code seems to bypass any inbuilt browser pop up blockers. Code: // JavaScript Document
var stagedPopFrequency = "1 days";
var stagedCookieName = "__name";
if (!document.currentStage)
document.currentStage = 0;
document.currentStage++;
if (document.currentStage == 1) {
function stagedGetCookie(Name) {
var search = Name + "=";
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search);
if (offset != -1) { // if cookie exists
offset += search.length;
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue = unescape(document.cookie.substring(offset, end));
}
}
return returnvalue;
}
function stagedSetCookie(Name, Value, Expire) {
if (Expire != null) {
var expireDate = new Date();
expireDate.setDate(expireDate.getDate() + parseInt(Expire));
document.cookie = Name+"="+Value+";path=/;expires=" + expireDate.toGMTString();
} else {
document.cookie = Name+"="+Value+";path=/";
}
}
function stagedResetCookie(Name) {
var expireDate = new Date();
expireDate.setDate(expireDate.getDate() - 10);
document.cookie = Name+"=;path=/;expires=" + expireDate.toGMTString();
}
function stagedPopUnder() {
if (stagedGetCookie(stagedCookieName) == '') {
var thisStage = 1;
var stageFunc = eval('window.popUnderStage'+thisStage);
if (stageFunc != undefined) {
stageFunc();
stagedSetCookie(stagedCookieName, thisStage + 1, stagedPopFrequency);
}
} else {
var thisStage = parseInt(stagedGetCookie(stagedCookieName));
var stageFunc = eval('window.popUnderStage'+thisStage);
if (stageFunc != undefined) {
stageFunc();
stagedSetCookie(stagedCookieName, thisStage + 1, stagedPopFrequency);
}
}
}
function stagedAttachBody() {
if (document.body) {
if (document.all) {
document.body.attachEvent('onclick', stagedPopUnder);
} else {
document.body.addEventListener('click', stagedPopUnder, false);
}
} else {
setTimeout('stagedAttachBody()', 200);
}
} stagedAttachBody();
}
if( parseInt(navigator.appVersion) > 3 )
{
winWidth = screen.availWidth;
winHeight = screen.availHeight;
}
else
{
winWidth = "1024";
winHeight = "768";
}
var stagedTmpFunc = function() {
var pu = window.open("http://www.domain.com", "_blank", "width=" + winWidth + ",height=" + winHeight + ",scrollbars=1,resizable=1,menubar=1");
pu.blur();
window.focus();
}
eval('window.popUnderStage'+document.currentStage+' = stagedTmpFunc;');
stagedTmpFunc = null;
This will work across IE, FF and Chrome. What im trying to do is get this code to pop 2 windows on the first click. Ive tried calling this script twice in the html but this causes one window to pop on the first click and another on the second. Ive tried to do this: Code: var stagedTmpFunc = function() {
var pu = window.open("http://www.domain1.com", "_blank", "width=" + winWidth + ",height=" + winHeight + ",scrollbars=1,resizable=1,menubar=1");
pu.blur();
window.focus();
var pu = window.open("http://www.domain2.com", "_blank", "width=" + winWidth + ",height=" + winHeight + ",scrollbars=1,resizable=1,menubar=1");
pu.blur();
window.focus();
}
But this causes IE to keep popping the windows on every single click, I tried another variation, I numbered the second window "var pu2" or something like that, I cant quite remember. But this still did not work. It just caused errors. If this code cannot be edited to pop 2 windows on the first click, does anyone have another code which can and still bypass the pop up blockers built into browsers? Thanks basically i have a form with lots of fields.. drop down boxes and textarea's and standard input text.. now what i need is a way to change all of these fields with a fetch button. i can get the value for the fields from the perl script on my server side. the form basicslly sends lots of fields to my perl script and saves each field of data into seperate text docs. now my customer would like to retrieve the data back to the form to change aspects of it to be resubmitted . i am struggling with the simplist of codes to set the value of the fields from a javascript variable any ideas please. I'm looking for code which does the following: When a visitor visits my website and clicks anywhere on the page, (regardless of where the mouse clicks) it will automatically redirect him to another site. I think an event listener might be a solution, but I'm not sure. Thanks a lot for any help on this If possible, I would like there to be a 2 second time delay before it does the redirection. I am looking for a javascript code for this idea under this message ---------------------------------------------------------------------------------------------------------------------------------------------------- I want to create a kind of shopping website so when you click on a image or text it will add some text to a textarea,, it will include the name of item and price of an item 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????? 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??? Friend i concern with some that man told me , JavaScript programming is the best effective for website development. so how it is tell me ?
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>
|
|||||||